背景
前阵子,美术设计了一个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动图,摆放在进度条上面。
至此,完毕。