cocos2d中对于图片动画加载缓存的使用 - 简书
cocos2d中对于图片动画加载缓存的使用
注：所使用的cocos2d-x为3.10版本，lua脚本编写。
1.SpriteBatchNode与SpriteFrameCache的使用
为了提高cocos2d的执行效率，尽量做到尽可能的少进行渲染和对加载好的纹理进行替换。因此才会有了SpriteBatchNode和SpriteFrameCache这两个方法。这两种方法的目的在于就是使用合图中的资源，并使用资源时通过plist文件将其取出来，并且SpriteBatchNode做到是只进行一次渲染，请其他的渲染层全部都加到该节点上，当然缺点也是因为它把渲染层全部都加到该节点上了，不能分层添加。
-- SpriteBatchNoded的使用的例子
-- @function createBatchNodedExample()
function MainScene:createBatchNodedExample()
local buttle2 = cc.SpriteBatchNode:create("bullet.png", 100)
:setPosition(display.cx, display.cy)
:addTo(self)
for i = 1, 99 do
local spriteItem = cc.Sprite:createWithTexture(buttle2:getTexture())
spriteItem:setPosition(cc.p(math.random()*320,math.random()*160))
buttle2:addChild(spriteItem, i, i)
-- 将四个坦克从缓存帧中取出来的例子
-- @function createFourTank
function MainScene:createFourTank()
-- 添加精灵帧缓存
local spriteFrameCacheItem = cc.SpriteFrameCache:getInstance():addSpriteFrames("tankPlist.plist")
-- 将精灵帧从精灵缓存帧中取出来，并通过精灵帧创建不同的精灵
local spriteUp = cc.Sprite:createWithSpriteFrame(spriteFrameCacheItem:getSpriteFrameByName("tank_p_u.png"))
local spriteRight = cc.Sprite:createWithSpriteFrame(spriteFrameCacheItem:getSpriteFrameByName("tank_p_r.png"))
local spriteDown = cc.Sprite:createWithSpriteFrame(spriteFrameCacheItem:getSpriteFrameByName("tank_p_d.png"))
local spriteLeft = cc.Sprite:createWithSpriteFrame(spriteFrameCacheItem:getSpriteFrameByName("tank_p_l.png"))
-- 将不同的精灵加到主场景中
spriteUp:setPosition(cc.p(math.random()*320,math.random()*160))
spriteUp:addTo(self)
spriteRight:setPosition(cc.p(math.random()*320,math.random()*160))
spriteRight:addTo(self)
spriteDown:setPosition(cc.p(math.random()*320,math.random()*160))
spriteDown:addTo(self)
spriteLeft:setPosition(cc.p(math.random()*320,math.random()*160))
spriteLeft:addTo(self)
这里所讲的是帧动画，所谓帧动画就是将图片一张一张的添加到Animation中，再添加到Animate，再通过Node执行runAction。（这只是大概齐的具体的都不一样。。。）
-- 小女孩走动的方法
-- @function createRunGirl
function MainScene:createRunGirl()
-- 创造出女孩走的动画
local animationGirlPng = cc.Animation:create()
-- 创建精灵帧缓存
local spriteFrameCacheItemGirl = cc.SpriteFrameCache:getInstance():addSpriteFrames("girlPlist.plist")
-- 将精灵帧取出来并添加到动画中对象中
for i = 1, 8 do
local girlName2 = "girl"..i..".png"
-- 女孩的精灵帧
local spriteFrameGirl = spriteFrameCacheItemGirl:getSpriteFrameByName(girlName2)
animationGirlPng:addSpriteFrame(spriteFrameGirl)
-- 设置每片动画的延迟时间
animationGirlPng:setDelayPerUnit(0.2)
-- 添加精灵并做好初始化
local spriteGirl = cc.Sprite:create("girl1.png")
spriteGirl:setPosition(cc.p(display.cx, display.cy))
spriteGirl:addTo(self)
-- 把动作添加到精灵中然后再就调用node节点的runAction的方法
local animateGirl = cc.Animate:create(animationGirlPng)
local repeatAnimateGirl = cc.RepeatForever:create(animateGirl)
spriteGirl:runAction(repeatAnimateGirl)
分享几篇博客：
3.对于jpg与png的理解
同一张图片jpg格式与png格式，jpg的大小比png的小3倍，但是在cocos2d-x中还是一如既往地使用png。那么我们选择JPG还是PNG呢?很多人认为JPG文件比较小，PNG文件比较大，加载到内存纹理，JPG占有更少的内存。这种观点是错误的！纹理与图片是不同的两个概念，如果纹理是野营帐篷话，那么图片格式是收纳折叠后的帐篷袋子，装有帐篷的袋子大小，不能代表帐篷搭起来后的大小。特别是在Cocos2d-x平台JPG加载后被转化为PNG格式，然后再转换为纹理，保存在内存中，这样无形中增加了对JPG文件解码的时间，因此无论JPG在其它平台表现的多么不俗，但是在移动平台下一定它无法与PNG相提并论。
4.pvr格式与TexturePacker编辑器
对于图片的升级使用的pvr格式与好用的编辑器，具体内容详见和
-- 使用RGBA8888来加载图像
-- @function createSpriteRGBA8888
function MainScene:createSpriteRGBA8888()
--local spriteNode =
cc.Sprite:create("spriteHd.pvr.ccz")
--spriteNode:setPosition(cc.p(display.cx,display.cy))
--spriteNode:addTo(self)
-- 转换格式，rgb565格式没有透明度
cc.Texture2D:setDefaultAlphaPixelFormat(cc.TEXTURE2_D_PIXEL_FORMAT_RG_B565)
-- 添加精灵帧缓存
local spriteFrameCacheItem = cc.SpriteFrameCache:getInstance():addSpriteFrames("spriteHd.plist")
-- 将精灵帧从精灵缓存帧中取出来，并通过精灵帧创建不同的精灵
local spriteUp = cc.Sprite:createWithSpriteFrame(spriteFrameCacheItem:getSpriteFrameByName("tank_p_u.png"))
local spriteRight = cc.Sprite:createWithSpriteFrame(spriteFrameCacheItem:getSpriteFrameByName("tank_p_r.png"))
local spriteDown = cc.Sprite:createWithSpriteFrame(spriteFrameCacheItem:getSpriteFrameByName("tank_p_d.png"))
local spriteLeft = cc.Sprite:createWithSpriteFrame(spriteFrameCacheItem:getSpriteFrameByName("tank_p_l.png"))
-- 将不同的精灵加到主场景中
spriteUp:setPosition(cc.p(math.random()*320,math.random()*160))
spriteUp:addTo(self)
spriteRight:setPosition(cc.p(math.random()*320,math.random()*160))
spriteRight:addTo(self)
spriteDown:setPosition(cc.p(math.random()*320,math.random()*160))
spriteDown:addTo(self)
spriteLeft:setPosition(cc.p(math.random()*320,math.random()*160))
spriteLeft:addTo(self)
5.粒子效果
cocos2d中自带了一些粒子效果，与此同时你也可以通过在线制作工具制作自己的粒子效果。
FireShot Pro Screen Capture #001 - 'EffectHub Cocos2dx粒子特效编辑器' - www_effecthub_com_particle2.png
-- 创建粒子效果
-- @function createFireLayer
function MainScene:createFireLayer()
local layer = cc.Layer:create()
local lighterSprite = cc.Sprite:create("fire.png")
lighterSprite:setScale(0.3)
lighterSprite:setPosition(cc.p(display.cx,display.cy))
layer:addChild(lighterSprite)
-- 添加粒子效果
local fireSys = cc.ParticleFire:create()
fireSys:setPosition(cc.p(display.cx - 10,display.cy+100))
layer:addChild(fireSys)
-- 将层添加到主场景中
layer:addTo(self)
-- 创建自定义粒子效果
-- @function createParticleByMyself
function MainScene:createParticleByMyself()
local particleItem = cc.ParticleSystemQuad:create("particle_texture.plist")
particleItem:addTo(self)
-- 创建粒子效果（batchNode）
-- @function createParticleByMyselfNode
function MainScene:createParticleByMyselfNode()
local particleItem = cc.ParticleSystemQuad:create("particle_texture.plist")
particleItem:retain()
local particleNode = cc.ParticleBatchNode:create("particle_texture.png", 500)
--particleNode:setPosition(cc.p(display.cx,display.cy))
particleNode:addTo(self)
particleNode:addChild(particleItem)
particleItem:release()2D游戏中常见的一帧一帧的图片都是美工一张一张手绘出来的么？ - 知乎76被浏览8443分享邀请回答61 条评论分享收藏感谢收起1314 条评论分享收藏感谢收起查看更多回答拒绝访问 |
| 百度云加速
请打开cookies.
此网站 () 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(3adbd4-ua98).
重新安装浏览器，或使用别的浏览器Cocos2d - JS（56）
cocos2d-JS 逐帧动画
(Animation
var animationLayer = null;
var AnimationLayer = cc.Layer.extend({
ctor: function(){
this._super();
this.initDate();
initDate: function(){
animationLayer = this;
playBoomEffect: function(pos){
var beginNum = 1;
var EndNum = 8;
var anim = new cc.Animation();
anim.setDelayPerUnit(0.1);
for (var i = beginN i &= EndN i++)
anim.addSpriteFrameWithFile("res/boom"+i+".png")
var sp = new cc.Sprite();
sp.setPosition(pos);
this.addChild(sp);
sp.runAction(cc.sequence(cc.animate(anim), cc.fadeOut(0.2)));
播放完动画回到第一帧API :
anim.setRestoreOriginalFrame(true);
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：66492次
积分：2344
积分：2344
排名：第16857名
原创：158篇
转载：23篇
阅读：12466
(30)(25)(18)(17)(8)(18)(7)(1)(1)(3)(19)(13)(19)(1)(1)
(window.slotbydup = window.slotbydup || []).push({
id: '4740881',
container: s,
size: '200,200',
display: 'inlay-fix'Cocos2d-x 中获取动画当前帧数
DionysosLai
&&&&&&&& 在游戏中有很多动画，这些动画设计的好坏，对游戏的体验性影响很大。比方说敲打类动作，如果敲打动作比较多，我们在动作结束后，在处理敲击结果，游戏就给用户感觉很迟钝，有延迟现象。因此，这类动作，我们不能在动作结束后，再处理，而是应该在动作过程中进行处理。这里就考虑到了获取动画当前帧数问题。
&&&&&&&& 如果获取动画当前帧数？上网百度了一些，方法不多，就两类。不过在我测验过都不能用。这里有2个原因，一个就是版本问题了，另一个原因待会儿再说。
&&&&&&&& 获取动画的原理就是：我们在创建动画时，是根据纹理（CCTexture2D）来生成动画帧（SpriteFram）的，因此，我们可以比较当前的纹理ID来判断动画帧数（也正是，这个原理导致获取动画当前帧数方法适用性比较小。）
代码如下：
///@brief 返回当前的动画帧
///@param[in] animate---当前动画
这个函数的方法是通过获取当前纹理ID来实现，因此，使用范围是当前纹理ID都不一样，因此如果从一张大图中根据位置抽取动画数据，不可用。
///@return currentAnimIndex---当前动画帧 -1---获取失败
///@retval
///@author DionysosLai，
///@version 1.0()
int RoleSprite::getCurrentFrameWithPngs( const CCAnimate* animate)
int currentAnimIndex = 0;
unsigned int frameSum = animate-&getAnimation()-&getFrames()-&capacity(); /// 获取动作的总帧数
for(unsigned int i = 0; i & frameS i++)
GLint iID = this-&getTexture()-&getName();
///& 获取精灵当前纹理ID
/// 依次获取动画帧，根据动画帧获取其纹理ID
CCAnimationFrame* animFrame =(CCAnimationFrame*)animate-&getAnimation()-&getFrames()-&objectAtIndex(i);
///& 注意这里是 CCAnimationFrame而不是CCSpriteFrame
GLint iID1 = animFrame-&getSpriteFrame()-&getTexture()-&getName();
if (iID1 == iID)
currentAnimIndex =
return currentAnimI
return -1;
&&&&&& 有一点要注意的是，这里我们的CCAnimate的创建方式是根据多张pngs图来创建的，因此我们的纹理ID都不一样。如果根据plist文件或者一张png大图获取，则其中的纹理ID都一样。
&&&&&& 而根据plist文件或者png大图创建的CCAnimate，如果获取当前动画帧数，目前还不会，会的人，告诉我下。
&&&&&& Ps：附上根据多张png图创建动画函数：
///@brief 从多张图片png图片中，创建动画
///@param[in] unitFrameTime--每一帧时间长度，pngName---png图片名， frames---帧多少
///@pre 注意这里的pngName，比较特殊，例如原名为“hatch_open_0.png”，这里必须传进来为hatch_open_0
///@return
///@retval 这中方法比较适合动画有位移
///@author DionysosLai，
///@version 1.0()
CCAnimate* RoleSprite::createActoinWithPngs( float unitFrameTime, const char* pngName, int frames )
/* CCTexture2D *playerRunTexture = CCTextureCache::sharedTextureCache()-&addImage(pngName);*/
CCAnimation* animation = CCAnimation::create();
char ch[64] = {0};
for( int i = 0;i & i++)
sprintf(ch, &%d.png&, i);
char str[64] = {0};
strcat(str, pngName);
strcat(str, ch);
CCTexture2D *playerRunTexture = CCTextureCache::sharedTextureCache()-&addImage(str);
animation-&addSpriteFrame(CCSpriteFrame::createWithTexture(playerRunTexture,
CCRectMake(0, 0, playerRunTexture-&getContentSize().width, playerRunTexture-&getContentSize().height)));
animation-&setDelayPerUnit(unitFrameTime);
CCAnimate* action = CCAnimate::create(animation);
/* return CCRepeatForever::create(action);
&&&&&&&& 根据plsit文件或者一张png大图创建动画方法，就等下次将模板公布，在给出来。
本文已收录于以下专栏：
相关文章推荐
var load = ccs.load(res.Ani_json);
var mainNode = load.
this.addChild(mainNode);
// 对应帧...
猴子原创，欢迎转载。转载请注明： 转载自Cocos2D开发网--，谢谢！原文地址: /?p=391有些人跟我QQ留言说 《co...
一。问题描述
今天在写游戏的时候，为了统一动画和攻击的时间，我取消了原先依靠时间来同步的想法（太烂了，总是不协调）。所以就上网搜了下，看看cocos2d-x中有没有提供这样的方法（汗。。。初学当中i...
Cocos2d-x 3.2 Lua示例CurrentLanguageTest（当前语言环境）转载请注明：IT_xiao小巫    本篇博客介绍Cocos2d-x 3.2给我们提供的一个例子，获取当前程...
这次将实现子弹的配置文件，敌人的配置文件，子弹的精灵和敌人的精灵。以及子弹的发射和敌人的产生。
子弹的分析：
游戏中不可能只有一种子弹，这样子弹就需要一个配置文件，配置文件中有子弹的类型，子弹的贴...
他的最新文章
讲师：王哲涵
讲师：韦玮
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)