Cocos2d-JS 自定义loading界面
2015-03-06 10:45
246 查看
环境:
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(new HelloWorldScene());
}, this);
改为(其实就是不用cc.LoaderScene.preload这个函数...):
[javascript] view
plaincopy
// cc.LoaderScene.preload(g_resources, function () {
cc.director.runScene(new HelloWorldScene());
// }, this);
2.在src下新建一个loading.js文件,然后在project.json里面注册
[javascript] view
plaincopy
"jsList":[
"src/resource.js",
"src/app.js",
"src/loading.js"
]
3.在loading.js里面添加以下代码
[javascript] view
plaincopy
var loadindLayer = cc.LayerColor.extend({//继承LayerColor,初始化的时候可以直接改背景颜色
a:0,//记录当前加载了多少个文件
ctor : function() {
this._super(cc.color(100, 0, 0, 255));
var size = cc.winSize;
//添加一个文本框显示
var l = new cc.LabelTTF("current percent : 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",this.loadCall,this);
cc.textureCache.addImage("res/armatures/robot.png",this.loadCall,this);
cc.loader.load("res/armatures/bg.jpg", this.loadCall,this);
},
loadCall : function() {
//每次调用进行计数
this.a ++;
//以tag的形式获取文本框对象
var subTile = this.getChildByTag(12);
//toFixed(2)意思是取小数点后两位,小数点后第三位为四舍五入
subTile.setString("current percent :" + (this.a / 3).toFixed(2) *100 + "%");
//加载完毕,貌似好多教程都是用百分比判断( >= 1 )
if (this.a == 3) {
//带翻页动画的场景跳转,第一个参数为动画的执行时间,第二个为跳到的场景,第三个为false时从右下角往左边翻页,true时左边往右边翻页
var trans = new cc.TransitionPageTurn(0.5, new HelloScene(), false);
cc.director.runScene(trans);
}
},
});
var HelloScene = cc.Scene.extend({
onEnter:function () {
this._super();
//加载app.js的layer
var layer = new HelloWorldLayer();
this.addChild(layer);
}
});
注意加载文件函数里面加载的文件要改为自己工程当前目录下的文件路径和文件名称
4.app.js里面最后的场景加载的layer改为loading的layer
[javascript] view
plaincopy
var HelloWorldScene = cc.Scene.extend({
onEnter:function () {
this._super();
//自定义loading的layer
var layer = new loadindLayer();
this.addChild(layer);
}
});
最后看看效果:
![](http://img.blog.csdn.net/20141123205927769?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZXRfc2FuZHk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](http://img.blog.csdn.net/20141123210016859?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZXRfc2FuZHk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
5.web上的建议修改
不能用这个方法加载文件
[javascript] view
plaincopy
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)中
?
变量的值,该值为base64编码的图片数据,在css3中用这个字符串可以直接作为背景,图片到base64编码的转换可以通过这个网站(http://tool.css-js.com/base64.html)进行,效果如下:
![](http://images.cnitblog.com/blog/605407/201410/121308112963235.png)
随便说一下这个文件中另外两个变量:
cc._loadingImage,是一个gif图,就是等待的动态图
cc._fpsImage,大概是使用WebGL显示fps用的数字贴图,图片里面都是重复的数字,如果不用WebGL纯粹用canvas的话,可以把这个字符清空,这样文件也小不少
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(new HelloWorldScene());
}, this);
改为(其实就是不用cc.LoaderScene.preload这个函数...):
[javascript] view
plaincopy
// cc.LoaderScene.preload(g_resources, function () {
cc.director.runScene(new HelloWorldScene());
// }, this);
2.在src下新建一个loading.js文件,然后在project.json里面注册
[javascript] view
plaincopy
"jsList":[
"src/resource.js",
"src/app.js",
"src/loading.js"
]
3.在loading.js里面添加以下代码
[javascript] view
plaincopy
var loadindLayer = cc.LayerColor.extend({//继承LayerColor,初始化的时候可以直接改背景颜色
a:0,//记录当前加载了多少个文件
ctor : function() {
this._super(cc.color(100, 0, 0, 255));
var size = cc.winSize;
//添加一个文本框显示
var l = new cc.LabelTTF("current percent : 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",this.loadCall,this);
cc.textureCache.addImage("res/armatures/robot.png",this.loadCall,this);
cc.loader.load("res/armatures/bg.jpg", this.loadCall,this);
},
loadCall : function() {
//每次调用进行计数
this.a ++;
//以tag的形式获取文本框对象
var subTile = this.getChildByTag(12);
//toFixed(2)意思是取小数点后两位,小数点后第三位为四舍五入
subTile.setString("current percent :" + (this.a / 3).toFixed(2) *100 + "%");
//加载完毕,貌似好多教程都是用百分比判断( >= 1 )
if (this.a == 3) {
//带翻页动画的场景跳转,第一个参数为动画的执行时间,第二个为跳到的场景,第三个为false时从右下角往左边翻页,true时左边往右边翻页
var trans = new cc.TransitionPageTurn(0.5, new HelloScene(), false);
cc.director.runScene(trans);
}
},
});
var HelloScene = cc.Scene.extend({
onEnter:function () {
this._super();
//加载app.js的layer
var layer = new HelloWorldLayer();
this.addChild(layer);
}
});
注意加载文件函数里面加载的文件要改为自己工程当前目录下的文件路径和文件名称
4.app.js里面最后的场景加载的layer改为loading的layer
[javascript] view
plaincopy
var HelloWorldScene = cc.Scene.extend({
onEnter:function () {
this._super();
//自定义loading的layer
var layer = new loadindLayer();
this.addChild(layer);
}
});
最后看看效果:
5.web上的建议修改
不能用这个方法加载文件
[javascript] view
plaincopy
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)中
?
![](http://images.cnitblog.com/blog/605407/201410/121308112963235.png)
随便说一下这个文件中另外两个变量:
cc._loadingImage,是一个gif图,就是等待的动态图
cc._fpsImage,大概是使用WebGL显示fps用的数字贴图,图片里面都是重复的数字,如果不用WebGL纯粹用canvas的话,可以把这个字符清空,这样文件也小不少
相关文章推荐
- Cocos2d-JS 自定义loading界面
- Cocos2d-js 开发记录:Loading载入界面自定义
- Cocos2d-js 开发记录:Loading载入界面自定义
- Cocos2d-js 开发记录:Loading载入界面自定义
- 如何自定义 Cocos2d-HTML5 Loading 界面
- cocos2d-x Loading界面实现资源加载
- cocos2d-x游戏开发(十五)游戏加载动画loading界面
- Cocos2d-x--实现Loading界面加载资源
- 跟着BOY学习开发cocos2d-x 游戏 实战篇(1)之 loading 界面编写
- 稳扎稳打Silverlight(30) - 2.0Tip/Trick之Silverlight.js, Silverlight.supportedUserAgent.js, 自定义启动界面, 响应鼠标滚
- Cocos2d-x--实现Loading界面加载资源
- Flex自定义Loading界面
- cocos2d-x游戏开发(十五)游戏加载动画loading界面
- cocos2d-x 3.0 Loading界面实现
- Cocos2d-X游戏【泰然网《跑酷》】JS到C++移植3:游戏主菜单界面的实现
- [unity3d]自定义loading界面和浏览器的全屏显示
- cocos2d-x 关于home键黑屏和游戏loading界面
- 自定义Flex的Loading界面
- 跟着BOY学习开发cocos2d-x 游戏 实战篇(1)之 loading 界面编写