当游戏进入了手游时代, 快成为了开发游戏的主题曲. 开发快, 上线快, Bug修复快, 挣钱也会特别快.
脚本成为了在游戏开发中的助力, 而且脚本可以即时更新的特性, 更是为了避免平台冗长的审核过程的法宝. Lua脚本以其开发速度快, 运行快, 成为了众多游戏开发的首选.
CocoStudio也是以快著称, 如果CocoStudio和Cocos2d-x Lua珠联璧合, 快上加快, 很有想象的空间.
今天我们来看下在Cocos2d-x Lua项目中如何调用CocoStudio导出的动画.
一 版本
我们采用的是Cocos2d-x 3.0RC0和CocoStudio 1.3, 不同的版本在功能上可能略有差异, 希望大家尽量能采用这个版本.
大家请自行下载并配置开发环境, 如果大家在安装活配置的过程中遇到问题, 不妨在CocoaChina的CocoStudio专区提出, 一起交流.
二 创建新的Cocos2d-x Lua项目并导入资源
大家在命令行或者终端中, 找到将要存放工程的路径并运行命令
cocos new -p com.young40.animation -l lua LuaAnimation
我们在LuaAnimation\frameworks\runtime-src\目录下可以看到有iOS, Mac, Android, Win32等工程.
大家可以根据自己的情况来打开对应的工程项目. 我是在Win下创建的, 所以选择Win32的工程并打开.
我们打开CocoStudio的动画编辑器, 并打开示例项目HeroAnimation.
我们切换到动画模式, 为attack的其中一帧添加一个kill帧事件. 对帧事件不太了解的同学, 可以看下这篇教程.
CocoStudio sample讲解 SampleCollision骨骼动画与简单碰撞 http://www.cocoachina.com/bbs/read.php?tid=189665
大家可以看下其中的帧事件部分, 这里不再赘述.
导出这个项目, 稍后将导出的文件复制到LuaAnimation的res目录下边. 可能iOS, Mac工程还需要将其添加到Xcode项目中, 这里不再赘述.我们还增加了两个武器的图片(weapon1tex.png, weapon2tex.png), 做换装的演示.
三 代码实现
我们在代码中对CocoStudio做好的动画的操作很简单, 大概可以分为以下几个操作.
- 加载动画数据
- 生成动画对象
- 播放动画
包括按名称播放, 按顺序播放, 以及获取动画列表数量 - 骨骼动画换装
添加新的皮肤, 切换新的皮肤 - 帧事件和动画事件
添加帧事件监听, 以及监听回调
添加动画事件, 以及监听回调
我们在默认的Cocos2d-x Lua工程里面直接修改main.lua.
好, 让我们直接看代码吧. 附件中有工程打包下载, 需要大家将2d-x copy一份到LuaAnimation\frameworks\cocos2d-x.
– 运行场景 local sceneGame = cc. Scene:create() --sceneGame:addChild(createLayerFarm()) --注释掉默认的农场的场景 --sceneGame:addChild(createLayerMenu())
local function createTestLayer () local layerTest = cc. Layer:create()
– 加载动画-资源 – 还有异步加载资源的方法addArmatureFileInfoAsync, 大家可以自行看下其用法, 今天暂不讨论 ccs .ArmatureDataManager: getInstance():addArmatureFileInfo( “res/Hero0.png”, “res/Hero0.plist” , “res/Hero.ExportJson” )
– 创建动画对象 local armature = ccs. Armature:create( “Hero”) – 设置位置 armature :setPosition(origin. x + visibleSize.width / 3, origin .y + visibleSize. height / 5) – 播放动画, 播放指定动作 armature :getAnimation(): play(“attack”) – 添加到游戏中 layerTest :addChild(armature)
– 帧事件回调 do – 添加用于显示的标签 local killEventCount = 0 – 计算事件发生数量 local killEventLabel = cc. Label:create( “Kill Event Count: 0”, s_markerFeltFontPath, 20) killEventLabel :setPosition(cc. p(50, 10))
layerTest :addChild(killEventLabel)
– 添加帧事件回调 armature :getAnimation(): setFrameEventCallFunc(function ( bone, evt, originFrameIndex, currentFrameIndex ) if evt == “kill” then – 判断帧事件名称是否为kill killEventCount = killEventCount + 1 – 更新输出显示 killEventLabel :setString("Kill Event Count: " … killEventCount) end end) end
– 动画事件回调 do – 添加一个动画事件显示标签 local moveEventLabel = cc. Label:create( “”, s_markerFeltFontPath, 20) moveEventLabel :setPosition(cc. p(50, 30))
layerTest :addChild(moveEventLabel)
– 添加帧事件回调 armature :getAnimation(): setMovementEventCallFunc(function (arm, eventType, movmentID) – 判断帧事件类型 local actionType = “Start Event” if eventType == ccs. MovementEventType.start then actionType = “Start Event” elseif eventType == ccs. MovementEventType.complete then actionType = “Complete Event” elseif eventType == ccs. MovementEventType.loopComplete then actionType = “Loop Complete Event” end
– 更新输出显示 moveEventLabel :setString("Got Event " … movmentID … " " … actionType) end) end
– 我们要实现触摸后切换动画- – 接受触摸 local function onTouchBegan(touch, event) return true end
local currentIndex = 0 – 获取动作列表数量 local animationListCount = armature: getAnimation():getMovementCount() – 触摸结束后切换动画 local function onTouchEnded(touch, event) – 通过播放动画 armature :getAnimation(): playWithIndex(currentIndex)
currentIndex = currentIndex + 1 if currentIndex >= animationListCount then currentIndex = 0 end end
– 监听触摸事件 local listener = cc. EventListenerTouchOneByOne:create() listener :registerScriptHandler(onTouchBegan, cc.Handler .EVENT_TOUCH_BEGAN) listener :registerScriptHandler(onTouchEnded, cc.Handler .EVENT_TOUCH_ENDED) local eventDispatcher = layerTest: getEventDispatcher() eventDispatcher :addEventListenerWithSceneGraphPriority(listener, layerTest)
– 换装的实现 – 生成新的皮肤(这里指装备) local skin1 = ccs. Skin:create( “res/weapon1tex.png”) local skin2 = ccs. Skin:create( “res/weapon2tex.png”)
– 获取到装备的骨骼, 并添加新的显示 local bone = armature: getBone(“Layer17”) bone :addDisplay(skin1, 1) bone :addDisplay(skin2, 2)
– 创建菜单 local function createLayerMenu() local menu = cc. Menu:create()
local label = cc. Label:create( “ChangeDisplay”, s_markerFeltFontPath, 20) local menuChageDisplay = cc. MenuItemLabel:create(label) menuChageDisplay :setAnchorPoint(cc. p(0, 0))
– 换装中装备显示的Index local displayIndex = 0 menuChageDisplay :registerScriptTapHandler(function () displayIndex = displayIndex + 1 if displayIndex > 2 then displayIndex = 0 end
– 换装 bone :changeDisplayWithIndex(displayIndex, true) end)
– 增加了一个用于调试的临时按钮 local menuReload = cc. MenuItemLabel:create(cc .Label: create(“Reload”, s_markerFeltFontPath, 20)) menuReload :setAnchorPoint(cc. p(0, 0)) menuReload :setPosition(0, 20) menuReload :registerScriptTapHandler(function () dofile( “src/main.lua”) – 强行重载, 写法欠考虑, 大家别学我 end)
menu :setAnchorPoint(cc. p(0, 0)) menu :setPosition(cc. p(50, 60)) menu :addChild(menuChageDisplay) menu :addChild(menuReload)
return menu end
layerTest :addChild(createLayerMenu())
return layerTest end
– 添加我们的测试层到Scene sceneGame :addChild(createTestLayer())
