返回

独家揭秘：Cocos Creator游戏异形屏适配全攻略

前端

如何在 Cocos Creator 中应对手机异形屏

在当今的智能手机市场中，手机屏幕形状可谓是五花八门，从刘海屏到挖孔屏再到水滴屏，异形屏的出现给游戏开发带来了新的挑战：如何在不同形状的屏幕上适配游戏 UI，让游戏体验不打折扣？

了解安全区域

安全区域是指屏幕上不会被刘海、挖孔等异形区域遮挡的部分。将游戏 UI 元素限制在安全区域内可以避免被异形区域遮挡。在 Cocos Creator 中，可以通过以下代码获取安全区域：

const safeArea = cc.view.getSafeAreaRect();

异形区域遮罩

异形区域遮罩是一种在屏幕上创建与异形区域形状相同的遮罩，然后将游戏 UI 元素放在遮罩内的技术。这样，异形区域就会被遮挡住，游戏 UI 元素就不会被遮挡。

在 Cocos Creator 中，可以使用以下代码创建异形区域遮罩：

const mask = new cc.Node();
mask.addComponent(cc.Mask);

异形区域适配器

异形区域适配器是一种可以自动适应异形区域的组件。将游戏 UI 元素添加到异形区域适配器中，异形区域适配器会自动调整游戏 UI 元素的位置和大小，以适应异形区域。

在 Cocos Creator 中，可以使用以下组件作为异形区域适配器：

  • cc.Layout
  • cc.Widget

自定义适配器

如果以上解决方案都不能满足需求，可以自己编写一个自定义的适配器。自定义适配器可以根据具体需求来实现异形屏适配。

在 Cocos Creator 中，可以通过以下方式编写自定义适配器：

const CustomAdapter = cc.Class({
    extends: cc.Component,

    properties: {
        // 异形区域的形状
        maskShape: cc.Enum({
            RECT: 0,
            CIRCLE: 1,
            // ...
        }),

        // 异形区域的位置
        maskPosition: cc.Vec2,

        // 异形区域的大小
        maskSize: cc.Size,
    },

    onLoad() {
        // 获取异形区域的形状、位置和大小
        const maskShape = this.maskShape;
        const maskPosition = this.maskPosition;
        const maskSize = this.maskSize;

        // 创建异形区域遮罩
        const mask = new cc.Node();
        mask.addComponent(cc.Mask);

        // 设置异形区域遮罩的形状、位置和大小
        switch (maskShape) {
            case cc.CustomAdapter.MaskShape.RECT:
                mask.getComponent(cc.Mask).type = cc.Mask.Type.RECT;
                break;
            case cc.CustomAdapter.MaskShape.CIRCLE:
                mask.getComponent(cc.Mask).type = cc.Mask.Type.CIRCLE;
                break;
            // ...
        }
        mask.setPosition(maskPosition);
        mask.setContentSize(maskSize);

        // 将异形区域遮罩添加到节点树中
        this.node.addChild(mask);

        // 将游戏 UI 元素添加到异形区域遮罩中
        for (const child of this.node.children) {
            child.setParent(mask);
        }
    },
});

结论

以上是 Cocos Creator 游戏异形屏适配的各种解决方案，大家可以根据自己的需求选择合适的解决方案，让游戏在各种设备上都能完美呈现。

常见问题解答

  1. 什么是异形屏？
    异形屏是指具有非传统矩形形状的屏幕，例如刘海屏、挖孔屏和水滴屏。

  2. 为什么游戏需要适配异形屏？
    如果游戏 UI 元素没有针对异形屏进行适配，可能会被异形区域遮挡，影响玩家的游戏体验。

  3. 如何获取安全区域？
    在 Cocos Creator 中，可以通过以下代码获取安全区域：

const safeArea = cc.view.getSafeAreaRect();
  1. 如何创建异形区域遮罩？
    在 Cocos Creator 中，可以通过以下代码创建异形区域遮罩：
const mask = new cc.Node();
mask.addComponent(cc.Mask);
  1. 如何使用异形区域适配器？
    在 Cocos Creator 中，可以使用以下组件作为异形区域适配器：
  • cc.Layout
  • cc.Widget