1 原理
CocosCreator引擎通过Canvas和Widget组件来适配不同分辨率的屏幕。
- Canvas(画布)：可以随时获得设备的实际大小并对所有渲染元素进行缩放。
- Widget(对齐组件)：能够将元素对齐父节点的不同参考位置。
- 设计分辨率：场景制作时使用的模版分辨率。
- 屏幕分辨率：设备运行时的屏幕显示的实际分辨率。
假设设计分辨率的宽度为w1，高度为h1；屏幕实际分辨率的宽度为w2，高度为h2。那么
- 当设计分辨率宽高比
(w1/h1)小于屏幕分辨率宽高比(w2/h2)时，说明实际屏幕更宽，为了避免屏幕左右两侧留下黑边，应该适配宽度，即把画面按宽度比值(w2/w1)进行缩放，使画面正好撑满屏幕宽度。这种情况下，屏幕画面的上下两边可能会被裁剪掉一部分。 -
当设计分辨率宽高比
(w1/h1)大于屏幕分辨率宽高比(w2/h2)时，说明实际屏幕更高，为了避免屏幕上下两边留下黑边，应该适配高度，即把画面按高度比值(h2/h1)进行缩放，使画面正好撑满屏幕高度。这种情况下，屏幕画面的左右两侧可能会被裁剪掉一部分。
2 使用
CocosCreator 3.x开始，去掉了Canvas组件中的fitWidth和fitHeight属性，而改为在项目 -> 项目设置 -> 项目数据页面中配置。
- 根据场景设计，自行选择
适配高度或适配宽度。一般来说，横屏游戏选择适配高度，竖屏游戏选择适配宽度。 - 如果
适配高度或适配宽度同时开启，则无论在任何屏幕上，都按照屏幕分辨率的较小一维来计算缩放比例，使所有内容都能显示，但屏幕上可能出现黑边。 - 如果
适配高度或适配宽度都不开启，则根据屏幕宽高比，自动选择适配高度或适配宽度。
之后通过Widget组件调整UI元素的位置，保证UI元素出现在屏幕可见范围内。
欢迎关注微信公众号“楚游香”，获取更多文章和交流。
