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

帧动画

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

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()endfunction 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 = 0endfunction 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    endend

粒子系统

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)