egret 解决游戏loading前的黑屏

一、问题

egret游戏loading界面的制作可以参考这个，我就不多赘述啦，步骤也比较详细《Egret制作Loading页面及分步加载资源教程》。

后面我发现即便加上loading，在游戏启动时，展示loading界面前还是会有一瞬间的黑屏，降低用户体验。

要解决它，肯定要究其原因，据我个人认为是加载loading这个资源组也是需要时间的。

private async loadResource() {
        try {
            await RES.loadConfig(EgretGameApi.basePath+"resource/default.res.json", EgretGameApi.basePath+"resource/");
            await RES.loadGroup("loading");
            const loadingView = new LoadingUI();
            this.stage.addChild(loadingView);
            await this.loadTheme();
            await RES.loadGroup("preload", 0, loadingView);
            this.stage.removeChild(loadingView);
        }
        catch (e) {
            console.error(e);
        }
    }

二、解决

方案一：

这个方案是几年前的了，我也没用过，在这就说说思路：egret社区有一种解决方案就是更改配置，在loading前把loading背景图放到顶层，这样好得不会黑屏，loading界面出来之后就删除掉，具体可以去社区学习。

方案二：

修改index.html文件的样式，把loading背景图当做html、body的背景：

html, body {
            -ms-touch-action: none;
            background: url('resource/assets/images/preloading/loadingBg.jpg') no-repeat left center / 100% 100%;
            padding: 0;
            border: 0;
            margin: 0;
            height: 100%;
        }

方案三：

在index.html里把背景图使用localstorage保存到本地，在js里设置html、body的背景图，好处就是下次进来不用再加载这个图片了，也不错。