CocosCreator常用的屏幕适配方式

前言

Cocos Creator 提供了多种屏幕适配的方式，以确保游戏在不同设备上能够正确显示和布局。

以下是 Cocos Creator 中常用的屏幕适配方式及其说明。

---

1、 Cocos Creator 项目设置中统一配置设计分辨率和屏幕适配

在同一个项目里的多个 Canvas 的设计分辨率仍然采用同一套设计分辨率以及适配方案。

可以通过 项目 -> 项目设置 -> 项目数据 页面配置。

• 设计宽度、高度：主要设置游戏设计分辨率的尺寸，根据实际情况进行配置。
• 适配屏幕高度：固定高度。
• 适配屏幕宽度：固定宽度。

以下是详细适配方案：

（1）等比显示整个场景内容（showAll）

在Creator上同时勾选适配屏幕高度和适配屏幕宽度即可开启showAll适配模式。

这个适配方案的优点是不管屏幕比例如何，保证整个场景都是可见的，而且等比适配，但是总是在左右两边或者上下两边出现黑边。

（2）NO_BORDER（等比拉伸到全屏）

和SHOW_ALL相反，在Creator上同时去除 适配屏幕高度和适配屏幕宽度 的勾选即可开启 NO_BORDER 适配模式。

这个适配模式是根据屏幕比例等比拉伸画面，有两种结果：

    当高度拉满，宽度超出屏幕的时候，裁切宽度。
    当宽度拉满，高度超出屏幕的时候，裁切高度。

它的优点：是没有黑边

它的缺点：是在不同的屏幕比例上，不能确定到底是宽度裁切还是高度裁切

所以进行场景设计的时候有挺大局限性

（3）FIXED_HEIGHT（等比拉伸高度到全屏）

在横屏模式下，通常设置适配方案为固定高度，这也是Creator默认的适配方案。

在Creator中，只勾选Canvas组件的适配屏幕高度即可开启FIXED_HEIGHT适配模式。

它的优点是：

可以实现全屏，拉伸或者缩放高度为屏幕高度，宽度进行裁切。

（4）FIXED_WIDTH（等比拉伸宽度到全屏)

在竖屏模式下，通常设置适配方案为固定宽度。

在Creator中，只勾选Canvas组件的适配屏幕宽度即可开启FIXED_WIDTH适配模式。
 

2、代码中完成设计分辨率设置和屏幕适配设置

// 设置设计分辨率
cc.view.setDesignResolutionSize(960, 640, cc.ResolutionPolicy.FIXED_WIDTH);

// 获取设计分辨率
const designSize = cc.view.getDesignResolutionSize();
console.log('Design resolution:', designSize.width, designSize.height);
```
在上述示例中，设置设计分辨率为 960x640，并使用 `cc.ResolutionPolicy.FIXED_WIDTH` 适配模式。这意味着游戏画面将根据宽度进行等比缩放。

通过设置设计分辨率和屏幕适配以后，还需要通过多个部分的工作来配合，才能完美适配。

3、以下四个部分完成多分辨率适配

• Canvas（画布） 组件随时获得设备屏幕的实际分辨率并对场景中所有渲染元素进行适当的缩放。
• Widget（对齐挂件） 组件添加给 UI 节点，能够根据需要将元素对齐目标节点（默认是父节点）的不同参考位置。
• Label（文字） 组件内置了提供各种动态文字排版模式的功能，当文字的约束框由于 Widget 对齐要求发生变化时，文字会根据需要呈现完美的排版效果。
• Sliced Sprite（九宫格精灵图） 则提供了可任意指定尺寸的图像，同样可以满足各式各样的对齐要求，在任何屏幕分辨率上都显示高精度的图像。

---

总结

以上是常用的屏幕适配方式，可以根据游戏的需求选择适合的方式。适配的目的是确保游戏在不同设备上能够正确显示，并提供良好的用户体验。