Cocos2d-html5入门笔记（二）

这次笔记记录的是《如何自定义 Cocos2d-html5 Loading 界面》。

官方GitHub中文文档：https://github.com/cocos2d/cocos-docs/blob/master/manual/framework/html5/customize-loading-screen/zh.md

自定义读取的页面各种元素（背景图、背景色），而不使用官方默认加载背景。

将加载的过程，用一个界面来可视化的实现出，如用一个加载场景，上面一个 Logo 显示，同事显示了当前加载资源的进度百分比。

我们要自定义实现 Loading 界面，那就是重新实现 LoaderScene 即可。

对于 LoaderScene 的实现比较简单，参考其实现，自定义一个 Loader.js 文件，实现 Loader 类，完成自定义Loading 界面的具体实现，其中大多参考（实际是copy）了 LoaderScene 的实现，在其上修改扩充，它完成了修改 Logo 图片，并添加了一个简单的精度条。

完成 Loading.js 后，需要加载它，并让它运行，以替换 LoaderScene 的运行。首先修改项目 cocos2d.js 文件，在appFiles添加 Loading.js 文件。

其次修改 main.js 文件内cc.LoaderScene.preload 为Loading.preload 即可，刷新 index.html 界面，将能看见 Loading 界面已经替换。它加载速度的快慢取决于游戏资源内容的多少。

cc.LoaderScene.preload(g_resources,function(){
            director.replaceScene(new this.startScene());
        }, this);

修改为：

Loading.preload(g_resources,function(){
            director.replaceScene(new this.startScene());
        }, this);

这里图片使用的是Base64加密方式，这和迅雷的专属链接相像，如(已删除部分因太冗长）：

var logoData = "data:image/png;base64,iVBORw0AAARnQU1BAACxjwv8YQUAAAAgY0hSTQAA5CYII=

• 减少了HTTP请求
• 某些文件可以避免跨域的问题
• 没有图片更新要重新上传，还要清理缓存的问题

附上一个在线Base64加密网站：http://www.base64-image.de/