一分钟定制CocosCreator加载页面

摘要

我们都知道 CocosCreator 打包 Web 端后会有一个黑黑的加载界面，而很多开发的小伙伴们是不太懂前端的。那么如何通过一篇文章快速学会定制页面呢？

正文

总览

在打包 Web 项目时，我们基本上都会选择手机端，我就拿手机端为例。

打包后，我们测试工程，加载页是这样的：

为什么会这样显示呢？让我们打开 build 目录看一下。你会发现你熟悉或者说你曾听说过的 html, css, js “三剑客”。html 负责显示的内容，css 负责内容的表现形式，js 脚本负责控制显示。

我们先看 html 中的显示内容部分。翻到45行，div 和 span 都是容器，内部有 id 与 class 用于标记。
位于最后层的背景以及图片就是一个 id=“splash” 的 div，然后是进度条背景 div，剩下的 span 容器就是进度条。

修改背景颜色与背景图

在 css 文件中的 84 行，定义了背景颜色与背景图。（# 这个符号，就是用于寻找对应 id）

我们将自己图片放入 build 文件夹，然后修改第 90 行的背景属性，颜色值与图片 url。

看看效果

加入文字

回到 html 文件中，删去进度条背景与进度条，加入 id=“label” 的 div，内容改为 0.00%。

唉？0.00%怎么跑到了最上边？因为我们还没有对其样式 css 进行书写。
让我们来到 css 文件中，删去 #splash 后面的部分，也就是进度条的部分。加入我们刚写的 label，如图。

距离顶部 top 为80%，本身高度为20%。这样就将位置设置好了。

修改脚本

让我们看看 main.js 脚本文件。
通过 id 获取到了 splash 然后再获取到进度条容器 progressBar。
随后在引擎加载资源的进度回调中动态的改变其 width，实现进度条。

那我们现在已经删去了进度条，改用文字代替加载进度，只要通过 id 来获取到容器，再动态修改文字内容即可。（innerHTML 为显示内容，可以理解成 CocosCreator 中 cc.Label 组件的 string）

最终效果（动图）

O(∩_∩)O~~

微信公众号

∩_∩)O~~

微信公众号

[外链图片转存中…(img-LdyMP4zE-1568867485690)]