H5游戏loading页面样式制作(cocoscreator版)

背景

前阵子，美术设计了一个H5游戏loading页面的UI。如图：

刚看到这张UI图的时候，没有很好的实现思路。(第一版UI图，美术少打了一个字母，哈哈哈。)当时，有两个想法：

1、找产品压缩需求，能不能制作一个loading动图放那里，下面的进度条不要。

2、新建一个资源加载场景，场景里面内容就如上图一样，至于最前面的引擎资源加载页面(cocos发布后自动生成的那个黑色资源加载页面)，我给它设置成全透明。因为，进游戏后，先进入资源加载场景，场景资源很少，所以可以很快的进入资源加载页面，然后在资源加载页面，预加载主场景资源。(这个思路相对比较复杂，而且不是最好的实现方式。)

当时之所以，只想出上面这两种实现方式，主要是我对css不熟悉。虽然是做H5游戏开发，但对于HTML语法和CSS样式这些东西，本人并不是特别的熟悉。

经过与产品和UI的一番砍价，最终还是要做成这个样子。。。。。。。。。索性，我就把这个需求放到最后再去琢磨和攻克。在项目的其他功能，都开发完毕后。剩余的开发时间，还相对比较充分。下面可以好好的静下心来，琢磨最后一个loading资源加载页的问题。经过不断地尝试修改creator构建发布后的index.html、main.js、.css样式文件，刷新网页看修改后的效果。最终，琢磨出了最简单的实现方式，在不需要创建资源加载场景的情况下，通过修改creator构建发布出来的部分文件就可以实现设计图中的效果。

步骤如下：
1、找美术要一个loading的动图，放入打包后的build/web-mobile目录下。
2、修改index.html文件，修改内容如下：

3、修改main.js文件，修改内容如下：


4、修改style-mobile.css样式文件，修改内容如下：



最终效果:

备注：因设计觉得进度条上带文案，在进度条没加载的时候，有点丑。所以，把文字给去掉了。虽然，跟美术的设计图还有一定的差距，但好歹这个样子大概出来了。害，写完这篇帖子，是时候再去学习一波css基础样式语法了。效果不是很好，一部分原因是上面图片是通过QQ传到电脑上，有过压缩处理；一部分原因是美术在蓝湖上的设计图，用的是3x高倍图。所以看起来比较精致。

补充：如果想在进度条上显示加载进度的百分比数值，也是可以实现的。只需在进度条上挂载一个文本，然后再main.js文件内的setLoadingDisplay()方法中，动态的去修改文本内容即可。

总结：
以上loading页面的实现思想是：在creator构建发布web-mobile包，自动生成的loading页基础上，进行改动。第一步：隐藏带creator字样的背景图片；第二步：修改进度条css样式；第三步：拖进来一个gift动图，摆放在进度条上面。

至此，完毕。