egret 解决游戏loading前的黑屏

一、问题

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

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

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

 1 private async loadResource() {
 2         try {
 3             await RES.loadConfig(EgretGameApi.basePath+"resource/default.res.json", EgretGameApi.basePath+"resource/");
 4             await RES.loadGroup("loading");
 5             const loadingView = new LoadingUI();
 6             this.stage.addChild(loadingView);
 7             await this.loadTheme();
 8             await RES.loadGroup("preload", 0, loadingView);
 9             this.stage.removeChild(loadingView);
10         }
11         catch (e) {
12             console.error(e);
13         }
14     }

二、解决

方案一：

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

方案二：

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

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

方案三：

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