cocos2d中對於圖片動畫加載緩存的使用——lua

注：所使用的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

作者：綠城河
鏈接：https://www.jianshu.com/p/d3204315b1f6
來源：簡書
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。