Cocos2d-JS 自定义loading界面

Cocos2d-JS 自定义loading界面,第1张

概述环境: 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版的话大家自己改改,本文后面也会介绍。 正文

环境:

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 cc.LoaderScene.preload(g_resources,function(){ cc.director.runScene(newHelloWorldScene()); },this); @H_404_61@ 改为(其实就是不用cc.LoaderScene.preload这个函数...): copy //cc.LoaderScene.preload(g_resources,function(){ //},this); @H_404_61@

2.在src下新建一个loading.Js文件,然后在project.Json里面注册

copy "JsList":[ "src/resource.Js", "src/app.Js", "src/loading.Js" ] @H_404_61@
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); @H_967_419@ }); @H_404_61@

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


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

copy varHelloWorldScene=cc.Scene.extend({ //自定义loading的layer newloadindLayer(); }); @H_404_61@
最后看看效果:






5.web上的建议修改

不能用这个方法加载文件

copy ccs.armatureDataManager.addArmaturefileInfoAsync("res/armatures/logo.png",153); Font-weight:bold; background-color:inherit">this); @H_404_61@

然后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的话,可以把这个字符清空,这样文件也小不少 总结

以上是内存溢出为你收集整理的Cocos2d-JS 自定义loading界面全部内容,希望文章能够帮你解决Cocos2d-JS 自定义loading界面所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1045386.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-24
下一篇 2022-05-24

发表评论

登录后才能评论

评论列表(0条)

保存