cocos creator 2.2 处理水滴屏的时候，强行制造黑边怎么解决？

Question

cocos creator 2.2.2做出来的游戏，实现全屏显示的时候，检测水滴屏的时候，直接强制把水滴屏部分默认为不属于canvas部分，显示成黑色背景，怎么在不升级cocos版本的前提下，实现游戏背景全覆盖？

Answer 1

引自免费微信小程序：皆我百晓生

针对Cocos Creator 2.2.2处理水滴屏时出现的黑边问题，可以通过调整Canvas的渲染区域和游戏界面的适配策略来解决。以下是一种详细的解决方案：

步骤1：理解屏幕适配机制

Cocos Creator的屏幕适配主要通过设置Project Settings > Resolution and Presentation中的配置来实现。对于水滴屏（刘海屏）设备，目标是让游戏内容完全覆盖整个屏幕，包括水滴区域。

步骤2：修改项目设置

1. 打开 Project Settings > Resolution and Presentation。
2. 选择 Fixed Aspect Ratio 或 Fixed Resolution 作为你的屏幕适配模式。这里推荐使用Fixed Resolution，因为它允许你指定一个固定的分辨率来渲染游戏画面。
3. 设定 游戏的固定分辨率，确保这个分辨率至少与目标设备的最大分辨率相匹配。

步骤3：自定义渲染区域

由于Cocos Creator默认可能不会将水滴区域视为有效显示区域，你需要手动调整Canvas的渲染范围，以包含这部分区域。这可以通过脚本实现，具体如下：

// 自定义屏幕适配脚本
cc.Class({
    extends: cc.Component,

    onLoad () {
        this.adjustCanvasForNotch();
    },

    adjustCanvasForNotch: function () {
        let canvas = this.node;
        let designResolution = cc.view.getDesignResolutionSize();
        let windowSize = cc.view.getFrameSize();

        // 检测是否有刘海/水滴屏
        if (cc.sys.isMobile && (cc.sys.os === cc.sys.OS_ANDROID || cc.sys.os === cc.sys.OS_IOS)) {
            let notchInfo = this.getNotchInfo();
            if (notchInfo) {
                // 调整canvas大小以适应水滴屏
                if (designResolution.width / designResolution.height < windowSize.width / windowSize.height) {
                    canvas.width = windowSize.width;
                    canvas.height = windowSize.width * designResolution.height / designResolution.width;
                } else {
                    canvas.height = windowSize.height;
                    canvas.width = windowSize.height * designResolution.width / designResolution.height;
                }

                // 根据刘海位置调整canvas位置
                if (notchInfo.top) {
                    canvas.y -= notchInfo.top;
                }
                if (notchInfo.bottom) {
                    canvas.y += notchInfo.bottom;
                }
            }
        }
    },

    getNotchInfo: function () {
        // 这里需要根据具体的设备和系统版本获取刘海信息，可以使用第三方库或API
        // 假设返回的是一个对象，包含top和bottom两个属性，分别表示刘海的上部和下部高度
        return null; // 需要替换为实际获取刘海信息的代码
    }
});

步骤4：获取设备的刘海信息

getNotchInfo函数需要根据具体的设备和系统版本获取刘海的具体尺寸和位置。这通常需要依赖于设备制造商提供的API或第三方库。对于iOS设备，可以使用Objective-C或Swift编写原生插件；对于Android设备，可以使用Java或Kotlin。

步骤5：测试和调试

在不同类型的水滴屏设备上测试你的游戏，确保游戏内容能够正确地填充整个屏幕，包括水滴区域。

以上步骤应该能够帮助你在不升级Cocos Creator版本的情况下，解决水滴屏黑边的问题。如果在实施过程中遇到任何问题，确保仔细检查每个步骤，并根据你的具体需求进行适当的调整。