当前手机屏幕形状可谓是五花八门,有刘海屏,挖孔屏,水滴屏等等各种各样的异形屏,这就给游戏开发带来一个问题,游戏 UI 如何适配手机异形屏?

1. 解决方法

Cosos Creator 中提供了一个 SafeArea 的组件,该组件会获取 AndroidiOS 等异形屏设备中的 安全区域 ,然后将组件所在的节点布局适配到安全区域中。

SafeArea 组件依赖于 Widget 组件,在添加 SafeArea 组件时会自动添加 Widget 组件(如果节点上没有的话),而且若要删除 Widget 节点,需要先删除 SafeArea 节点。

SafeArea 组件一般用于 UI 交互区域的顶层节点,该组件在启用时会通过 cc.sys.getSafeAreaRect() 获取当前设备的安全区域,并通过 Widget 组件来实现自适应调整布局。

如果当前设备是异形屏,则节点布局适配到异形屏的安全区域,如果是普通屏幕,则节点布局为设计布局。

1.1 通过手动添加

添加 SafeArea 组件的方式为,选中节点,点击 添加组件 -> UI 组件 -> SafeArea 即可。

1.2 通过代码添加

若需要代码动态的话,可以在初始化的时候,通过如下方式为节点添加 SafeArea 组件:

this.node.addComponent(cc.Widget);
this.node.addComponent(cc.SafeArea);

1.3 FairyGUI 中使用

若项目中使用 FairyGUI 来进行 UI 制作的话,UI 根节点为 fgui.GRoot.inst.node ,添加方式如下:

fgui.GRoot.inst.node.addComponent(cc.Widget);
fgui.GRoot.inst.node.addComponent(cc.SafeArea);

此外,由于 FairyGUI 并非通过 Widget 组件来实现自适应布局,所以需要设置 GRoot 节点的宽高为安全区域的宽高。

fgui.GRoot.inst.width = cc.sys.getSafeAreaRect().width;
fgui.GRoot.inst.height = cc.sys.getSafeAreaRect().height;

2. 注意

如果在使用 SafeArea 时发现无效,请检查 项目 -> 项目设置 -> 模块设置 中的 SafeArea 模块是否有勾选。

3. 参考资料

  1. SafeArea 组件参考
最后修改:2021 年 09 月 26 日 08 : 46 PM
如果觉得我的文章对你有用,请随意赞赏