Cocos2d-JS 自定义loading界面

环境：

win7 64位

Cocos2d-JS v3.1

Cocos Code IDE v1.0.0.Final

本文介绍的方法比较随意，另官方也有规范的教程：http://www.cocos2d-x.org/docs/manual/framework/html5/v2/customize-loading-screen/zh

在非web上进行测试，web版的话大家自己改改，本文后面也会介绍。

正文：

1.在main.js里面把这个方法

[javascript]  view plain copy

1. cc.LoaderScene.preload(g_resources, function () {  
2.     cc.director.runScene(new HelloWorldScene());  
3. }, this);  

改为（其实就是不用cc.LoaderScene.preload这个函数...）：

[javascript]  view plain copy

1. //    cc.LoaderScene.preload(g_resources, function () {  
2.         cc.director.runScene(new HelloWorldScene());  
3. //    }, this);  

2.在src下新建一个loading.js文件，然后在project.json里面注册

[javascript]  view plain copy

1. "jsList":[  
2.        "src/resource.js",  
3.        "src/app.js",  
4.        "src/loading.js"  
5.    ]  

3.在loading.js里面添加以下代码

[javascript]  view plain copy

1. var loadindLayer = cc.LayerColor.extend({//继承LayerColor，初始化的时候可以直接改背景颜色  
2.     a:0,//记录当前加载了多少个文件  
3.     ctor : function() {  
4.         this._super(cc.color(100, 0, 0, 255));  
5.         var size = cc.winSize;  
6.         //添加一个文本框显示  
7.         var l = new cc.LabelTTF("current percent : 0%", "Arial", 38);  
8.         //居中  
9.         l.x = size.width * 0.5;  
10.         l.y = size.height * 0.5;  
11.         this.addChild(l, 11, 12);  
12.         //加载文件的几种方式，特别是在cc.loader里面，还有好多种加载的函数，记得把加载的资源路径和文件名改掉  
13.         ccs.armatureDataManager.addArmatureFileInfoAsync("res/armatures/logo.png","res/armatures/logo.plist","res/armatures/logo.xml",this.loadCall,this);  
14.         cc.textureCache.addImage("res/armatures/robot.png",this.loadCall,this);  
15.         cc.loader.load("res/armatures/bg.jpg", this.loadCall,this);  
16.     },  
17.     loadCall : function() {  
18.         //每次调用进行计数  
19.         this.a ++;  
20.         //以tag的形式获取文本框对象  
21.         var subTile = this.getChildByTag(12);  
22.         //toFixed(2)意思是取小数点后两位，小数点后第三位为四舍五入  
23.         subTile.setString("current percent :" + (this.a / 3).toFixed(2) *100 + "%");  
24.         //加载完毕，貌似好多教程都是用百分比判断( >= 1 )  
25.         if (this.a == 3) {  
26.             //带翻页动画的场景跳转，第一个参数为动画的执行时间，第二个为跳到的场景，第三个为false时从右下角往左边翻页，true时左边往右边翻页  
27.             var trans = new cc.TransitionPageTurn(0.5, new HelloScene(), false);  
28.             cc.director.runScene(trans);  
29.         }  
30.     },  
31. });  
32.   
33. var HelloScene = cc.Scene.extend({  
34.     onEnter:function () {  
35.         this._super();  
36.         //加载app.js的layer  
37.         var layer = new HelloWorldLayer();  
38.         this.addChild(layer);  
39.     }  
40. });  

注意加载文件函数里面加载的文件要改为自己工程当前目录下的文件路径和文件名称

4.app.js里面最后的场景加载的layer改为loading的layer

[javascript]  view plain copy

1. var HelloWorldScene = cc.Scene.extend({  
2.     onEnter:function () {  
3.         this._super();  
4.         //自定义loading的layer  
5.         var layer = new loadindLayer();  
6.         this.addChild(layer);  
7.     }  
8. });  

最后看看效果：

5.web上的建议修改

不能用这个方法加载文件

[javascript]  view plain copy

1. ccs.armatureDataManager.addArmatureFileInfoAsync("res/armatures/logo.png","res/armatures/logo.plist","res/armatures/logo.xml",this.loadCall,this);  

然后loading跳转后的场景里面用上的资源请在loading的时候加载

Loading界面是一个cc.Scene具体请看：

http://blog.csdn.net/jonahzheng/article/details/38348255

如果仅仅是想把图片（cocos logo）换掉的话可以修改（frameworks/cocos2d-html5/Base64Images.js）中

?

cc._loaderImage

变量的值，该值为base64编码的图片数据，在css3中用这个字符串可以直接作为背景，图片到base64编码的转换可以通过这个网站(http://tool.css-js.com/base64.html)进行，效果如下：

随便说一下这个文件中另外两个变量：

• cc._loadingImage，是一个gif图，就是等待的动态图
• cc._fpsImage，大概是使用WebGL显示fps用的数字贴图，图片里面都是重复的数字，如果不用WebGL纯粹用canvas的话，可以把这个字符清空，这样文件也小不少