CocosCreator屏幕适配小结

1 原理

CocosCreator引擎通过Canvas和Widget组件来适配不同分辨率的屏幕。

• Canvas(画布)：可以随时获得设备的实际大小并对所有渲染元素进行缩放。
• Widget(对齐组件)：能够将元素对齐父节点的不同参考位置。
• 设计分辨率：场景制作时使用的模版分辨率。
• 屏幕分辨率：设备运行时的屏幕显示的实际分辨率。

假设设计分辨率的宽度为w1，高度为h1；屏幕实际分辨率的宽度为w2，高度为h2。那么

• 当设计分辨率宽高比(w1/h1)小于屏幕分辨率宽高比(w2/h2) 时，说明实际屏幕更宽，为了避免屏幕左右两侧留下黑边，应该适配宽度，即把画面按宽度比值(w2/w1)进行缩放，使画面正好撑满屏幕宽度。这种情况下，屏幕画面的上下两边可能会被裁剪掉一部分。

• 当设计分辨率宽高比(w1/h1)大于屏幕分辨率宽高比(w2/h2) 时，说明实际屏幕更高，为了避免屏幕上下两边留下黑边，应该适配高度，即把画面按高度比值(h2/h1)进行缩放，使画面正好撑满屏幕高度。这种情况下，屏幕画面的左右