Cocos Creator 在设计之初就致力于解决一套资源适配多种分辨率屏幕的问题。简单概括来说,我们通过以下几个部分完成多分辨率适配解决方案:
- Canvas(画布)组件随时获得设备屏幕的实际分辨率并对场景中所有渲染元素进行适当的缩放。
- Widget(对齐挂件)放置在渲染元素上,能够根据需要将元素对齐父节点的不同参考位置。
- Label(文字)组件内置了提供各种动态文字排版模式的功能,当文字的约束框由于 Widget 对齐要求发生变化时,文字会根据需要呈现完美的排版效果。
- Sliced Sprite(九宫格精灵图)则提供了可任意指定尺寸的图像,同样可以满足各式各样的对齐要求,在任何屏幕分辨率上都显示高精度的图像。
接下来我们首先了解设计分辨率、屏幕分辨率的概念,才能理解 Canvas(画布)组件的缩放作用 ###设计分辨率和屏幕分辨率 设计分辨率 是内容生产者在制作场景时使用的分辨率蓝本,而 屏幕分辨率 是游戏在设备上运行时的实际屏幕显示分辨率。
通常设计分辨率会采用市场目标群体中使用率最高的设备的屏幕分辨率,比如目前安卓设备中 800x480 和 1280x720 两种屏幕分辨率,或 iOS 设备中 1136x640 和 960x640 两种屏幕分辨率。这样当美术或策划使用设计分辨率设置好场景后,就可以自动适配最主要的目标人群设备。
那么当设计分辨率和屏幕分辨率出现差异时,Cocos Creator 会如何进行适配呢?
假设我们的设计分辨率为 800x480, 美术制作了一个同样分辨率大小的背景图像。
###不管屏幕宽高比如何,完整显示设计分辨率中的所有内容,允许出现黑边 最后一个例子,我们屏幕分辨率假设为 640 x 960 的竖屏,如果要确保背景图像完整的在屏幕中显示,需要同时开启 Canvas 组件中的 适配高度 和 适配宽度,这时场景图像的缩放比例是按照屏幕分辨率中较小的一维来计算的,在下图的例子中,由于屏幕宽高比小于 1,就会以宽度为准计算缩放倍率,即 640/800 = 0.8 倍。
###在场景中使用 Canvas 组件 新建场景时,会自动在场景根节点上添加一个包含 Canvas 组件的节点。在 Canvas 组件上就可以设置上文中提到的选项:
- 设计分辨率(Design Resolution)
- 适配高度(Fit Height)
- 适配宽度(Fit Width)
将 Canvas 节点作为所有图像渲染节点的根节点,这些节点就都可以自动享受 Canvas 智能适配多分辨率的缩放效果了。 ###编辑场景时 Canvas 的特性 在编辑场景时,Canvas 节点的尺寸(Size)属性会保持和 设计分辨率 一致,不能手动更改。
位置(Position)属性会保持在 (width/2, height/2),也就是和设计分辨率相同大小的屏幕中心。
由于锚点(Anchor)属性的默认值会设置为(0.5, 0.5),Canvas 会保持在屏幕中心位置,并且 Canvas 的子节点会以屏幕中心作为坐标系原点,这一点和 Cocos 引擎中的习惯不同,请格外注意。 ###运行时 Canvas 的特性 除了上述特性外,运行时 Canvas 组件还会有以下属性变化:
* 缩放(Scale):根据前文中描述的缩放倍率计算原则,将计算后的缩放倍率赋值给 Scale 属性。 * 尺寸(Size):在无黑边的模式中,Canvas 的 Size 属性会和屏幕分辨率保持一致。在有黑边的模式中,Canvas 的 Size 会保持设计分辨率不变。
由于运行时 Canvas 可以准确获得屏幕可见区域的尺寸,我们就可以根据这个尺寸来设置 UI 元素的对齐策略,来保证 UI 元素都能在屏幕可见区域正确显示。