Cocos2d-x 之帧动画 Animate

阳光穿透心脏的1/2处 2022-06-12 03:20 236阅读 0赞

### 写在前面 ###

前面分别介绍了精灵Sprite、精灵帧SpriteFrame和2D贴图Texture2D的用法，这篇文章介绍一下帧动画的用法。

### Animate ###

cocos2d-x中的帧动画是一个动作Animate，它封装一个动画（名词）Animation，然后让精灵执行动作runAction。所以执行动画的精灵和动画里的精灵帧要指向同样的图片集。  
帧动画五步曲：  
1. 创建多个精灵帧  
2. 用精灵帧创建动画  
3. 封装动画成动作  
4. 创建精灵  
5. 让精灵执行动画动作

一般会把一个动画的所有图片打包成大图片，生成一个 png 文件和 plist 文件，然后加载这两个文件就可以把所有图片缓冲到精灵帧缓冲区，然后在从缓冲区获取每一帧

AnimateHelper = function(fileName, delay, loops)
        -- 从 plist 文件加载精灵帧
        local sfc = cc.SpriteFrameCache:getInstance()
        sfc:addSpriteFrames(fileName .. ".plist", fileName .. ".png")
    
        -- 创建动画
        local animation = cc.Animation:create()
        animation:setDelayPerUnit(delay or 0.2)
        animation:setLoops(loops or 65535)
    
        -- 获取第一帧
        local frame = sfc:getSpriteFrameByName(fileName .. ".png")
        animation:addSpriteFrame(frame)
    
        -- 使用第一帧创建精灵
        local sprite = cc.Sprite:createWithSpriteFrame(frame)
    
        -- 获取剩下的精灵帧
        local i = 2
        while true do
            frame = sfc:getSpriteFrameByName(fileName .. i .. ".png")
            if frame == nil then
                break
            end
            animation:addSpriteFrame(frame)
            i = i + 1
        end
    
        local animate = cc.Animate:create(animation)
    
        return sprite, animate
    end