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)
   end
end

-- 将四个坦克从缓存帧中取出来的例子
-- @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)

end

2.帧动画

这里所讲的是帧动画,所谓帧动画就是将图片一张一张的添加到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)
  end

  -- 设置每片动画的延迟时间
  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)
end

分享几篇博客:
链接1 链接2 链接3

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)

end

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)

end


-- 创建自定义粒子效果
-- @function createParticleByMyself
function MainScene:createParticleByMyself()
  local particleItem = cc.ParticleSystemQuad:create("particle_texture.plist")
  particleItem:addTo(self)
end


-- 创建粒子效果(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()
end
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,542评论 6 504
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,822评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,912评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,449评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,500评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,370评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,193评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,074评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,505评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,722评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,841评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,569评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,168评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,783评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,918评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,962评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,781评论 2 354

推荐阅读更多精彩内容

  • Cocos2D手机游戏开发之优化篇 在这个手机游戏盛行已久的年代,一款产品想要博得更多用户的喜爱就要在细节上做得更...
    babybus_newapp阅读 3,014评论 0 12
  • 前言 我选择开发一个游戏有很多原因。我觉得自己是“核心”玩家,过去的大部分时间我都花在玩游戏,自己制作、阅读和游戏...
    月影檀香阅读 11,876评论 1 27
  • 寒假成长计划走到今天,截止上篇共完成35716字,共二十八天的连续记录,收到了孩子们六十二幅时间记录的打卡图片,四...
    甜菜的眼泪阅读 648评论 0 1
  • 那天晚上上完晚自习后,因为是初一也没什么事,便早早睡了。突然手机一响,将本来已经朦胧睡意的我拉回现实。 是一条短信...
    栗子团阅读 124评论 1 4
  • 感觉从书中获得的信息有限,重点理解的不全。 让产品操作更容易的七个原则 1. 应用存储外部世界和头脑中的知识 有些...
    高昆阅读 812评论 1 1