标签：Fit cc 适配 分辨率 CocosCreator 微信 屏幕 宽高比
主题
Cocos Creator不同手机分辨率的背景图像和场景内容适配
特别说明
CocosCreator微信小游戏开发系列文章，是我在逐步开发过程中，基于官方文档之上，记录一些重点内容，以及对官方文档中有些知识点的补充和分析。
正文
我在《微信小游戏开发之Cocos Creator系列文章》中，写Cocos Creator项目配置时，提到了Canvas默认分辨率设置，微信推荐使用的设计稿分辨率是750x1334（iphone6的屏幕尺寸），然后把模拟器的分辨率尺寸也设成了750x1334。
当我发布构建，在微信开发者工具运行时，哦豁，怎么会有黑边呢，突然想起来现在市面上的手机分辨率五花八门的，肯定要做屏幕多分辨率适配的啊，大意了啊，我没有闪。
按照惯例，先看下当设计分辨率和屏幕分辨率出现差异时，Cocos Creator 官方建议如何进行适配呢？
有兴趣的可以去看下cocos官方文档《多分辨率适配方案》的详细介绍，我直接总结一下官方文档中的适配方案：
文档中的适配主要是靠Canvas组件节点上的两个选项：
适配高度（Fit Height）适配宽度（Fit Width）
下面是这两个选项适合使用的情形：
-
设计分辨率宽高比大于屏幕分辨率宽高比，勾选Fit Height，可以避免屏幕可见区域内出现黑边，之后配合Widget（对齐挂件）调整 UI 元素的位置，来保证 UI 元素出现在屏幕可见区域内。 -
设计分辨率宽高比小于屏幕分辨率宽高比，勾选Fit Width，可以避免出现黑边，同样需要配合Widget（对齐挂件）来调整 UI 元素的位置，使UI 元素出现在屏幕可见区域内。 -
比例相同的情况，随便勾选哪一个都可以。
为什么是设计分辨率宽高比大于屏幕分辨率宽高比时，适配高度而不是适配高度呢？
来看看它的适配过程:
假设设计分辨率宽高是800 x 480，屏幕分辨率宽高是1024 x 768
1. 先算以下两个值：
* A1: 屏幕分辨率宽 / 设计分辨率宽 = 1024 / 800 = 1.28
* A2: 屏幕分辨率高 / 设计分辨率高 = 768 / 480 = 1.6
2. 适配实际是将场景图像放大 "A1或A2" 倍
3. 假设放到A1倍：分辨率变成 800*1.28 / 480*1.28 = 1024 / 614.4
可以看到高度其实还没有达到当前屏幕的高度，所以还是会出现黑边
4. 放到A2倍：分辨率变成 800*1.6 / 480*1.6 = 1280 / 768
可以看到宽高都达到当前屏幕宽高度，
只是宽度有部分超出屏幕被裁剪掉了，
但不会出现黑边
5. 所以，设计分辨率宽高比大于屏幕分辨率时，适配高度。
同理，如果是设计分辨率宽高比小于屏幕分辨率宽高比，就应当适配高度。
文档中还提到了其他的几种适配策略，但是他们都有可能出现黑边：
-
SHOW_ALL模式：同时勾选
Fit Height和Fit Width，图像内容不会失真，场景图像等比进行缩放，缩放比例是取屏幕宽/设计分辨率宽与屏幕高/设计分辨率高中较小的一个值。 -
NO_BORDER模式：
Fit Height和Fit Width两个都不勾选，图像内容不会失真，但会有裁剪，场景图像等比进行缩放，缩放比例是取屏幕宽/设计分辨率宽与屏幕高/设计分辨率高中较大的一个值。 -
EXACT_FIT模式：不详细介绍了，官方也是一笔带过。
看到这里，你会发现因为手机屏幕的分辨率实在太多，屏幕分辨率宽高比大于小于设计分辨率宽高比的手机屏幕都会有，所以在编辑器上勾选Fit Height和Fit Width中的某一个或者多个，都没有办法适配所有屏幕，那应该怎么办呢？
方案一：动态选择启用 Fit Height 模式和 Fit Width 模式
既然编辑器上怎么勾选都会有问题，那我们可以动态地判断屏幕分辨率宽高比来选择启用Fit Height模式和Fit Width模式啊。
直接上代码：
//FullScreenAdapter.js
cc.Class({
extends: cc.Component,
onl oad () {
//监听窗口大小变化时的回调，每次窗口变化都要自动适配
cc.view.setResizeCallback(() => this.screenAdapter());
this.screenAdapter();
},
/**
* Fit Height 模式：适用于宽大于高的屏幕
* Fit Width 模式：适用于高大于宽的屏幕
*/
screenAdapter() {
//当前屏幕分辨率比例
let screenRatio = cc.winSize.width / cc.winSize.height;
//设计稿分辨率比例
let designRatio = cc.Canvas.instance.designResolution.width / cc.Canvas.instance.designResolution.height;
if (screenRatio <= 1) {
//屏幕高度大于或等于宽度,即竖屏
if (screenRatio <= designRatio) {
this.setFitWidth();
} else {
//此时屏幕比例大于设计比例
//为了保证纵向的游戏内容不受影响，应该使用 fitHeight 模式
this.setFitHeight();
}
} else {
//屏幕宽度大于高度,即横屏
this.setFitHeight();
}
},
setFitWidth() {
cc.Canvas.instance.fitHeight = false;
cc.Canvas.instance.fitWidth = true;
},
setFitHeight() {
cc.Canvas.instance.fitHeight = true;
cc.Canvas.instance.fitWidth = false;
}
});
把上面的js脚本挂载到Canvas节点上，就可以简单的实现所有屏幕适配了。
注意： 如果项目运行在可动态调整窗口大小的平台（比如浏览器），最好每次调整窗口都刷新一下页面。
方案二：基于SHOW_ALL模式，动态设置最大父节点的scale属性
这个方案比较麻烦，但是确实可以实现所有屏幕的适配，大家有兴趣可以去看看“Cocos Creator 多分辨率完美适配”系列文章。
刘海屏和水滴屏等手机状态栏的适配
现在市面上的手机额头上千奇百怪的状态，什么刘海啊、水滴啊、挖孔啊、伸缩啊，为了用户体验，没办法我们也要去适配它。
方法很简单，我们只要获取微信菜单按钮（右上角胶囊按钮）距离屏幕顶部的距离，然后设置一下顶部节点的paddingTop就可以了，直接上代码吧：
let menuInfo = wx.getMenuButtonBoundingClientRect();
let systemInfo = wx.getSystemInfoSync();
let paddingTop = this.node.parent.height * (menuInfo.top / systemInfo.screenHeight);
let widget = this.node.getComponent(cc.Widget);
widget.top = paddingTop;
widget.isAbsoluteTop = true;
widget.isAlignTop = true;
widget.updateAlignment();
介绍cocos提供的几个获取View的方法
cc.view.getDesignResolutionSize()
获取的是你在编辑器中设计的分辨率，也就是canvas 组件下设置的设计分辨率。
cc.view.getFrameSize()
获取各种手机、pad上的屏幕分辨率，也就是硬件分辨率。
cc.view.getVisibleSizeInPixel()
获取的是 visibleSize 的基础上乘以各种适配策略下的缩放比例后的分辨率。
cc.view.getVisibleSize()
返回视图窗口可见区域尺寸
总结
多分辨率适配的核心原理是动态改变Canvas节点或者其他节点的scale属性，熟悉Cocos Api文档的各个方法，能为我们解决各种疑难问题提供丰富的思路。
结尾
既然您看到这了，说明文章对你还有吸引力，帮忙点个赞再走吧，谢谢！
关注我的公众号「掉队程序员」，持续输出更多内容！
自己动手写，分解项目中的各个模块需求，通过查文档和搜索Cocos社区，解决碰到的问题，最终在微信上线了下面这款微信小游戏《成语锦衣卫》，欢迎大家扫码体验，并作为参考项目模版，开发出属于自己的小游戏
预告
下一节和朋友们说一说：Toast插件的使用，一直提示“readFile:fail permission denied”的原因
标签：Fit,cc,适配,分辨率,CocosCreator,微信,屏幕,宽高比 来源： https://blog.csdn.net/kingoneyun/article/details/112795564
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。