Cocos2d-x Lua中實例：幀動畫使用

Cocos2d-x Lua中實例：幀動畫使用

 

下面我們通過一個實例介紹一下幀動畫的使用，這個實例如下圖所示，點擊Go按鈕開始播放動畫，這時候播放按鈕標題變為Stop，點擊Stop按鈕可以停止播放動畫。

幀動畫實例

下面我們再看看具體的程序代碼，首先看一下看GameScene.lua文件，它的代碼如下：

 

local isPlaying = false -- 播放標識                                                                                                      ①
local size =cc.Director:getInstance():getWinSize()

… …

-- create layer
function GameScene:createLayer()

   local layer = cc.Layer:create()

   local spriteFrame  = cc.SpriteFrameCache:getInstance()
   spriteFrame:addSpriteFramesWithFile("run.plist")

   local bg =cc.Sprite:createWithSpriteFrameName("background.png")
   bg:setPosition(cc.p(size.width/2, size.height/2))
   layer:addChild(bg)

   local sprite = cc.Sprite:createWithSpriteFrameName("h1.png")
   sprite:setPosition(cc.p(size.width/2, size.height/2))
   layer:addChild(sprite)

   --toggle菜單
   local goSprite = cc.Sprite:createWithSpriteFrameName("go.png")
   local stopSprite = cc.Sprite:createWithSpriteFrameName("stop.png")

   local goToggleMenuItem = cc.MenuItemSprite:create(goSprite, goSprite)
   local stopToggleMenuItem = cc.MenuItemSprite:create(stopSprite,stopSprite)
   local toggleMenuItem = cc.MenuItemToggle:create(goToggleMenuItem,
                                                                             stopToggleMenuItem)
   toggleMenuItem:setPosition(cc.Director:getInstance():convertToGL(cc.p(930,540)))

   local mn = cc.Menu:create(toggleMenuItem)
   mn:setPosition(cc.p(0, 0))
   layer:addChild(mn)

   local function OnAction(menuItemSender)

       if not isPlaying then

            --///////////////動畫開始//////////////////////
            local animation =cc.Animation:create()                                                                         ②
            for i=1,4 do
                local frameName =string.format("h%d.png",i)                                                       ③
                cclog("frameName =%s",frameName)
                local spriteFrame = spriteFrame:getSpriteFrameByName(frameName)               ④
               animation:addSpriteFrame(spriteFrame)                                                                 ⑤
            end

           animation:setDelayPerUnit(0.15)          --設置兩個幀播放時間                      ⑥
           animation:setRestoreOriginalFrame(true)    --動畫執行后還原初始狀態           ⑦

            local action =cc.Animate:create(animation)                                                         ⑧
            sprite:runAction(cc.RepeatForever:create(action))                                                       ⑨
            --//////////////////動畫結束///////////////////
            isPlaying = true
       else
            sprite:stopAllActions()                                                                                                      ⑩
            isPlaying = false
       end
   end
   toggleMenuItem:registerScriptTapHandler(OnAction)

   return layer
end

return GameScene

上述代碼第①行是聲明一個布爾變量isPlaying，用來保存播放狀態，true時候說明正在播放，false時候說明停止播放。

第②行代碼是創建一個Animation對象，它是動畫對象，然后我們要通過循環將各個幀圖片放到Animation對象中。第③行是獲得幀圖片的文件名，string.format("h%d.png",i)是對字符串進行格式化。第④行代碼是通過幀名創建精靈幀對象，第⑤行代碼把精靈幀對象添加到Animation對象中。

第⑥行代碼是animation:setDelayPerUnit(0.15)是設置兩個幀播放時間，我們這個動畫播放是4幀。第⑦行代碼animation:setRestoreOriginalFrame(true)是動畫執行完成是否還原到初始狀態。第⑧行代碼是通過一個Animation對象創建Animate對象，第⑨行代碼cc.Animate:create(animation)是執行動畫動作，無限循環方式。

第⑩行代碼sprite:stopAllActions()停止所有的動作。