Cocos2d-lua Animation詳解:從單個png圖集到使用幀動畫

一、原材料



二、使用PNGSplit分割圖片

將圖片直接拖入軟件,在左側右鍵【導出所有子圖】即可

PNGSplit下載地址


二、使用TexturePacker

將導出後的圖片文件夾拖入軟件,進行設置。

1.導出文件名稱中必須含有{v}(包括下面的材質文件)

2.選擇zlib格式,RGBA8888.

3.最後點擊發布(Publish sprite sheet)即可


、移動資源

將導出的 *.plist 和 *.pvr.ccr文件移動到cocos工程res目錄下


四、添加代碼

1.最簡單的方法

-- 獲取SpriteFrameCache的實例
local spfc = cc.SpriteFrameCache:getInstance()
-- 將plist配置文件和材質導入
spfc:addSpriteFrames("so.plist", "so.pvr.ccz")
-- 新建一個動畫
local animation = cc.Animation:create()
-- 添加精靈幀
for i = 0, 3 do
    -- 根據在TexturePacker中的圖片的名稱獲取
    animation:addSpriteFrame(spfc:getSpriteFrame(i..".png"))
end
-- 設置每幀延時
animation:setDelayPerUnit(0.1)
-- 設置動畫播放完成後是否回到起始幀
animation:setRestoreOriginalFrame(true)
-- 設置動畫循環次數
animation:setLoops(10)
-- 根據當前動畫配置生成Action
local action = cc.Animate:create(animation)
--調用Sprite的runAction方法可以看到效果了

2.將動畫加入緩存

-- 獲取SpriteFrameCache的實例
local spfc = cc.SpriteFrameCache:getInstance()
-- 將plist配置文件和材質導入
spfc:addSpriteFrames("so.plist", "so.pvr.ccz")
-- 新建一個table
local frames = {}
-- 添加精靈幀
for i = 0, 3 do
    -- 根據在TexturePacker中的圖片的名稱獲取
    local frame = spfc:getSpriteFrame(i..".png")
    table.insert(frames, frame)
end
-- 通過table創建動畫並設置幀間隔
local animation = cc.Animation:createWithSpriteFrame(frames, 0.1)
-- 將動畫按照自定義的名字進行緩存
cc.AnimationCache:getInstance():addAnimation(animation, "up")
-- 本次可以直接調用animation進行runAction即可
xx.runAction(animation)
-- 下一次可以通過動畫緩存中獲取動畫
cc.AnimationCache:getInstance():getAnimation("up")

使用第二種方法可以方便動畫下次使用,對於需要重複使用的動畫來說更加合適,但假如緩存勢必影響性能,所以如果動畫使用次數非常少,那麼使用第一種方法更加合適。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章