微信小游戏开发之CocosCreator多分辨率场景适配方案手机状态「微信小游戏开发之CocosCreator多分辨率场景适配方案」

Cocos Creator不同手机分辨率的背景图像和场景内容适配

CocosCreator微信小游戏开发系列文章，是我在逐步开发过程中，基于官方文档之上，记录一些重点内容，以及对官方文档中有些知识点的补充和分析。

我在《微信小游戏开发之Cocos Creator系列文章》中，写Cocos Creator项目配置时，提到了Canvas默认分辨率设置，微信推荐使用的设计稿分辨率是750x1334（iphone6的屏幕尺寸），然后把模拟器的分辨率尺寸也设成了750x1334。

当我发布构建，在微信开发者工具运行时，哦豁，怎么会有黑边呢，突然想起来现在市面上的手机分辨率五花八门的，肯定要做屏幕多分辨率适配的啊，大意了啊，我没有闪。

按照惯例，先看下当设计分辨率和屏幕分辨率出现差异时，Cocos Creator 官方建议如何进行适配呢？

有兴趣的可以去看下cocos官方文档《多分辨率适配方案》的详细介绍，我直接总结一下官方文档中的适配方案：

文档中的适配主要是靠Canvas组件节点上的两个选项：

下面是这两个选项适合使用的情形：

1. 大于，勾选，可以避免屏幕可见区域内出现黑边，之后配合Widget（对齐挂件）调整 UI 元素的位置，来保证 UI 元素出现在屏幕可见区域内。

2. 小于，勾选，可以避免出现黑边，同样需要配合Widget（对齐挂件）来调整 UI 元素的位置，使UI 元素出现在屏幕可见区域内。

3. 比例相同的情况，随便勾选哪一个都可以。

为什么是大于时，适配高度而不是适配高度呢？

来看看它的适配过程:

假设设计分辨率宽高是，屏幕分辨率宽高是

同理，如果是小于，就应当适配宽度。

文档中还提到了其他的几种适配策略，但是他们都有可能出现黑边：

• SHOW_ALL模式：同时勾选和，图像内容不会失真，场景图像等比进行缩放，缩放比例是取与中较小的一个值。

• NO_BORDER模式：和两个都不勾选，图像内容不会失真，但会有裁剪，场景图像等比进行缩放，缩放比例是取与 中较大的一个值。

• EXACT_FIT模式：不详细介绍了，官方也是一笔带过。

看到这里，你会发现因为手机屏幕的分辨率实在太多，大于小于的手机屏幕都会有，所以在编辑器上勾选和中的某一个或者多个，都没有办法适配所有屏幕，那应该怎么办呢？

方案一：动态选择启用 Fit Height 模式和 Fit Width 模式

既然编辑器上怎么勾选都会有问题，那我们可以动态地判断来选择启用模式和模式啊。

直接上代码：

把上面的js脚本挂载到Canvas节点上，就可以简单的实现所有屏幕适配了。

注意： 如果项目运行在可动态调整窗口大小的平台（比如浏览器），最好每次调整窗口都刷新一下页面。

方案二：基于SHOW_ALL模式，动态设置最大父节点的scale属性

这个方案比较麻烦，但是确实可以实现所有屏幕的适配，大家有兴趣可以去看看“Cocos Creator 多分辨率完美适配”系列文章。

现在市面上的手机额头上千奇百怪的状态，什么刘海啊、水滴啊、挖孔啊、伸缩啊，为了用户体验，没办法我们也要去适配它。

方法很简单，我们只要获取微信菜单按钮（右上角胶囊按钮）距离屏幕顶部的距离，然后设置一下顶部节点的paddingTop就可以了，直接上代码吧：

介绍cocos提供的几个获取View的方法

多分辨率适配的核心原理是动态改变Canvas节点或者其他节点的scale属性，熟悉Cocos Api文档的各个方法，能为我们解决各种疑难问题提供丰富的思路。

既然您看到这了，说明文章对你还有吸引力，帮忙点个赞再走吧，谢谢！

关注我的公众号「掉队程序员」，持续输出更多内容！

自己动手写，分解项目中的各个模块需求，通过查文档和搜索Cocos社区，解决碰到的问题，最终在微信上线了下面这款微信小游戏《成语锦衣卫》，欢迎大家扫码体验，并作为参考项目模版，开发出属于自己的小游戏

舟山版权声明：本网信息来自于互联网，目的在于传递更多信息，并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益，请及时联系我们，本站将会在24小时内处理完毕，E-mail：xinmeigg88@163.com