环境:
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里面把这个方法
- cc.LoaderScene.preload(g_resources,function(){
- cc.director.runScene(newHelloWorldScene());
- },this);
改为(其实就是不用cc.LoaderScene.preload这个函数...):
- //},this);
2.在src下新建一个loading.js文件,然后在project.json里面注册
"jsList":[
- "src/resource.js",
- "src/app.js",
- "src/loading.js"
- ]
3.在loading.js里面添加以下代码
varloadindLayer=cc.LayerColor.extend({
- 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);
- });
注意加载文件函数里面加载的文件要改为自己工程当前目录下的文件路径和文件名称
4.app.js里面最后的场景加载的layer改为loading的layer
varHelloWorldScene=cc.Scene.extend({
- //自定义loading的layer
- newloadindLayer();
- });
最后看看效果:
5.web上的建议修改
不能用这个方法加载文件
ccs.armatureDataManager.addArmatureFileInfoAsync("res/armatures/logo.png",153); font-weight:bold; background-color:inherit">this);
然后loading跳转后的场景里面用上的资源请在loading的时候加载
Loading界面是一个cc.Scene具体请看:
http://blog.csdn.net/jonahzheng/article/details/38348255
如果仅仅是想把图片(cocos logo)换掉的话可以修改(frameworks/cocos2d-html5/Base64Images.js)中
变量的值,该值为base64编码的图片数据,在css3中用这个字符串可以直接作为背景,图片到base64编码的转换可以通过这个网站(http://tool.css-js.com/base64.html)进行,效果如下:
随便说一下这个文件中另外两个变量:
- cc._loadingImage,是一个gif图,就是等待的动态图
- cc._fpsImage,大概是使用WebGL显示fps用的数字贴图,图片里面都是重复的数字,如果不用WebGL纯粹用canvas的话,可以把这个字符清空,这样文件也小不少
(编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|