频道导航

Cocos2d-JS 自定义loading界面

2019-05-18 Cocos2d-x 前端之家

前端之家收集整理的这篇文章主要介绍了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 plaincopy 
   
 cc.LoaderScene.preload(g_resources,function(){
 cc.director.runScene(newHelloWorldScene());
 },this);

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

copy 
    
   

//cc.LoaderScene.preload(g_resources,function(){

//},this);

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

copy 
    
   

"jsList":[

"src/resource.js",
"src/app.js",
"src/loading.js"
]

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

copy 
    
   

varloadindLayer=cc.LayerColor.extend({//继承LayerColor，初始化的时候可以直接改背景颜色

a:0,//记录当前加载了多少个文件
ctor: this._super(cc.color(100,255));
varsize=cc.winSize;
//添加一个文本框显示
varl=newcc.LabelTTF("currentpercent:0%","Arial",38);
//居中
l.x=size.width*0.5;
l.y=size.height*0.5;
this.addChild(l,11,12);
//加载文件的几种方式，特别是在cc.loader里面，还有好多种加载的函数，记得把加载的资源路径和文件名改掉
ccs.armatureDataManager.addArmatureFileInfoAsync("res/armatures/logo.png","res/armatures/logo.plist","res/armatures/logo.xml",153); font-weight:bold; background-color:inherit">this.loadCall,153); font-weight:bold; background-color:inherit">this);
cc.textureCache.addImage("res/armatures/robot.png",153); font-weight:bold; background-color:inherit">this);
cc.loader.load("res/armatures/bg.jpg",248)"> },
loadCall://每次调用进行计数
this.a++;
//以tag的形式获取文本框对象
varsubTile=this.getChildByTag(12);
//toFixed(2)意思是取小数点后两位，小数点后第三位为四舍五入
subTile.setString("currentpercent:"+(this.a/3).toFixed(2)*100+"%");
//加载完毕，貌似好多教程都是用百分比判断(>=1)
if(this.a==3){
//带翻页动画的场景跳转，第一个参数为动画的执行时间，第二个为跳到的场景，第三个为false时从右下角往左边翻页，true时左边往右边翻页
vartrans=newcc.TransitionPageTurn(0.5,153); font-weight:bold; background-color:inherit">newHelloScene(),153); font-weight:bold; background-color:inherit">false);
cc.director.runScene(trans);
}
});
varHelloScene=cc.Scene.extend({
onEnter:function(){
this._super();
//加载app.js的layer
varlayer=newHelloWorldLayer();
this.addChild(layer);
});