TexturePacker是纹理资源打包工具,支持Cocos2dx的游戏资源打包。

如果用过的同学可以直接看下面的资源的异步加载处理

首先为什么用TexturePacker?

1,节省图片资源实际大小

2,减少我们游戏中大量资源带来的内存负荷

3,方便游戏对纹理资源的内存管理

游戏开发到后期,我们或许都会遇到的瓶颈就是需要对游戏包进行“瘦身”和内存优化。那么使用TexturePacker

就能达到我们的目的;

我们以一组技能特效图片来举例,进行TexturePacker的图片打包,然后在程序中使用:

我们对这些文件进行打包成一张大图.png和cocos2dx-JS中会使用到的.plist文件

打包注意一下几点:

1,文件格式,选择cocos2d

2,设置导出文件的plist和png路径

3,图片格式,一般使用RGBA8888,但根据平台需求现在也可以导出Pvr格式图片类型;

使用:1)Textuer Format 选择Pvr图片类型  2)Image Format 选择 PVRCT4 这种类型的;

可大大节省图片的大小!

4,每张大图的png尺寸一定不能大于2048*2048!因为目前比较低端的android手机是不支持加载这么大的图片的!

所以我们的游戏要被大部分机型适配,那就最好不要用太大的图片包

OK。我们打包完成后将文件拷贝到我们的Gofinght目录中,继续我们上一节知识点开始写我们这节知识点的代码:

我们需要实现图片资源的加载!这个是我们的目的。

那么我们就需要书写一个GameFrameCache.js的类,来单独处理我们的图片资源加载;

GameFrameCache.js:

/**
* Created by yangshengjiepro on 15/5/11.
*/
/**
* 游戏资源加载处理
*/ var GameFrameCache = function () {
this.flag = 0;
} var LOADINGBARPROALLNUM=0;
//异步加载
GameFrameCache.setAllCache = function (obj,objcallback) { //异步加载所有游戏资源
var texCache = cc.textureCache;
//遍历所有的资源
var reslist = res;
var allnum = 0;
for (var key = 0 in reslist) {
Mlog.c("reslist key"+key+"value:"+reslist[key]);
allnum++;
} LOADINGBARPROALLNUM = allnum;
Mlog.c("LOADINGBARPROALLNUM>>",LOADINGBARPROALLNUM); var readnum = 0;
for (var key = 0 in reslist) {
//开始装载
texCache.addImageAsync(reslist[key], objcallback, obj);
}
}; //资源加载
GameFrameCache.setCache = function (plist) {
if (jsb.fileUtils.isFileExist(plist) == true) {
cc.SpriteFrameCache.getInstance().addSpriteFrames(plist);
}
else
{
Mlog.c("No Add File>>",plist);
}
}; //获取Frame
GameFrameCache.getCache = function (name) {
var frame;
frame = cc.SpriteFrameCache.getInstance().getSpriteFrame(name);
return frame;
}; //移除Plist
GameFrameCache.removeCache = function(plist){
if (jsb.fileUtils.isFileExist(plist) == true) {
cc.SpriteFrameCache.getInstance().removeSpriteFramesFromFile(plist);
}
}

代码中有三个方法:

GameFrameCache.setCache
GameFrameCache.getCache
GameFrameCache.removeCache

顾名思义就是,添加,获取,和删除

添加一张大图资源方法:

 cc.SpriteFrameCache.getInstance().addSpriteFrames(plist);

我们知道SpriteFrameCache可以帮我们预加载plist图片,并且能大大提高我们游戏对图片的渲染效率

所以我们尽可能的使用这样的方式去做图片的渲染,而且我们能更方便的,在合适的地方去添加,获取,删除;

从而达到我们内存资源最佳管理的方式!就不会导致我们因为加载过多图片导致程序效率缓慢甚至卡死的情况!

那么下面我们来使用SpriteFrameCache这个类,我们需要在我们上一节课中的基类中添加一个方法

setGameFrameCache:function(plistfile){
GameFrameCache.setCache(plistfile);
},

很简单,就是调用我们GameFrameCache的set方法!

在我们MainLayer中添加调用方法,直接:

this.setGameFrameCache("plist文件路径");

就能调用到我们基类的加载大图方法!

然后我们来尝试调用一下我们的大图纹理使用,我们新建一个PFuns.js动作类来播放我们的技能特效!

PFun.js

/**
* Created by yangshengjiepro on 15/5/11.
*/ var PFuns = function () {
this.flag = 0;
} //执行某个特效
PFuns.runEFFAttack_SP = function (sp , Url , name , num, speed , loop , delay , zorder , scale , tag , cp) {
var sprite = sp;
var sp_eff = new cc.Sprite(); var animation = new cc.Animation();
for (var i = 1; i <= num; i++) {
var toi="";
if(i<10)
{
toi = "0"+i;
}
else
{
toi = i;
}
var frameName = Url + "/" + name + toi + ".png";
Mlog.c("frameName>>"+frameName);
var frame =GameFrameCache.getCache(frameName);
if(frame!=null) {
Mlog.c("frameName>ok>>"+frameName);
animation.addSpriteFrame(frame);
}
}
var usetime =1 / parseInt(speed);
animation.setDelayPerUnit(usetime);
animation.setRestoreOriginalFrame(true);
animation.setLoops(loop);
var action = cc.animate(animation);
var actdelay2 = cc.DelayTime.create(delay); if(delay>0)
{
sp_eff.runAction(cc.Sequence(actdelay2,action,cc.callFunc(PFuns.effremove, sp_eff)));
}
else
{
sp_eff.runAction(cc.Sequence(action,cc.callFunc(PFuns.effremove, sp_eff)));
} if(cp!=null)
{
sp_eff.setPosition(cc.p(cp.x,cp.y));
}
else
{
sp_eff.setPosition(cc.p(sprite.getContentSize().width/2,sprite.getContentSize().height/2));
} sp_eff.setScale(scale);
sprite.addChild(sp_eff,zorder,tag); }; //移除
PFuns.effremove = function () {
this.removeFromParent();
};

我们使用帧动画的方式来进行技能特效的播放,帧动画的每帧的Frame获取方式使用:

 var frame =GameFrameCache.getCache(frameName);

OK,我们可以Run起来看一下效果:

我们的技能帧动画已经非常漂亮的渲染出来了!看起来非常不错!那么这个小知识点就完了!

好,那么下面我们来讲解一下我们所有图片的异步加载!我们知道在Cocos2dx中提供了textureCache来

帮助我们实现图片资源文件的管理,和使用。

试想我们是需要使用图片时临时加载图片快,还是先通过一个Loading界面将资源加载完毕后,在从textureCache中

取出来快呢?

答案当然是后者!

那么我们现在来进行LoadIng异步加载的实现方式,GameFrameCache.js类中有

GameFrameCache.setAllCache

这样一个方法,通过遍历我们的res目录中所有的png文件来获取文件路径,并且加载所有的图片;

这里要注意一下:res这个数组中只能填写png,jpg等图片文件类型

可以这样来写我们的各种文件路径。

接下来我们就来实现一个进度条的实现来异步加载我们的所有程序资源,在MainLayer中添加两个方法:

    //加载进度条
initloadingbar:function(sp_loading){
//加载Loading条
var sp_loadingtiao = new cc.Sprite(res.UILOADINGBD_png);
sp_loadingtiao.attr({
x: sp_loading.getContentSize().width/2,
y: sp_loading.getContentSize().height/2-180,
scale: 1,
rotation: 0
});
sp_loading.addChild(sp_loadingtiao,1);
var loadingBar = new ccui.LoadingBar(res.UILOADINGBAR_png);
loadingBar.x = sp_loading.getContentSize().width/2;
loadingBar.y = sp_loading.getContentSize().height/2-180;
sp_loading.addChild(loadingBar,2,LOADINGBAR_TAG);
loadingBar.setPercent(0);
},
//资源loadding buffer进度回调
setloadingbar:function(){ var pernum = parseInt(LOADINGBARPRONUM/LOADINGBARPROALLNUM *100);
Mlog.c("pernum >>" +pernum);
LOADINGBARPRONUM++;
var loadingBar = this.getChildByTag(LOADINGBAR_TAG);
if(loadingBar!=null)
{
loadingBar.setPercent(pernum);
}
//进度条加载完毕进行跳转
if(pernum==100)
{
//加载完毕
Mlog.c("异步加载资源完毕");
PFuns.runEFFAttack_SP(this , "skill_dianjin" , "000" , 13, 6 , 3 ,1 , 11111 , 1 ,1000 , null);
}
},

setloadingbar这个方法是我们的回调;在GameFrameCache会使用addImageAsync方法来进行资源加载成功的回调!

并且获取两个值:

var LOADINGBARPRONUM = 1;
var LOADINGBARPROALLNUM=0;

和LOADINGBARPROALLNUM来进行进度条的计算和更新;

最后进度条的比例为100时,那么播放我们的技能动画:

texCache.addImageAsync(reslist[key], objcallback, obj);

在构造函数尾部,直接加上调用方法:

        //加载进度条调用
this.initloadingbar(this);
//异步加载所有资源调用
GameFrameCache.setAllCache(this,this.setloadingbar);

这样就实现了我们整个项目的图片资源的异步加载

我们可以跑起来看看效果!

好了,本章知识点在我们游戏开发中是非常的常用,也是非常重要的!所以我觉得会对大家一定有帮助!

本节知识点源码:

源码下载(百度盘)

自己创建新工程,解压下载的文件,将所有文件拷贝到你新工程的目录下全部覆盖既可以运行!

 
 
 
 
 

【Cocos2d-Js基础教学(5)资源打包工具的使用及资源的异步加载处理】的更多相关文章

  1. 转:web前端面试题合集 (Javascript相关)(js异步加载详解)

    1. HTTP协议的状态消息都有哪些? 1**:请求收到,继续处理2**:操作成功收到,分析.接受3**:完成此请求必须进一步处理4**:请求包含一个错误语法或不能完成5**:服务器执行一个完全有效请 ...

  2. Vue.js中用webpack合并打包多个组件并实现按需加载

    对于现在前端插件的频繁更新,所以多多少少要对组件化有点了解,下面这篇文章主要给大家介绍了在Vue.js中用webpack合并打包多个组件并实现按需加载的相关资料,需要的朋友可以参考下.   前言 随着 ...

  3. JS异步加载的三种方案

    js加载的缺点:加载工具方法没必要阻塞文档,个别js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载. 一.def ...

  4. 异步加载js文件的方法

    # 异步加载js文件 - js的加载默认是同步的,因为js是单线程执行,只能完成一件再执行下一件. - 一些外部引入的js文件可以因为文件太大,在加载资源的过程中会影响dom元素的加载,影响了用户体验 ...

  5. 异步加载css 和 谷歌浏览器各实用小工具介绍

    异步加载css资源 加开页面首屏显示速度使我们前端一直在追求的目标,而css资源在这些优化中同样也是不可或缺的. 一个网站可能有一部分css资源是必须的,他需要在页面渲染完之前就被加载完,并和html ...

  6. 深入理解JS异步编程五(脚本异步加载)

    异步脚本加载 阻塞性脚本 JavaScript在浏览器中被解析和执行时具有阻塞的特性,也就是说,当JavaScript代码执行时,页面的解析.渲染以及其他资源的下载都要停下来等待脚本执行完毕 浏览器是 ...

  7. JS异步加载的三种方式

    js加载的缺点:加载工具方法没必要阻塞文档,过得js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载,. 默认正常 ...

  8. 如何使用 require.js ,实现js文件的异步加载,避免网页失去响应,管理模块之间的依赖性,便于代码的编写和维护。

    一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代 ...

  9. Unity+NGUI打造网络图片异步加载和本地缓存工具(一)

    我们已经开发了在移动终端中,异步网络图片被装入多,在unity其中尽管AssetBundle存在,通常第一个好游戏的资源,然后加载到现场,但也有很多地方可以使用异步网络加载图像以及其缓存机制. 我也写 ...

随机推荐

  1. [转]C++常见内存错误汇总

    在系统开发过程中出现的bug相对而言是比较好解决的,花费在这个上面的调试代价不是很大,但是在系统集成后的bug往往是难以定位的bug(最好方式是打桩,通过打桩可以初步锁定出错的位置,如:进入函数前打印 ...

  2. 【转】Installing the libv8 Ruby gem on Centos 5.8

    转自:http://appsintheopen.com/posts/18-installing-the-libv8-ruby-gem-on-centos-5-8 First, Centos 5.8 s ...

  3. SQL从入门到基础&ndash;08 Union、Union all及案例

    一.联合结果集 1. 简单的结果集联合: Select FNumber,FName,FAge from T_Employee union select FidCardNumber,FName,FAge ...

  4. 关于BitmapFactory.decodeStream(is)方法无法正常解码为Bitmap对象的解决方法

    在android sdk 1.6版本API帮助文档中,其中关于BitmapFactory.decodeFactory.decodeStream(InputStream is)的帮助文档是这么说明的: ...

  5. 英语词性系列-B01-名词

    诗Poem 诫子书 [作者]诸葛亮 [朝代]三国时期 夫君子之行,静以修身,俭以养德.非淡泊无以明志,非宁静无以致远.夫学须静也,才须学也,非学无以广才,非志无以成学.淫慢则不能励精,险躁则不能治性. ...

  6. FastReport自动换行及行高自适应

  7. BZOJ2095:[POI2010]Bridges(最大流,欧拉图)

    Description YYD为了减肥,他来到了瘦海,这是一个巨大的海,海中有n个小岛,小岛之间有m座桥连接,两个小岛之间不会有两座桥,并且从一个小岛可以到另外任意一个小岛.现在YYD想骑单车从小岛1 ...

  8. 如何向Maven仓库(私服)中上传第三方jar包

    本文详细介绍如何向maven仓库中上传第三方jar包. 1.在本地maven安装路径中找到conf文件夹下面的setting.xml文件,里面有访问maven仓库的路径和账号.密码: 2.浏览器打开第 ...

  9. HALCON视觉算子相关函数中文说明System(2)

    16.6  Parameters get_system_ 功能:根据HALCON系统参数获取关于当前的信息. set_system 功能:HALCON系统参数的设置. 16.7  Serial cle ...

  10. ssh免密登录方法不生效?Authentication refused: bad ownership or modes for directory

    机器A通过ssh登录机器B,方法有两种: 1.密码方式 2.密钥方式: 两种方式同时开启的时候,优先使用密钥方式. 密钥登录方式的配置方法是,首先在登录机器B上创建文件authorized_keys( ...