【quick-cocos2d-x】动画和粒子

我不是女神ヾ 2022-06-08 13:59 143阅读 0赞

### 帧动画 ###

帧动画需要一组的图片序列，用于创建精灵帧，一般是先将图片加载到精灵帧缓冲区，然后创建动画的时候再从缓冲区取

local SpriteFrameCache = cc.SpriteFrameCache:getInstance()
    SpriteFrameCache:addSpriteFrames("char/wj24.plist")

这是使用合图的情况，也可以不使用合图，手动根据碎图创建精灵帧再添加到缓冲区，也可以不添加到缓冲区，创建动画时再创建精灵帧

帧动画使用 Animation 来组织，创建一个 Animation 之后要设置每一帧的间隔，动画循环次数以及添加精灵帧

animation = cc.Animation:create()
    animation:setDelayPerUnit(0.1)
    animation:setLoops(-1)
    frame = SpriteFrameCache:getSpriteFrame(key)
    animation:addSpriteFrame(frame)

最后创建一个动作 Animate，再使用 Sprite:runAction(Animate) 来播放

animate = cc.Animate:create(animation) char:runAction(animate)

一个完整的示例

function CharLayer:createAnimation()
        SpriteFrameCache:addSpriteFrames("char/wj24.plist")
    
        self.char = display.newSprite():addTo(self):pos(display.cx, display.cy)
        self.animation = cc.Animation:create()
        self.animation:setDelayPerUnit(0.1)
        self.animation:setLoops(-1)
    
        local key = "wj24_attack_10000.png"
        local frame = SpriteFrameCache:getSpriteFrame(key)
        self.char:setSpriteFrame(frame)
        self.animation:addSpriteFrame(frame)
    
        local i = 1
        while true do
            key = string.format("wj24_attack_1%04d.png", i)
            frame = SpriteFrameCache:getSpriteFrame(key)
            if frame == nil then
                break
            end
            i = i + 1
            self.animation:addSpriteFrame(frame)
        end
    
        self.animate = cc.Animate:create(self.animation)
        self.animate:retain()
    end
    
    function CharLayer:playAnimation()
        if tolua.isnull(self.animate) then
            print("animation is null")
            return
        end
    
        self.char:stopAllActions()
        self.char:runAction(self.animate)
    end

### 骨骼动画 ###

骨骼动画使用 ArmatureDataManager 来管理数据，使用 Armature 来创建动画结点；Armature 结点是一个包含动画的显示对象，可直接添加到场景中，而帧动画 Animation 只是一个动画数据，Animate 则是一个动作，必须使用 Sprite 来执行。这两个类在 ccs 包下面

首先，使用 ArmatureDataManager 加载动画数据，数据有两种格式，xml 和 ExportJson(其实就是 json 文件)；无论哪种格式的数据都需要一张合图和一个 plist 文件

使用 xml 格式的数据

ccs.ArmatureDataManager:getInstance():addArmatureFileInfo("char/Dragon.png", "char/Dragon.plist", "char/Dragon.xml")

使用 json 格式的数据

ccs.ArmatureDataManager:getInstance():addArmatureFileInfo("char/Cowboy.ExportJson")

这个不需要指定 png 和 plist 文件，因为 json 文件中已经包含这个信息了

接下来就是创建一个 Armature，创建的时候只需要传入一个名称即可，这个名称必须是前面已经加载的数据

armature = ccs.Armature:create("Cowboy")
    self:addChild(armature)
    armature:setPosition(cc.p(display.cx - 100, display.cy - 100))
    armature:setScale(0.3)

播放和停止动画需要先获取到 Animation，播放动画有两种方式，一种是使用下标，一种是使用名称

armature:getAnimation():play("run")
    armature:getAnimation():playWithIndex(0)

停止动画

self.armature:getAnimation():stop()

根据骨骼名称可以获取骨骼，获取骨骼之后使用 getDisplayManager 可以获取到皮肤管理器，通过骨骼和皮肤管理器可以操作皮肤，包括添加皮肤（一块骨骼上可以添加多个皮肤）、移除皮肤、获取当前使用的皮肤下标、切换当前使用的皮肤

-- 获取骨骼
    local bone = self.armature:getBone("Layer130")
    -- 获取骨骼皮肤下标
    local index = bone:getDisplayManager():getCurrentDisplayIndex()
    print("skin index for this bone: ", index)
    -- 创建新皮肤
    local skin = ccs.Skin:createWithSpriteFrameName("robotFolder-bady-a2.png")
    -- 添加皮肤
    bone:addDisplay(skin, 1)
    -- 移除皮肤
    bone:removeDisplay(0)
    -- 替换显示的皮肤
    bone:changeDisplayWithIndex(0, true)
    -- 再次获取骨骼皮肤下标
    local index = bone:getDisplayManager():getCurrentDisplayIndex()
    print("skin index for this bone: ", index)

要注意的是移除一个皮肤之后，后面的皮肤会自动往前移

一个播放骨骼动画的示例

function CharLayer:createArmature()
        ccs.ArmatureDataManager:getInstance():addArmatureFileInfo("char/Cowboy.ExportJson")
        self.armature = ccs.Armature:create("Cowboy")
        self:addChild(self.armature)
        self.armature:setPosition(cc.p(display.cx - 100, display.cy - 100))
        self.armature:setScale(0.3)
        self.armatureIndex = 0
    end
    
    function CharLayer:playArmature()
        self.armature:getAnimation():playWithIndex(self.armatureIndex)
        if self.armatureIndex == self.armature:getAnimation():getAnimationData():getMovementCount() -1 then
            self.armatureIndex = 0
        else
            self.armatureIndex = self.armatureIndex + 1
        end
    end

### 粒子系统 ###

cocos2d-x 使用 ParticleSystem 来创建粒子系统，ParticleSystemQuad 继承自 ParticleSystem，是 ParticleSystem 的升级版。创建粒子系统很简单，先使用粒子编辑器软件（比如 ParticleEditor）编辑好一个粒子，导出 plist 文件，然后根据 plist 文件创建一个粒子添加到场景就可以自动播放了。当然也可以不使用 plist 文件（还有一张小贴图），而是直接在代码中设置粒子的各个属性，但这个方式不仅麻烦而且低效，基本不会有人这么做的。

self.particle = cc.ParticleSystemQuad:create("effect/snow.plist")
    self:addChild(self.particle)
    self.particle:setPosition(display.cx, display.height)