编辑器工具,Cocos2d-x

Spine入门——反向动力学

Spine?

Spine 是一款针对游戏的 2D 骨骼动画编辑工具。 Spine 旨在提供更高效和简洁 的工作流程,以创建游戏所需的动画。

反向动力学 Inverse Kinematics (IK)

通常情况下,我们使用 FK 工具设置动画,它是正向动力学的缩写。当设置 手部位置动画时,FK 从上至下驱动,先转动大臂,再转动小臂来实现。大多数 情况下它能很好的达到我们想要的效果。但某些特殊情况比如:一个坐着的角色 手扶桌面,慢慢起身,这时 FK 需要不段的调整手部的位置,以使其能保持按在 桌面上。这将需要创建大量关键帧来实现。

IK 对于这种情况会更合适,它是反向动力学的缩写。IK 从下至上驱动。设 置好手部的位置后,角色起身时,手部保持不动,小臂和大臂的骨骼会自动旋转 到合适角度。

IK 也适合于完成其它一些任务,比如脚部会踩进地面的行走动画(例如游 戏场景中有一关沼泽地),可以在运行时通过调整 IK 目标(IK target)实现角色 在不平坦的地面上行走的效果,等等。在 Spine 中对骨骼的控制可以是 FK,可 以是 IK,可以是 FK/IK 两者混合的效果。当然也可以在动画中实现 FK 和 IK 之 间的平滑过度。(传说中的 FK/IK 无缝转换)

阅读全文»

Spine入门——认识界面

Spine?

Spine 是一款针对游戏的 2D 骨骼动画编辑工具。 Spine 旨在提供更高效和简洁 的工作流程,以创建游戏所需的动画。

优势 Benefits

在 Spine 中通过将图片绑定到骨骼上,然后再控制骨骼实现动画。 2D 骨骼动画 相对于传统的逐帧动画有以下优势:

  • 最小的体积: 传统的动画需要提供每一帧图片。而 Spine 动画只保存骨骼的动 画数据,它所占用的空间非常小,并能为你的游戏提供独一无二的动画。
  • 美术需求: Spine 动画需要的美术资源更少,能为您节省出更多的人力物力更 好的投入到游戏开发中去。
  • 流畅性: Spine 动画使用差值算法计算中间帧,这能让你的动画总是保持流畅 的效果。
  • 装备附件: 图片绑定在骨骼上来实现动画。如果你需要可以方便的更换角色的 装备满足不同的需求。甚至改变角色的样貌来达到动画重用的效果。
  • 混合: 动画之间可以进行混合。比如一个角色可以开枪射击,同时也可以走、 跑、跳或者游泳。
  • 程序动画: 可以通过代码控制骨骼,比如可以实现跟随鼠标的射击,注视敌人, 或者上坡时的身体前倾等效果。

摄影表

在动画制作过程中摄影表是最核心的地方。这里包含了所有重要的细节,通过它可以创建动画以及对时间轴进行微调。

阅读全文»

Quick 社区版对 CocoStudio 的支持说明

注:本文针对Quick-Cocos2d-Community 3.6

支持的CocoStudio

Studio版本众多,但其主要可以按版本分为两大类,即 Studio1.x(Studio一代)和 Studio2.x(Studio二代)。

社区版引擎基于 Quick-Cocos2d-x3.3final,官方给出的对应的Studio版本为 2.x 中的 v2.0.6。当然,更高版本的 Studio 在该引擎中也不是一定不能用,但兼容性肯定不好(吐槽下,对应的 v2.0.6 兼容性也没见得特别好),所以不建议使用。

另外,一般来说高版本的引擎能加载低版本的 Studio1.x 数据,所以社区版引擎中也支持低版本的 Studio1.x 数据。如果在社区版中要使用低版本的 Studio1.x 数据,建议使用相对稳定且比较经典的 Studio 1.6 作为编辑器。(注:Studio1.x在社区版引擎中不完全兼容,但一般可用。)

阅读全文»

Spine入门 之 认识界面

本文转自:http://qgc.qq.com/222369324/t/27

前言

一、本文演示用的是Spine试用版v1.9.17,除了不能导出和保存外,所有功能都齐全。用来学习完全足够。因为不能保存和导出,所以官方已经预先将每个示例动画,都导好了动画数据,就放在安装目录下,程序哥们可以直接拿去测试运行库。

二、按钮上的PRO字样表示,此功能属于专业版。详情看官网对比。

三、鼠标悬停在工具按钮上几秒就会出现提示,(简单的介绍和热键)。悬停时按F1能立刻显示提示信息。(就算看不懂英文,也能看懂热键字母是哪个对吧。) 。

四、本篇教程配合Spine 实用技巧大全》相互补充。某些功能的具体用法,已经有写过教程,这里就不再复述了。

1、装配模式Setup Mode

Spine装配、动画两种模式,顾名思义装配模式用来设置角色,所有创建删除之类的操作:创建骨骼、创建IK、加入图片、创建网络,等等都在装配模式完成。创建一个新动画时,角色的初始状态,就是从装配模式继承而来。你也可以随时返回到装配模式去调整,动画的初始参数,那么已经存在的动画也会相应发生变化。时刻清楚自已处于什么模式,能排除你大多数的困惑。灵活的运用这一特性,还可以方便的统一调整角色形体。 psb 功能区说明

1. 主菜单:点击这里会弹出Spine的主菜单,按地球文明的习惯,一般:打开、保存、新建、导出、导入、系统设置,之类的功能都放在这里。Spine 实用技巧大全》 中讲解

2. 项目名称:当前项目的文件名显示在这。

3. 当前模式:【ctrl + tab】在Spine装配模式、动画模式间切换。

4. 层级树窗口按钮:【ctrl + T】点击展开和关闭层级窗口,拖拽调整窗口大小。

5. 层级树窗口:以树型结构显示的大纲目录,项目中所有的对象都在这里,相当于Windows资源管理器左边的导航窗格。

6. 功能区:它是层级窗口底部的扩展面板,类似于PS上方的选项栏,会根据所选内容变化。节点的:新建、删除、复制、重命名、更改层级、修改属性等大多数操作都在这里。自已分别选择一下各种节点,看看效果吧。

7. 试用版:这个只有在试用版显示,意思就是告诉你这是试用版。如果你看到这个就不要再问,为什么我不能导出,为什么我不能保存这一类的问题了。各版本的功能差别官网可以查看:http://zh.esotericsoftware.com/spine-purchase

8. 当前对象:当前选中对象的名称。如果选中多个对象就只显示数量。

9. 视图缩放控制:【ctrl + F, ctrl + shift + F, ctrl + shift + alt + F】就是放大缩小场景中的对象,以方便显示嘛,那几个图标都点一下,看看效果吧。

10. 工具:这个面板就叫工具,从上到下分别是IKB】,权重【G】,创建骨骼【N】。(要说明的是这个Pose和右边层级目录中的Constraints别搞混了,其实在别的软件中,这两个东西是合在一起的叫作IK,在这给拆成两半了)

11. 变换工具:这里就是旋转、位移、缩放了,右边的小钥匙就是K帧按钮。绿色表示值无变化,黄色表示改变了值,但未创建关键帧,红色表示已经改变了值并创建了关键帧。(补充说明:Spine中看见小钥匙(K帧按钮),就表示那里是可以创建关键帧的。目前已知的K帧按钮除了11区外还有就在6号区,5号区也就是列表的第二列。)

12. 坐标系:当前,父级,世界。这个就不解释了,不明白的就google吧。

13. 抵消变换:主要的用途就是旋转、位移、缩放父对象时,保持它的子对象不动。

14. 选项:这里是分别针对骨骼、图片、边界框的是否可选、是否显示的控制开关。自已试试吧。

技巧

1. 平移视图:右键按下平移视图。

2. 缩放视图:1、滚轮缩放, 2、热键缩放【ctrl + F,  ctrl + shift + F,  ctrl + shift + alt + F

3. 旋转位移缩放:选中骨骼后,左键在空白区拖动就可以了,这样能避免误选的尴尬。

4. 中键框选:上面的功能确实不错,不过通常习惯用左键框选,但当选中骨骼时,框选就坑爹了。这时可以用中键,一样实现框选效果。

5. 取消选择:双击左键,空白处单击中键,ESC键,空格键(我习惯用空格播放,所以这个热键我没用官方的设置)

6. 只移动父级:请看功能区抵消变换

7. PSSpine:原画在PS中画好,切片分层,然后用脚本导到Spine中,动画师只要加上骨骼就可以做动画了。什么?你还在一个一个对位图片?看看PSD_</span>导出到_Spine.pdf吧。

8. 创建骨骼:创建骨骼时,按住Shift,能直接将高亮的图片纳为子物体。并且骨骼会以图片的名字命名,方便吧。

9. 重画骨骼:已创建的骨骼想调整怎么?直接按住Alt,重画一次就行了。层级什么的,完全不会变。(重画的时候也可以配合Shift哦。)

10. 骨骼长度:在旋转、位移、缩放的状态下,将鼠标靠近骨骼末端,当出现小红圈时,就可以直接拖动调整骨骼长度了。

  1. 选中对象后,可以直接在场景中空白区域拖拽执行 位移、旋转、缩放 操作,不一定要把鼠标按在对象上。

2、动画模式Animate Mode

Spine装配、动画两种模式,动画模式只为那些已经存在的对象创建动画,不会增删任何现有对象,只是改变已有对象的属性参数。创建一个新动画时,角色的初始状态,就是从装配模式继承而来。你也可以随时返回到装配模式去调整,动画的初始参数,那么已经存在的动画也会相应发生变化。时刻清楚自已处于什么模式,能排除你大多数的困惑。灵活的运用这一特性,还可以方便的统一调整角色形体。

psb (3)

功能区说明

1. 摄影表(时间轴):【ctrl + D】按住Dopesheet按钮拖拽可以调整窗口大小。这里就是动画师的主要战场了。所有关键帧数据都显示在这里。摄影表的数据也是按层级显示的。未选中任何对象时,摄影表默认显示整个角色的关键帧数据,第一行是当前动作名称,等同于:层级树(Tree) > 动画节点(Animations)下当前显示的那个动作。(小眼睛那一列是显示开关)

2. 当前帧:可以输入数字,实现跳转。

3. 循环起始点:点击设置当前帧为起始点,再次点击消除。开启循环,并设置了结束点时,才有用。

4. 循环结束点:点击设置当前帧为结束点,再次点击消除。开启循环,并设置了起始点时,才有用。

5. 自动关键帧:这个就不解释了吧。

6. 幻影:(其实就是FLASH里的洋葱皮,没有用过FLASH也没关系,GOOGLE一下,就知道了)它只是用于辅助调动画的预览效果,不能输出。

7. 播放控制:Spine 实用技巧大全》 第二条就有。这里就不再多说了。

8. 折叠展开:折叠和展开摄影表中的层级对象。

9. 锁定显示:锁定摄影中显示的对象,当你改选别的对象时,摄影表里不变。

10. 刷新摄影表:锁定摄影表的情况下,通过它来更新摄影表以显示当前选中的对象。

11. 选择摄影表中对象:锁定摄影表的情况下,通过它可以快捷的选中摄影表中显示的对象。

12. 复制剪切删除粘贴:这几个东西就不说了吧。

13. 整体平移关键帧:就是按住Alt移动关键帧的功能。

14. 同时在多帧上修改对象:比如把角色,在所有帧统一向前移动N个单位。

15. 翻转动画:框选关键帧缩放时,如果越过另一边界,能实现翻转效果。(好像默认就是如此,开不开这个都一样)

16. 播放按钮:地球通用,不多说了。

17. 循环开关:【Ctrl + R】开启和关闭循环播放。

18. 曲线编辑器:本来这里才应该是动画师的主战场。不过Spine中,曲线编辑器只算是个配角了。只能显示两帧之间的过度。

19. 过度方式:支持线性,贝塞尔,步进式三种。

20. 匹配曲线:Match可以实现复制曲线的效果。先选中你要复制的帧,然后选择一个或多个目标帧。源帧的曲线是亮的,目标的曲线是灰的。点一下贝塞尔手柄,目标就自动匹配了。(鼠标靠近塞尔手柄会有反应。)换句话说,其实就是不开这个功能,你调曲线就只影响第一个选择的帧,如果开了,就同时影响所有选择的帧。

技巧

1. 单帧全选(关键帧):点击第一行(动作名称这行)上的关键帧图标,就能选择此帧上的所有的关键帧。同理选中任何一个父级,它下面的属性的关键帧就会被选中。比如骨骼。

2. 多帧框选(关键帧):当然也可以框选这一行,那么场景中所有的关键帧就都选中了。

3. 关键帧的颜色:关键帧标记的颜色与其相关的属性对应,白色表示此父级下多个属性都创建了关键帧。

4. 框选关键帧:按住Ctrl的同时拖拽,可以框选关键帧。这个主要是方便在鼠标所在处有关键帧的时候,如果直接按下就变成点选了。比如从第

5. 移动非整数帧:按住Shift 的同时拖关键帧,就可以移动半帧了。(少用为妙)

6. 整体平移(关键帧):按住Alt 的同时拖关键帧,就可以整体平移右侧所有的关键帧。

7. 复制关键帧:在要复制的关键帧上,按住【 Ctrl + Shift + 鼠标左键】。松开【Ctr + Shift】,鼠标左键不放,移动到你想要的位置。

8. 复制曲线:查看功能区说明匹配曲线。

9. 开启循环播放:【Ctrl + R,开关切换。

3、层级树窗口 Tree

层级树窗口相对来说内容较多,所以单独讲解。【ctrl + T】展开和关闭,层级窗口。

层级树窗口,是一个树型结构显示的大纲目录,项目中所有的对象都在这里,相当于Windows资源管理器左边的导航窗格。对节点的创建、删除、改名、属性调整等基本操作都在层级树窗口下方的扩展栏进行。它会根据所选对象不同而显示相应的选项。

psb (4)

功能区说明

1. 显示过滤开关:骨骼、资源夹(Slot)、附件(attachments)。打开的就显示,关掉就不显示了。

2. 聚焦到选择:在场景中选择了对象,层级树中自动跳转以显示它。

3. 文本替换:在Spine 实用技巧大全》中的第6点有讲解。

4. 层级树主体:分三列,第一列:显示开关,第二列:关键帧按钮(只有动画模式才显示,小钥匙按钮与变换工具面板相同),第三列:层级节点。

5. 节点介绍:

a) 角色骨架:顶级小人图标。一个项目中可以创建多个角色骨架。骨架下是一些主要的类型子节点。与其它节点的创建方式稍有不同,角色骨架的创建按钮,在主菜单里。

b) 骨骼:角色的骨骼层级关系都记录在这里。

c) 显示层级:显示层和骨骼层级是两个概念。图片前后遮挡关系,在这里调整。

d) 图片路径:这里显示硬盘上的图片资源。Spine只是从路径引用图片,并没有把文件导进项目。只是原封不动的显示硬盘上文件夹的内容。

e) 皮肤:这个是换皮功能,是改变角色外观用的,比如官方例子的哥布林,男女切换。它和蒙皮是两个东西。可以为角色创建多套皮肤方案,它们都将存放在此节点下。详情请看。《Spine_Skins_</span>皮肤切换_20140405.pdf 

f) 动画:一个角色可以创建多个动作,都存放在此节点下。

g) 事件:这个主要是在运行时,给程序发送参数用的。创建一个事件对象节点,然后按程序需求在指定帧上K上指定的参数。其实不要看到事件,就觉得高深艰涩。在编辑器中,你就把它看成是一个骨骼,Interger,Float,String三个属性其实和旋转位置缩放本质上一样,你只要像平时那样,按需求在相应的时间K帧,就行了。

h) 约束:用于锁定IK,实现踩踏关键帧效果,也就是角色动画中常说的“定脚”。具体看相关教程吧:Spine_IK约束20140621》, 《Spine 反向动力学工具(IK)官方文档中文版_20140726.pdf

6. 节点名称:节点的名称。右边三个按钮是复制,改名,删除。

7. 骨骼长度:骨骼长度为

8. 继承变换:默认子物体会继承父级的变换属性。缩放、旋转,按需求勾选或取消吧。

9. 骨骼颜色:加上颜色好辨认嘛。

10. 创建:可以在骨骼下创建骨骼、资源夹(Slot)、皮肤占位符(Skin Placeholder)、边界框(Bounding Box)。不要问为什么不能创建图片这么2的问题了吧。都说了图片是从图片(Images)拖到进来的。

11. 设置父级:【P】,选中对象,按P,再点选父级。选中的对象就飞过去给人家当儿子了。其实直接在层级树里用鼠标拖拽也很方便。

psb (5)

12. 激活边界:点上它就相当于一个边界框了,可以用来做碰撞了。但愿我没有猜错吧。

 

psb (6)

13. 图片的路径:前面说了Spine的图片只是引用自硬盘上的。那它是怎么来确认图片路径的呢?项目所在路径 + ImagesPath属性 图片的路径。这就是一个最终用于显示的图片路径。如果图片显示有问题,那你把这三段,拼起来看看,所指向的位置是否是正确的。这方面的问题,可以看看Spine 实用技巧大全》中的第6点

14. 激活网格:勾上它图片就变成网格对象了。

15. 参考背影:勾上它图片就变成参考图了,在场景中不可选,只在编辑动画时显示,不会输出到最终的动画数据里。

16. 颜色叠加:叠加颜色,调整透明度什么的。(这个只能在装配模式设置,动画中不能更改)。要做颜色和透明度的动画,请操作资源夹(Slot)上的相应属性。

psb (7)

17. 显示层级:图片的前后显示关系在这里调整,可以直接鼠标拖动,也可以选中后,用小键盘的【+ -】号调整(可以配合Shfit)。不一定要在层级树中选,直接在场景中选中图片也可以按小键盘的【+ -】号调整。(补充说明动画模式下不能选图片,因为图片上没有可动画属性,但是图片找到网格就可以选了,因为网络有动画可以做)

psb (8)

18. 图片文件夹:将硬盘内容显示在这里。硬盘路径就是,项目文件所在目录 + Path值。改动了Path没有反应可以按Refresh刷新。

19. 皮肤:只有一个创建按钮,就不多说了。

20. 动画:这里也只有一个创建。

21. 事件:这个也只有一个创建。

22. 约束:这个也只有一个创建。

技巧

1. 层级关系:通常是这样骨骼下可以放: 骨骼 > Slot > (图片、网络、皮肤占位符、边界框),皮肤占位符下可以放图片、网络。

2. 显示隐藏子物体:同学们都知道层级目标第一列就是显示开关,点一下就可以切换隐现了,但是我要说用右键点击,可以把子物体一起隐藏,你知道了么?(不过并不完美,因为它并不是用层级关系来实现的,只是批量帮你打开和关闭子物体的显示罢了)。

3. 创建节点:快捷方法在类型节点上双击就可以直接创建此类型节点了。常规方法,选中类型节点,在层级树窗口下方的扩展面板中点击相应的创建按钮。

4. 展开和折叠节点:右键点击节点名称,就可以展开和折叠。

5. 调整显示层级:请查看 功能区 17 显示层级

Spine 实用技巧大全



本文转自:http://qgc.qq.com/222369324/t/18

1、账号登出 log Out

Spine 的一个序列号只允许安装两台电脑。
如果你想换电脑按装的话,可以在设置里登出。

psb

psb (1)

2、Spine 如何调整帧速率

首先:这个问题,被问过无数次,我也答过无数。可还是会有新人来问。
Spine中没有帧速率调整的功能。Spine内部用时间单位记录数据。在播放时默认30fps。
动画师只管按你的Timing调动画,播放时的帧速率是程序去控制的。
至于摄影表或者叫时间轴,那里的帧刻度只是因为动画师的传统习惯,不是真正的按帧记录。
其次:如果你想,可以在Playback里改变预览的播放速度。
psb (2)
speed就是速度,一面有0.5倍,1倍速,2倍速的快捷按键。
Stepped是步进式播放,选上它,播放看看效果就知道了。
这里的改变的是只是预览效果,与导出的动画数据无关。
所以我也奉劝,要把速度改回正常(1倍速)来检查最终结果。
最后:如果你的动画已经做完了,但是发现想整体调整下速度。
这时,你可以交给程序去处理。程序哥只要改个参数就行了。
如果你一定要“作”,那么可以在摄影表里,全选所有的关键帧然后整体缩放,(就像在PS里ctrl+t,然后横拉图片那样)
(我也遇到N多同学问怎么全选这类的问题,方法不只一种,最简单的就是在“动作名称”这一行,
从左向右,框选所有关键帧图标就行了。为什么呢?不解释了,自己思考下。)
psb (3)
这样可以缩放整体时间,不过你最好事先另存一份,因为这样的操作是破坏性的,你的关键帧会出现小数。
如果你觉得无所谓那就去吧骚粘,你敢死,我就敢埋。
孤的拉克~~~~

3、Spine 如何导出

 动画师做完动画后,只需要导出三个文件给程序就可以了。其它的不用再管了,导出时有一些设置,下面会讲。
如果程序没有要求你改,基本就不会动了。
1,主菜单选导出
psb (4)
2,通常我们是导出JSON格式的动画数据,按下面设置
psb (5)
Output directory: 存放目录。
Extension:扩展名
Format:文件格式
Nonessential data:
Pretty print:排版输出,如果测试时,可以勾上它。最终打包的件不用勾,文件会小一些。
Ctreate atlas:是否输出 贴图集数据,这个必须要的。
3 对于打包图片的参数设置。这里我只简单的说一下,大多的参数,通常你一辈子也用不着改的。
(要想了解详情可以看这篇教程:Spine 纹理打包器 )
800
psb (6)
我只改了一个参数,就是 Output区的 Premultiply alpha 或 Bleed.
如果你导出的图片有杂边,或是出现奇怪的叠加,或是透明通道异常,总之导出图片出问题时
尝试改变一下这里的勾选,看哪种正常就用哪种。(用 Premultiply alpha 正常 还是用Bleed正常,取决于程序如何处理透明通道)
自己试试吧
如果想恢复默认参数,Defaults 按键可以把所有参数重置为默认。
如果你有特殊需求,自己研究其它的参数吧 :

4、Spine 如何设置参考图片

有时,你想像 MAX 或 MAYA 那样将一张图片作为参考,spine也提供了类似的功能。
只要你选中一张图,然后在属性栏中把 background背景勾上,场景中就再也不会选中它了。
并且,当你的输出打包图片设置中 Regions区的Ignore blank inmages 忽略背景图勾上时,它也不会被输出了。(这个默认是勾选的)
 psb (7)

5、Spine 版本回退

spine的更新非常频繁,这是好事也是坏事。建议能正常工作的朋友不要急于更新,起码你用来生产的那个机子不要马来更新。
经过测试,确认,你对新版本的功能确实需要,再更新。不然会影响到整个项目的工作进展。
当然如果发现新版本,有BUG,其实Spine是可以回滚版本的。
方法 一:
psb (8)
在这里选以前的版本,重新启动就可以了。Purge,是清理Updata的缓存。
psb (9)
方法 二:
如果是大版本的更新,或是你的设置里没有这个选项可选时,还有个办法。
找到你的 Spine 配置目录,这里新建一个 version.txt 文本文件,里面写上版本号。就行了。
其实,软件里的设置,也就是在这里生成一个txt。
如果你不知道版本号,可以到官网查看升级日志:


psb (10)

6、Spine 图片显示出错的处理方法



图片的路径

Spine的图片只是引用自硬盘上的。那它是怎么来确认图片路径的呢?项目所在路径 + Images的Path属性 + 图片路径(骨骼下的图片名字)。这就是一个最终用于显示的图片路径。如果图片显示有问题,那你把这三段,拼起来看看,所指向的位置是否是正确的。

问题描述
确定项目本身没有没问题,只是图片显示的问题。比如:
1、 原本一切显示正常,但是保存项目后,图片显示就出错了。
2、 原本显示正常,文件位置进行过调整后,图片显示就出错了。

场景中的图片显示红框写着MISSING。补充说明本例子的项目文件与图片素材在同一目录,如果你的文件位置不同,请做相应调整。其实就是个相对路径的概念。当然Spine也支持绝对路径,不过最好别那样做。道理就如同你给Spine留了手机号,它很容易找到你。但是如果你留的是座机号,可能就有点麻烦了。

spine-1

-----------------------------------------------------------------------------------------


处理思路有两个:
1、重设置项目图片的引用路径
2、修改场景中的图片路径,使之与项目引用的路径相符合

1、 重设置项目图片的引用路径
这里什么都不填时,引用路径就等同于引项目文件所在的目录。

spine-2

如果你的文件是这样存放的:

spine-3

那图片引用的路径就应该是:

spine-4

总结:也就是说只要将图片引用的路径这个参数,指定为你图片所在的目录就OK了。

补充说明:注意,在你设置图片路径时,看清是不是你导入的那个骨架。如果你的项目文件中已经有一个骨架“skeleton”,而你导入的骨架为“boy”那导入成功后,项目中就有两副骨架“skeleton”和“boy”,如果你看也不看,就一直瞎点skeleton,点一辈子也没用的。

2、修改场景中的图片路径,使之与项目引用的路径相符合
前提:确认图片引用路径已设置无误(引用的确实是你存放图片的目录,并且这就是你想要的位置),场景中图片还是不显示(本例子图片与项目文件在同一目录)
1. 图片与项目文件在同一目录。
2. 图片名称未变动。
3. 鼠标悬停于场景中的图片上,看下面提示。
4. 这里是图片加入场景时记录的路径。显示已经和2对不上了。

spine-5

问题原因
场景中记录的路径不对了,通过点选图片在右边的属性栏中重命名就可以解决。

spine-6
解决方案
如果图片几十张不是要改死,当然不用。Spine提供了查找替换功能。
因为替换操作只针对于选中项,,所以首先确保全选场景图片。(全选和空选效果相同,这里我按下Ese保证场景中没有任何对象被选中。)
1. 打开查找替换功能

spine-7

2. 如下图中的1:文件名前多余的路径替换成空。
如下图中的3:确保被操作的类型只有图片。
如下图中的4:这里因为我都要改,所以就全勾上了。绿色框出的是结果预览。正是我们想要的。

spine-8

建议:
尽量统一项目文件与图片文件的放法。比如放在同一目录下。或是在项目当前位置建一个images文件夹把图片都放在里面。总之你手上的项目如果都用统一的方式管理文件,那就很少会发生这种问题。

7、Spine 的自动保存

Spine默认有自动保存功能,保存的文件在从这里找到:
如果遇到 Spine 崩溃的情况,可以试试
psb (11)psb (14)

8、Spine 里改变显示层级 DrawOrder

Spine 看要改为图片的显示层级,操作很简单就像在PS里拖动图层顺序一样。
并且改变显示层级的操作,还可以记录为关键帧。也就是说,你可以为之设置动画。
唯一要提醒的就是,你得确认你全拖动的是 DrawOrder 节点下的图标,而不是root下的骨骼什么的
看图吧:
psb (12)

 

9、Spine 的帧速率 30fps 默认

Spine 默认的帧速率为30fps,但只是个参考。
Spine编辑器中无法设置帧速率,Spine内部使用的是“秒”来记录动画。
摄影表中用“帧”为单位,只是因为动画师的习惯。
因为Spine的动画最终是用在程序中,与动画不同,
游戏中,会根据设备性能不一,动态调整帧速率以达到最佳效果。
所以定死帧速率没有意义。

10、创建骨骼时直接添加图片子为物体

Spine 在 2.0.21版时,改动了创建骨骼时shift 加选图片的功能。流程和热键都不一样了。
psb (13)
下面说下如何操作:
1、激活创建骨骼工具。
2、选一个骨骼作为父级。(我这里选了root,别跟前我选root。选你自己要的父骨骼。 )
3、按住 Ctrl 选择要放到新骨骼下的图。(新方法的好处就在于,可以多选了。骨骼的名称,将自动命名为第一个选中的图片。)
4、放开  Ctrl 在你需要的位置,拉出骨骼吧。(这一步其实也比之前的 Shift 要好,用过的都知道,Shift那个方法骨骼的末端只能在目标图片的范围内,很不人性。OK了再自由了,随便哪都行。)

11、动画最后一帧之后还有条线

动画最后面有一根线。但是明显那里没有关键帧。 psb (5)
1、当前动画是在bbb上建立的。
2、这根线是 spineboy 的由于两套骨架都可见,那么就会出现这种情况。看着这个动画,纠集一根在另一个骨架上的线。
如果你确信,你只有一套骨架,还是在最后一帧后面有这根线。那就是有关键帧没有显示出来罢了。
之前已经有网友提供方法删除方法。
就是在那帧上随便K一帧,然后选中最顶上的白色帧标记(选它就相当于选中了这一帧上所有关键帧。), 再执行删除那么这一帧上的所有关键帧就都删除了。
psb (4)

Spine 的纹理打包器(texture packer)



本文转自:http://qgc.qq.com/222369324/t/37

总述(Overview)

Spine 能帮你把分散的图片打包成一张完整的纹理贴图集或精灵表(spritesheet)以便在运行时更有效率的渲染。Spine 的纹理打包器(texture packer)是一个通用工具。它即可以用于为 Spine 的骨骼打包纹理,也可以单独运行为你打包应用程序所需的所有图片资源。

大多数图形API(如: OpenGL)的工作原理是这样的,绑定一张纹理,然后渲染,完成之后再绑定一张再渲染,如此往复直到全部完成。绑定纹理相对来说需要消耗大量的系统资源,所以理想的情况是把一堆小图储存为一张大图,然后就可以一次绑定,再将各区域分多次渲染。Spine 能有效的将大量小图打包成大图,每张小图的定位信息储存在一个采样文件中,它们可以通过名称在程序中引用。

Spine使用了多种先进打包算法。对各种尺寸进行海量尝试,然后选择最优打包方案。

 

打包(Packing)

纹理打包器可以通过两种方式运行:

1) 当导出 “JSON” 或 “二进制” 动画数据时,勾选`CreateAtlas`:

图片

这个方法可以便捷的同时导出动画数据和打包纹理,但是每套骨架会各自分别打包输出图片,并且忽略目录结构[directory structure](#Directory-structure)和JSON文件[JSONfiles](#JSON-Configuration)。要将多套骨架的图片信息打包在一起,请使用下面的方法运行打包器。

 

2) 在主菜单中选择`Texture Packer`:

图片

然后指定图片路径进行打包:

输入目录:(Input directory),输出目录:(Output directory),贴图集名称:(Atals name)

图片

设置(Settings)

 

有许多参数用于控制如何打包图片:

图片

一眼看上去可能让人望而生畏,但大多数情况下用默认设置就可以了。需要特别注意的地方有: 1) 最大长/宽值(Max width/height), 2) 是否勾选了预乘alpha(premultiplied alpha), 3) 是否勾选了去除白边。 **如果使用了网络,那应该取消去除白边(Strip whitespace X/Y)。

 

区域(Regions)

设置

描述

Strip whitespace X/Y

移除输入图片边缘的空白像素。移除的量储存在 Atlas 文件中,因此图片可以在你的应用程序中绘制就好像没裁剪过一样。如果使用了网格,应该取消移除空白边缘的选项。

Rotation

将某些图片旋转90度能高率的打包。应用程序必须特别注意要正确绘制这些地区。

Alias

如果两张图片的所有像素完全相同,那么只打包一次。

Ignore blank images

完全透明的图片不打包。

Alpha threshold

移除空白边缘时,Alpha 低于此值的,被视为0。

区域填充(Region padding)

设置

描述

Padding X/Y

打包的各图片区域之间的填充像素。某些纹理过滤会平均混合相邻像素,所以推荐区域间填充2个像素以避免相邻的区域互相影响。

Edge padding

填充也将应用到图片页面的边缘。

Duplicate padding

拷贝相邻的像素用于填充。如果纹理过滤选择了填充像素,此设置能消除"接缝"瑕疵。

页面(Pages)

设置

描述

Min width/height

输出图片的最小页面尺寸。

Max width/height

输出图片的最大页面尺寸。如果图片大于此值,将分多页输出。

Power of two

确保输出图片的尺寸大小为 2 的幂。某些游戏开发包有此需求。

Square

确保输出的图片长宽相等。某些纹理压缩算法有此需求(如: PVRT)。

输出(Output)

设置

描述

Format

输出 PNG 或 JPG 图片。

JPG quality

输出的 JPG 的压缩质量。

Packing

`Atlas` 打包图片尽可能紧凑的在一起。`Grid` 打包图片均匀的排列在网格中。(众所周知的精灵表spritesheet)。

Premultiply alpha

将 alpha 与每个 R、G 和 B 通道相乘。推荐在适合的情况下用 proper blending

Bleed

设置透明像素到最近的非透明像素的RGB值。以免在对透明像素进行 RGB 采样时造成纹理过滤的瑕疵 filtering artifacts

Scale

为每个比例单独输出完整的 Atlas。

Suffix

每个缩放比例 Atlas 的后辍。如果留空,不同尺寸将使用相同文件名,分别输出到以尺寸命名的子文件夹中。

选项(Options)

设置

描述

Atlas extension

atlas 数据文件的扩展名。

Combine subdirectories

将当前目录和所有子目录的图片打包在同一张图片上。忽略所有子目录中的设置文件 Pack.json。

Flatten paths

目录信息将从图片文件名字中移除。图片的文件名必须唯一。

Use indexes

使用图片名称无需移除任何图片索引后缀(在最后一个下划线之后的任意字符)

Fast

打包速度更快,但效果不受影响。

Debug

在输出的页面上,为所有图片区域绘制边框。

运行库(Runtime)
以下这些设置意在应用程序运行时,提示相关信息。

设置

描述

Filter min/mag

纹理过滤的缩小和放大设置。

Wrap X/Y

重复贴图纹理的设置。

Format

贴图纹理在内存中使用的格式。

 

目录结构(Directory structure)

 

Spine 能为应用程序一次性打包所有图片。给定一个目录,它就会递归扫描其下的图片文件。将当前目录和所有子目录中 Spine 找到的图片文件拼成一张更大的纹理贴图,称作"页"。如果图片大小超过了一页的最大尺寸,将会分成多页。

 

同一个目录下的图片会打包在同一页上。如果一页能放下所有图片,那就不需要分目录存放,因为每个应用程序只绑定一张纹理。否则,把图片分类放在不同的子文件夹下,可以最大限度地减少纹理绑定次数。

 

例如:应用程序可希望把所有的 "game" 图片和 "pause menu" 图片分别放在不同的文件夹里,这样连续绘制这两张图片只要:先绑定 "game" 并绘制(绑定一次),完成后再绑定 "pause menu" 再绘制(再绑定一次)。如果这些文件都放在同一个目录下,将会被混合打包在多个页面中,每个页面中都有 "game" 和 "pause menu" 图片。这样一来,在绘制 "game" 和 "pause menu" 时都需要执行多次绑定纹理的操作,而无法像之前那样各绑定一次就能完成绘制。

按文件夹分类图片,还能将纹理设置相关的图片组织在一起。比如每张图运行时的内存格式(RGBA, RGB, 等等),过滤(nearest, linear, 等等)。图片需要不同的纹理设置,就要分为不同的页面打包,这时应该将图片用文件夹分开放置。

用文件夹来组织,还是用 Spine 将所有子目录打包到一起,请看 `Combine subdirectories` 设置。

为了避免子目录的路径出现在 atlas 文件的图片名称中,请看 `Flatten paths` 设置。

JSON 结构(JSON Configuration)

每个文件夹可以包含一个 "pack.json" 文件用于具体指定此文件夹下图片的打包设置。每个子文件夹继承其父级的设置。子文件夹中的设置会覆盖父级的设置。

下面是一个 JSON 文件的例子,包含了所有可用的设置。

{
    pot: true,
    paddingX: 2,
    paddingY: 2,
    bleed: true,
    edgePadding: true,
    duplicatePadding: false,
    rotation: false,
    minWidth: 16,
    minHeight: 16,
    maxWidth: 1024,
    maxHeight: 1024,
    square: false,
    stripWhitespaceX: false,
    stripWhitespaceY: false,
    alphaThreshold: 0,
    filterMin: Nearest,
    filterMag: Nearest,
    wrapX: ClampToEdge,
    wrapY: ClampToEdge,
    format: RGBA8888,
    alias: true,
    outputFormat: png,
    jpegQuality: 0.9,
    ignoreBlankImages: true,
    fast: false,
    debug: false,
    combineSubdirectories: false,
    flattenPaths: false,
    premultiplyAlpha: false,
    useIndexes: true,
    grid: false,
    scale: [ 1 ],
    scaleSuffix: [ "" ]
}

注意这是 libgdx 的 "minimal" JSON格式,因此双引号通常是可选的。

不是所有的设置都需要指定,可以省略部分或全部。例如:取消填充(padding)和合并目录(combinesubdirectories)那么 JSON 可以写成这样:

{
    paddingX: 0,
    paddingY: 0,
    combineSubdirectories: false
}

在设置 [Settings](#Settings)对话框有一个保存JSON `Save JSON` 按钮能保存当前设置。此文件会命名为 `pack.json` 将它放要输入图片的文件夹下就成了此目录的设置文件,用不着手动创建设置文件。

九宫格(Ninepatches)

 

九宫格一般不用于 Spine 骨骼,但有其它的用途。

 

不算扩展名,如果一个图片文件的名称以".9"结尾,那么它将被识别为九宫格。可以手动创建九宫格图片,也可以使用这个工具[thistool]。图片必须有 1px 的透明边框。左上边缘可以有一条连续的黑线用于定义切割信息,九宫格中哪部分将会伸展。在右下边缘可以有一条连续的黑线用来定义填充信息,内容如何在九宫格中填充。图片打包时,1px的透明边框会被移除,切割和填充信息会储存在 atlas 数据文件里。

 

图片索引(Image indexes)

 

图片索引一般不用于 Spine 骨骼,但有其它的用途。

 

如果一个图片文件名以下划线加数字结尾(例如: `animation_23.png`),这个数字将被识别为索引,图片的索引会储存在 atlas 文件中。储存图片文件名时不包含下划线和索引。这样便可以通过索引在一个列表中检索这些图片。这样能更方便的打包精灵动画避免搞乱帧的顺序。

使用 Cocos2d-x 和粒子编辑器实现“天天爱消除”场景特效

原创:@涵紫。首发于泰然,转载请著名出处。




Cocos2d-x引擎提供了强大的粒子系统,它在模仿自然现象、物理现象及空间扭曲上具备得天独厚的优势,为我们实现一些真实自然而又带有随机性的特效(如爆炸、烟花、水流)提供了方便。尽管如此,它众多的粒子属性还是着实让人头疼。因为如果要想自己编码写出炫丽的粒子效果,这里有太多的属性需要手动设置和调节。不管是对新手还是资深的老油条程序员来说,都存在不同程度的不便性。

效果

所以,本文将结合 “天天爱消除” 游戏场景中的粒子特效,讲解如何使用粒子编辑器编辑实现飘飘扬扬往下飞落的的粒子效果。效果如下:



粒子编辑器的使用

现在网络中普遍使用的是 Particle Designer编辑器,不过它只支持在Mac系统下使用。对于像我这样的穷屌丝来说,怎么用的起!所以本文将介绍另一个粒子编辑器particle-editor的使用方法,它的功能同样强大,而且还支持在windows系统下使用。两种编辑器的用法大同小异,都可以把编辑出的粒子效果直接导出为plist文件。

下载地址

particle-editor的下载地址:

https://code.google.com/p/cocos2d-windows-particle-editor/downloads/detail?name=ParticleEditor%20V2.0.7z&can=2&q=

使用方法

particle-editor编辑器无需安装,下载解压后即可使用,它的编辑界面如下:



菜单栏的 Samples 下为用户提供了一些常用的粒子特效,如烟花、火、流星等,你可根据需要创建不同的粒子群。

属性讲解

编辑器的属性:

  • IsBackgroundMove 编辑器背景图片是否滚动,如果你觉得它动来动去的很烦人,你可以把它设置为False
  • IsSaveTextureImageData 是否把图片数据编码到文件里导出,这里我建议把它设置为False
  • Scale 编辑器画布缩放比例大小

编辑器的属性只影响编辑器内的预览效果,不对保存的.plist文件产生影响。而下面的所有属性都对应Cocos2dx中粒子系统的各属性,会直接影响生成的.plist文件。

主要属性:

  • Duration 发射器生存时间,即它可以发射粒子的时间,注意这个时间和粒子生存时间不同。单位秒,-1表示永远;粒子发射结束后可点击工具栏的播放按钮再次发射
  • EmissionRate 每秒喷发的粒子数目
  • IsAutoRemoveOnFinish 粒子结束时是否自动删除
  • Mode 喷发器模式,有重力模式(Gravity)和半径模式(Radius,也叫放射模式)两种
  • TotalParticles 场景中存在的最大粒子数目,往往与EmissionRate配合起来使用



半径模式:半径模式可以使粒子以圆圈方式旋转,它也可以创造螺旋效果让粒子急速前进或后退。下列各属性只在半径模式下起作用。

  • EndRadius 结束半径
  • EndRadiusVar 结束半径变化范围,即结束半径值的范围在 (EndRadius - EndRadiusVar) 和 (EndRadius + EndRadiusVar )之间,下面类似。
  • RotatePerSecond 粒子每秒围绕起始点的旋转角度
  • RotatePerSecondVar 粒子每秒围绕起始点的旋转角度变化范围
  • StartRadius 初始半径
  • StartRadius 初始半径变化范围

重力模式:顾名思义,重力模式模拟重力,可让粒子围绕一个中心点移近或移远,它的优点是非常动态,而且移动有规则。下列各属性只在重力模式下起作用。

  • GravityX 重力X
  • GravityY 重力Y
  • RadiaAccel 粒子径向加速度,即平行于重力方向的加速度
  • RadiaAccelVar 粒子径向加速度变化范围
  • Speed 速度
  • SpeedVar 速度变化范围
  • TangentialAccel 粒子切向加速度,即垂直于重力方向的加速度
  • TangentialAccelVar 粒子切向加速度变化范围

生命属性:

  • Life 粒子生命,即粒子的生存时间
  • LifeVar 粒子生命变化范围

大小属性:

  • EndSize 粒子结束时的大小,-1表示和初始大小一致
  • EndSize 粒子结束大小的变化范围
  • StartSize 粒子的初始大小
  • StartSize 粒子初始大小的变化范围

角度属性:

  • Angle 粒子角度
  • AngleVar 粒子角度变化范围

颜色属性:

  • EndColor 粒子结束颜色
  • EndColorVar 粒子结束颜色变化范围
  • StartColor 粒子初始颜色
  • StartColorVar 粒子初始颜色变化范围



如果你不想编辑出五颜六色的粒子效果,那应该把EndColorVar,StartColorVar尽量设置为(0, 0, 0, 0)。

位置属性:

  • PositionType 粒子位置类型,有自由模式(Free)、相对模式(Relative)和打组模式(Grouped)三种
  • PosVarX 发射器位置的横向变化范围,烟花出现在位置相对中心位置的像素偏移
  • PosVarY 发射器位置的纵向变化范围
  • SourcePositionX 发射器原始X坐标位置
  • SourcePositionY 发射器原始Y坐标位置

Free自由模式,相对于屏幕自由,不会随粒子节点移动而移动(可产生火焰、蒸汽等效果);Relative相对模式,相对于被绑定的Node静止,粒子发射器会随Node移动而移动,可用于制作移动角色身上的特效等等;Grouped打组模式是相对于发射点的,粒子随发射器移动而移动。

自旋属性:

  • EndSpin 粒子结束自旋角度
  • EndSpinVar 粒子结束自旋角度变化范围
  • StartSpin 粒子开始自旋角度
  • StartSpinVar 粒子开始自旋角度变化范围

纹理渲染属性:

  • DestBlendFunc 目的纹理的混合模式
  • SrcBlendFunc 源纹理的混合模式
  • TextureImageData 纹理数据
  • TexturePath 纹理路径,目前只可为Debug.win32目录下文件名



Cocos2dx使用OpenGL混合原理对图形进行渲染绘制。混合就是指把两种颜色混在一起,具体一点就是把某一像素位置原来的颜色和将要画上去的颜色,通过某种方式混在一起,从而实现特殊的效果。它是一种常用的技巧,通常可以用来实现半透明,你也可以通过不同的设置得到不同的混合结果,产生一些有趣或者奇怪的图象。



这里的源纹理和目标纹理跟绘制的顺序有关,先绘制的纹理是目标纹理,后绘制的纹理理所应当的就成为了源纹理。下面具体来看看混合模式的属性值。

DestBlendFunc和SrcBlendFunc的常用值为以下几种情况:

  • GL_ZERO: 表示使用0.0作为因子,实际上相当于不使用这种颜色参与混合运算。
  • GL_ONE: 表示使用1.0作为因子,实际上相当于完全的使用了这种颜色参与混合运算。
  • GL_SRC_ALPHA:表示使用源颜色的alpha值来作为因子。
  • GL_DST_ALPHA:表示使用目标颜色的alpha值来作为因子。
  • GL_ONE_MINUS_SRC_ALPHA:表示用1.0减去源颜色的alpha值来作为因子。
  • GL_ONE_MINUS_DST_ALPHA:表示用1.0减去目标颜色的alpha值来作为因子。

最常用的组合模式有两种:GL_ONE和GL_ONE_MINUS_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA和GL_SRC_ALPHA。

介绍完编辑器的各属性项以后,我们就可以根据需要编辑出不同效果的粒子效果了。下图是类似天天爱消除游戏中的“雪花”粒子特效。



资源图片 ,在使用粒子编辑器编辑粒子时,应放在粒子编辑器的ParticleEditor目录下;导出plist文件时,应把资源图片和plist文件放一起。该资源下载地址:https://github.com/renshan/btnTest/tree/master/snow-plist

注意:这里目的纹理的混合模式设置为GL_ONE,源纹理的混合模式设置为GL_ONE_MINUS_SRC_ALPHA。

cocos2dx中加载使用plist文件

只要编辑出粒子效果,那在cocos2d-x引擎中加载plist文件就非常简单了。使用以下代码来读取粒子效果:

    //贴背景图片
    Sprite* pSprite = Sprite::create("IMG1.jpg");
    pSprite->setPosition(Point(-20 , 0));
    pSprite->setAnchorPoint(Point(0, 0));
    this->addChild(pSprite, 0);

    //读取粒子效果
    ParticleSystem* m_emitter1 = ParticleSystemQuad::create("snow.plist");
    m_emitter1->retain();
    ParticleBatchNode *batch = ParticleBatchNode::createWithTexture(m_emitter1->getTexture());
    batch->addChild(m_emitter1);
    addChild(batch, 10);
    m_emitter1->release();

    //或读取粒子效果
    //ParticleSystem* m_emitter1 = ParticleSystemQuad::create("snow.plist");
    //addChild(m_emitter1);

这里ParticleBatchNode可以引用且只可以引用1个texture(一个图片文件,一个texture图集),增加到SpriteBatchNode中的ParticleSystem都是在OpenGL ES调用绘图函数时绘制的。

如果ParticleSystem没有增加到ParticleBatchNode中,OpenGL ES会调用每个粒子系统的绘图函数,这样做效率会比较低。

好了,基本上就这些,比想象中简单多了吧,点此可下载工程。

使用Cocos2d-x实现微信“天天爱消除”炫耀button特效

原创: @涵紫。首发于泰然,转载请著名出处。

引言

Cocos2d-x引擎中有很多Action,这样可以方便的让开发者调用相应的Action去完成一些动作,例如:移动,弹跳,淡入淡出等。可在实际的开发过程中,由于游戏的需要,显然地,引擎自带的Action是完全不够用的,很多时候都需要我们自己去写。今天我就来分享一个让精灵和粒子绕着圆角矩形运动的实例,细讲一下实现过程(仅凭个人想法实现,如有其他更好的方法,欢迎交流分享)。

效果

该实例类似天天爱消除等系列游戏中的按钮特效:



没图片资源,将就看吧。

实现方法

刚开始本来考虑自己定义一条圆角矩形的路径,即建一个自己的动作模块,让精灵和粒子按照自己的定义的动作来运动来着,就像MoveTo/MoveBy、BezierTo/BezierBy等Action一样。但是后来发现好难啊,因为根本没有函数可以来定义圆角矩形(至少我不知道),所以一番纠结后,果断放弃了这种设想。

另辟蹊径,不是说cocos2d-x引擎提供很多的Action吗,那我们就来“拼”一个圆角矩形的Action啊!要“拼”这个Action,我觉得很有必要了解清楚Cocos2d-x中的各个Action,引擎中常用的Action有:

  • Sequence 按顺序执行一系列的动作;
  • Repeat 重复执行一个动作n次;
  • RepeatForever 永远重复执行某动作;
  • RotateTo / RotateBy 旋转;
  • MoveTo / MoveBy 移动;
  • JumpTo / JumpBy 跳跃;
  • BezierTo / BezierBy 贝塞尔曲线;
  • ScaleTo / ScaleBy 缩放;
  • FadeIn / FadeOut / FadeTo 淡入淡出;
  • TintTo / CCTintBy 染色;
  • Animate 动画;
  • 等等。

了解更多可查看官网信息: http://www.cocos2d-x.org/reference/native-cpp/V3.0alpha0/db/d61/classcocos2d11_action.html

其中以To结尾的动作和以By结尾的动作的区别在于:

To是设置Node(引擎中所以物体的基类)到指定坐标位置,而By则是设置Node到相对的坐标位置。例如:一个Sprite的坐标是(100,200),XXTo(1.0f, ccp(100, 100))是在1秒内运动到点(100, 100)处,无论节点之前的坐标在哪,它最终的位置坐标都是点(100,100);XXBy(1.0f, ccp(100, 100))则是表示1秒内向x轴方向运动100个单位,向y轴方向运动100个单位,它是以自身节点为参照位置,运动了(100,100)个单位。

理清Action后回归到正题,根据圆角矩形的特征,这里我们可以把圆角矩形分成四段:左右两半弧和上下两直线,如下图:



沿直线的运动的2、4段我们可以用MoveTo、MoveBy,而沿着左右两边的曲线运动呢?曲线!首先想到的应该是贝塞尔曲线吧,先来了解一下贝塞尔曲线。

贝赛尔曲线的每一个顶点都有两个控制点,用于控制在该顶点两侧的曲线的弧度。它是应用于二维图形应用程序的数学曲线。曲线的定义有四个点:起始点、终止点(也称锚点)以及两个相互分离的中间点。滑动两个中间点,贝塞尔曲线的形状会发生变化。

在引擎中是这样子定义一个贝塞尔曲线的配置信息的:

typedef struct _ccBezierConfig {
	//! end position of the bezier
	Point endPosition;

	//! Bezier control point 1
	Point controlPoint_1;

	//! Bezier control point 2
	Point controlPoint_2;

} ccBezierConfig;

描述结构体中三个点分别是:曲线的目的结束点,控制点1和控制点2, Bezier的起始点则是它当前的位置坐标。贝塞尔曲线的两个控制点的位置将决定曲线的形状,不清楚的可以在Photoshop等有贝塞尔曲线的软件中去调。以圆角矩形左边的曲线为例,我调了一条曲线,如下图所示:



从图中可以看到,只要Point1与起始点连成的直线和Point2与结束点连成的直线平行 && 两个控制点都在以起点和终点为连线的同一个面 && 两个控制点的连线与起始点终点的连线平行时,就可以确定一条相对标准的曲线,可以近似圆角矩形的圆角部分。左右移动Point1和Point2的位置可调节这条曲线的形状,如图:



理清思路以后,上代码“画”上图的贝塞尔曲线:

	ccBezierConfig bezier;
	bezier.controlPoint_1 = Point(-controlX, 0);        //控制点1
	bezier.controlPoint_2 = Point(-controlX, controlY);     //控制点2
	bezier.endPosition = Point(0, controlY);            //目的地(终点)
	auto bezierBy = BezierBy::create(1.0f, bezier);//创建动作
	node->runAction(bezierBy);                  //让节点按bezierBy路径运动



注意,使用BezierBy时,节点始终把自己的运动初始位置看做(0, 0),与它的实际场景位置无关,ccBezierConfig中的点都是相对坐标点,如果使用BezierTo,ccBezierConfig的点就都是绝对坐标点,曲线的起始点也将被认作为实际场景位置坐标,而非(0, 0),因此也将不能达到上图的效果。

右边的贝塞尔曲线类似,直线的运动同理用MoveBy,而不用MoveTo。移动的代码很简单,如:auto move = MoveBy::create(1.0f, Point(w, 0)); //向右移动W个单位。

这样圆角矩形的四部分都能用相应的Action来实现了,接下来该完成的就是把它们按顺序的串连在一起并重复的执行下去。那就要用到Sequenc(按顺序执行一系列的动作) 和RepeatForever(重复执行动作)了。下面就是抽象出来的方法,返回值为一个能绕圆角矩形运动的循环动作:

RepeatForever* HelloWorld::MyPathFun(float controlX, float controlY, float w)
{
	ccBezierConfig bezier1;
	bezier1.controlPoint_1 = Point(-controlX, 0);
	bezier1.controlPoint_2 = Point(-controlX, controlY);
	bezier1.endPosition = Point(0, controlY);
	auto bezierBy1 = BezierBy::create(0.8f, bezier1);

	auto move1 = MoveBy::create(0.8f, Point(w, 0));

	ccBezierConfig bezier2;
	bezier2.controlPoint_1 = Point(controlX, 0);
	bezier2.controlPoint_2 = Point(controlX, -controlY);
	bezier2.endPosition = Point(0, -controlY);
	auto bezierBy2 = BezierBy::create(0.8f, bezier2);
	auto move2 = MoveBy::create(0.8f, Point(-w, 0));
	auto path = RepeatForever::create(Sequence::create(bezierBy1, move1, bezierBy2, move2, NULL));
	return path;
}

函数MyPathFun()的参数分别是控制点1的X分量、控制点2的Y分量(圆角矩形的高)、直线移动的x分量,如上图。因为参数controlX和w都不是确定的值,所以传参时要特别注意,要根据按钮的形状来调节这两个参数。

接下来只需要让节点runAction这个动作就可以了,下面利用粒子系统做一条尾巴。关于粒子特效的介绍大家可以参考泰然网的一篇文章,地址: http://www.tairan.com/archives/3460

ParticleSystem* HelloWorld::particleInit()
{
	auto _emitter = new ParticleSystemQuad();
	_emitter->initWithTotalParticles(50);
	addChild(_emitter, 10);
	_emitter->setTexture(Director::getInstance()->getTextureCache()->addImage("point.png"));
	_emitter->setAnchorPoint(Point(0, 0));
	// duration
	_emitter->setDuration(ParticleSystem::DURATION_INFINITY);

	// radius mode
	_emitter->setEmitterMode(ParticleSystem::Mode::RADIUS);

	// radius mode: start and end radius in pixels
	_emitter->setStartRadius(4);
	_emitter->setStartRadiusVar(1);
	_emitter->setEndRadius(ParticleSystem::START_RADIUS_EQUAL_TO_END_RADIUS);
	_emitter->setEndRadiusVar(0);

	// radius mode: degrees per second
	_emitter->setRotatePerSecond(100);
	_emitter->setRotatePerSecondVar(0);

	// angle
	_emitter->setAngle(90);
	_emitter->setAngleVar(0);

	// emitter position
	auto size = Director::getInstance()->getWinSize();
	_emitter->setPosVar(Point::ZERO);

	// life of particles
	_emitter->setLife(0.5);
	_emitter->setLifeVar(0);

	// spin of particles
	_emitter->setStartSpin(0);
	_emitter->setStartSpinVar(0);
	_emitter->setEndSpin(0);
	_emitter->setEndSpinVar(0);

	// color of particles
	Color4F startColor(0.0f, 0.8f, 0.9f, 1.0f);
	_emitter->setStartColor(startColor);

	Color4F startColorVar(0, 0, 0, 1.0f);
	_emitter->setStartColorVar(startColorVar);

	Color4F endColor(1.0f, 1.0f, 1.0f, 0.1f);
	_emitter->setEndColor(endColor);

	Color4F endColorVar(0, 0, 0, 0.1f);
	_emitter->setEndColorVar(endColorVar);
	Color4F setStartColor(Color4F(Color4B(50, 50, 50, 50)));
	Color4F setEndColor(Color4F(Color4B(0, 0, 0, 0)));
	// size, in pixels
	_emitter->setStartSize(20);
	_emitter->setStartSizeVar(1);
	_emitter->setEndSize(0);

	// emits per second
	_emitter->setEmissionRate(_emitter->getTotalParticles() / _emitter->getLife());

	// additive
	_emitter->setBlendAdditive(false);

	return _emitter;
}

这里也可以利用粒子特效制作工具来编辑好看的粒子,然后通过plist文件加载粒子。
添加按钮btnSprite(这里按钮的描点要设为(0,0)),星星starSprite,尾巴_emitter后,设置星星和尾巴的位置与动作:

	starSprite->setPosition(Point(btnSprite->getPosition().x + btnSprite->getContentSize().height / 2 - 4, btnSprite->getPosition().y));//设置星星的坐标
	_emitter->setPosition(Point(btnSprite->getPosition().x + btnSprite->getContentSize().height / 2 - 4, btnSprite->getPosition().y + 3));//设置尾巴粒子发射器的坐标

	float X = btnSprite->getContentSize().height / 2;
	auto path = MyPathFun(X+10, btnSprite->getContentSize().height, btnSprite->getContentSize().width - X * 2 ); //根据按钮的形状调节按钮的动作路径

	starSprite->runAction(path);
	_emitter->runAction(path->clone());

这里把星星和尾巴的起点坐标设为上图的originPoint点,因为描点的原因,星星starSprite和尾巴_emitter的位置要做一定的微调。



该方法实用于任意圆角矩形,同时适用于矩形,只要把controlX设置为零,W设置为矩形宽就都实现,即:MyPathFun(0, btnSprite2->getContentSize().height, btnSprite2->getContentSize().width );



工程下载地址:https://github.com/renshan/btnTest/tree/master/Test-btn

CocosBuilder 多分辨率基础

最近两个项目大量使用了CocosBuilder, 对于开发效率提高是巨大的. 一直计划写一篇博客谈谈CocosBuilder的多分辨率问题, 懒病加上一些疙疙瘩瘩的小事情, 拖延了一个多月, 才终于下定决心要尽快完成这篇博客.

在这篇文章中, 假定你比较熟悉CocosBuilder, 如果您还不是很熟悉CocosBuilder, 推荐您看下我的另外一篇文章. 从零开始学习CocosBuilder 我还是小菜鸟一个, 难免会有很多错误, 还望各位看客不吝赐教.

版本:

最近几次Cocos2d-x和CocosBuilder(以下简写为2dx和ccb)都是联合发布的, 使用联合发布的版本会减少不兼容的可能.

基本概念

我觉得在多分辨率中重要的概念就是位置, 大小, 节点关系, 可以通过位置, 大小, 节点关系, 锚点等的合理组合, 最终达到理想的界面. 当然, 这需要ccb的使用者更多的思考. ^_-

位置



我们可以看到ccb中位置共有6种设置. 其中前四种设置方式代表了当前节点相对于其父节点的一个顶点的绝对位置.



如上图所示, 我们把Click me 按钮, 放在了距离其父节点右上角各50px. 这种位置的设置方式, 一般在节点需要放在父节点一个角上时很有用.



第5种设置方式表示当前节点的坐标由其父节点大小(宽width, 高height)的百分比组成, 其中父节点的左下角为原点. 如上图所示一个节点的父节点大小为200px*100px, 当前节点设置为(70%, 50%),那么当前节点距离其父节点左下角就应该是(140, 50). 百分比设置是位置设置中最常用的方式, 只有当百分比设置不适合时才去考虑其他设置方式.



第6种设置方式其实就是第1种设置方式的x,y值分别乘以一个全局缩放系数. 我们接下来就讲这个全局缩放系数, 这里先假设iphone下为1, iphone retina下为2. 如上图所示, 当前节点在iphone下距离其父节点左下角(50*1, 50*1), 在iphone retina下则就是(50*2, 50*2).

全局缩放系数

如果我们需要在屏幕上放一个CCLabelTTF, 字体大小设置为48, 分别放在480*320分辨率的iphone上和960*640分辨率的iphone retina上, 那么在iphone retina上显示会显得特别小. 这个时候我们就需要为游戏设置一个全局缩放系数, iphone下为1, iphone retina下为2, 那么ccb中设置字体大小为48, 在游戏中iphone上字体大小为48*1=48, iphone retina中字体大小为48*2=96.

你可以在设置位置, 内容大小, 缩放, 字体大小的时候, 找到这个选项. 都是一样的道理, 对应的数据都需要乘以全局缩放系数.

默认iphone(480*320)的全局缩放系数是1, iPad/iphone HD是2, iPad HD就是4了. 当然你可以自己设置一套全局缩放系数.

内容大小



只有如CCLayer, CCNode等几个节点可以设置内容大小. 可以有6个选项.

    1. 绝对大小
    2. 百分比相对大小, 相对于父节点的大小
    3. 相对父节点大小, 宽高设置为(100, 100), 那么该节点比其父节点宽高各小100px. 如果设置为(0, 0), 那么该节点就和父节点一样大小.
    4. 宽度百分比, 高度绝对大小.
    5. 宽度绝对大小, 高度百分比.
    6. 绝对大小, 会被乘以全局缩放系数.

基本操作

多分辨率的文档



从菜单中选择Edit Resolutions..., 打开编辑多分辨率对话框.



我们可以看到当前为iphone设置了(480*320)的分辨率, Scale这个选项就是我们上面提到的全局缩放系数, 值为1. 为iPad设置了(1024*768)的分辨率, 全局缩放系数为2.

我们可以点击Add Predefined Resolution, 来添加ccb预定义的分辨率. 比如添加一个iphone5的分辨率. 哦, 什么, 分辨率是568*320???? 需要注意的是,CocosBuilder的工作是基于点(Point)的,而不是像素的。.

Resolution Extension和resources-auto(插播)

ccb中有一个resources-auto的重要概念, 你可以只提供一套资源, ccb通过全局缩放系数, 来为你自动生成不同分辨率的图片. 假设你为iPad retina(全局缩放系数为4)设计了一张100*100的图片.那么iphone会得到一张25*25的图片. iPad/iphone HD会得到一张50*50的图片.

说到资源解决方案, 首先要决定你想要支持的最大分辨率. 假设需要完美支持iPad HD, 就按2048*1536来做资源, 此时全局缩放系数为4. 把图片资源放置到resources-auto目录下, 那么ccb会帮我们自动缩放出其他需要的分辨率. 嗯, 还需要像下图一样设置, 告诉ccb需要从4x来设置. 从菜单的Publish Settings...打开.



如果是和背景无关的图片, 一般来讲自动缩放就可以胜任了.

如果需要在不同的分辨率下使用不同的图片, 比如一张背景图, iphone上使用960*640的图片, iPad上使用一张1024*768的图片. 那么可以在资源目录创建resources-iphone, resources-ipad目录, 然后在resources-iphone放置一张960*640分辨率的图片demo.png, 在resources-ipad目录下放置一张1024*768分辨率的图片demo.png. 要注意需要保持其文件名相同.

我们在ccb的工程目录下仍然只看到了一份demo.png, 不要着急, ccb会根据我们选用的不同的分辨率来给我们呈现不同的图片.

ok, 插播结束. 继续说我们的多分辨率文档.

其实, 我们可以给文档添加一个iphone hd, 以及正常iphone5尺寸的文档. 比较遗憾的是ccb不支持编辑Resolution Extension的列表. 而ipad和iphonehd的设置是在一起的, 并且也没有iphone5的Resolution可以设置. 所以我希望你没有需要必须要区分iphonehd/iphone5的需求, 在ccb里面是无法区分的. 令人欣慰的是, 我们还是可以在游戏里面区分他们.-_=

给文档添加的分辨率是可以自定义的, 名字, 宽, 高, 全局缩放系数. 所以我们还是可以创建全尺寸的iphonehd/iphone5的分辨率.



然后, 我们可以在ccb的菜单中找到切换多分辨率的选项, 这样就可以很方便的预览在各个分辨率下的效果. 注意他们的快捷键哦, 很有用哦.推荐在使用的时候, 经常在几个分辨率下切换查看效果是否正确理想.



做一个ccb工程

是时候做一个ccb的工程了, 不过我有点羞涩要给你展示我做的工程. 因为它实在太丑了, 还是来一张截图吧, 希望没有吓到你.-_=



代码一下

由于上面提到的一些限制, 只能基本上做到在ccb中做的, 就是我们在游戏中看到的.

ccb自带的帮助中Setting scale and design size, 需要做一些改进. 下面是我的代码.

 

 //set the correct resource for CocosBuilder
    {
        CCSize sizeIphone = CCSizeMake(480, 320);
        CCSize sizeIphoneHD = CCSizeMake(960, 640);
        CCSize sizeIphone5 = CCSizeMake(1136, 640);
        CCSize sizeIpad = CCSizeMake(1024, 768);
        CCSize sizeIpadHD = CCSizeMake(2048, 1536);

        CCSize designSize = sizeIphoneHD;
        CCSize resourceSize = sizeIphoneHD;
        CCSize screenSize = CCEGLView::sharedOpenGLView()->getFrameSize();

        std::vector<std::string> searchPaths;
        std::vector<std::string> resDirOrders;

        TargetPlatform platform = CCApplication::sharedApplication()->getTargetPlatform();
        if (platform == kTargetIphone || platform == kTargetIpad)
        {
            CCFileUtils::sharedFileUtils()->setSearchPaths(searchPaths);

            if (screenSize.width > 768)
            {
                resourceSize = sizeIpadHD;
                designSize = sizeIpadHD;
                resDirOrders.push_back("resources-ipadhd");

                CCBReader::setResolutionScale(4.0f);
            } else if (screenSize.width > 640) {
                resourceSize = sizeIpad;
                designSize = resourceSize;
                resDirOrders.push_back("resources-ipad");
                resDirOrders.push_back("resources-iphonehd");

                CCBReader::setResolutionScale(2.0f);
            } else if (screenSize.width > 480) {
                if (screenSize.height > 960) {
                    designSize = sizeIphone5;
                }
                else {
                    designSize = sizeIphoneHD;
                }
                resourceSize = sizeIphoneHD;

                CCBReader::setResolutionScale(2.0f);

                resDirOrders.push_back("resources-iphonehd");
            } else {
                CCBReader::setResolutionScale(1.0f);

                designSize = sizeIphone;
                resourceSize = sizeIphone;

                resDirOrders.push_back("resources-iphone");
            }

            CCFileUtils::sharedFileUtils()->setSearchResolutionsOrder(resDirOrders);
        }

        pDirector->setContentScaleFactor(resourceSize.width / designSize.width);
        CCEGLView::sharedOpenGLView()->setDesignResolutionSize(
                                                               designSize.width, designSize.height,
                                                               kResolutionExactFit);
    }

    CCNodeLoaderLibrary *lib = CCNodeLoaderLibrary::newDefaultCCNodeLoaderLibrary();

    CCBReader *reader = new CCBReader(lib);

    CCScene *scene = reader->createSceneWithNodeGraphFromFile("MainScene.ccbi");

    pDirector->runWithScene(scene);

 这里只支持了iOS, 如果需要支持Android的话, 可以挑选几个需要的分辨率, 邻近的分辨率坐下拉伸等策略.

运行下代码, 可以看下效果. 收工.

工程下载: http://pan.baidu.com/share/link?shareid=3612867199&uk=2281999082

推荐看下bilt的两篇博客: http://blog.justbilt.com/569/ http://blog.justbilt.com/579/ 里面还罗列了数片前辈们关于多分辨率的文章, 我学习的过程中也受益匪浅.
一并致谢.

如何使用 CocoStudio 场景编辑器制作《魔卡幻想》主界面

./images/1.png



前面的文章 《使用 CocoStudio 创建 Cocos2d-x 序列帧和骨骼动画》《如何使用 CocoStudio UI 编辑器实现《乱斗堂》设置界面》,其中介绍了如何使用动画编辑器创建动画与使用 UI 编辑器创建游戏配置界面,而本文将集两者之大成,使用 CocoStudio 场景编辑器来创建游戏场景,其中包含游戏 UI 与动画,来定制一个游戏主界面。

2 使用 CocoStudio 完成《魔卡幻想》场景编辑



对于环境的搭建使用,请参考之前的文章,或者实时关注 官方 最新版本的安装使用方法。

2.1 UI 编辑器制作游戏主界面

  1. 创建项目(项目名称:MysticalCard),并导入项目 UI 资源,添加 一图片框设定背景图片。注意在工具拦设置 “画布” 的大小(如果需要),这将决定着你的设计分辨率,在运行时还需要注意屏幕的适配问题,如放大缩小,位置偏移等,视具体情况而定。./images/2.png
  2. 为界面添加 UI 元素,图片框等,请根据自己的需要定制./images/3.png
  3. 实践过程中的注意事项
    • 添加控件时注意必要的属性设置
    • 控件的命名规范,这有助于我们今后在后台编写代码获取界面元素
    • 可交互的控件的 “可交互属性” 开启

2.2 建立关键帧动画



除了主界面一些必要的 UI 控件,我们还需要一个 “对话框指示” 的动画效果。这是一个帧动画。

  1. 准备工作。
    • 打开 CocoStudio ,启动 动画编辑器
    • 创建一个新的项目,后导入资源(在 “资源窗口” 中,点击 “文件” 或者 “文件夹” 标示,添加需要的素材资源)
    • 在 “资源窗口中” 点击关键帧动画的守帧图片,拖动至 “渲染窗口”

    如下图所示:

    ./images/4.png
  2. 将第一关键帧拖动至 “渲染窗口” 中心。 可以使用工具栏,快速定位至窗口中心,使图片显示在正中间,可以让动画更好的定位。./images/5.png
  3. 添加其它帧图片,注意,我们需要选中剩余图片,然后 “拖动” 到 “对象结构” 视图中的 “第一关键帧” 所在的对象,如下图所示。
    关键帧 与 骨骼动画操作区别:在使用骨骼动画的时候,我们将骨骼中的各部分元素,直接拖动添加到 “渲染窗口”,以摆放各骨骼的位置关系,而在 “对象结构” 视图中则表现为,一个列表,标示着每一块骨骼对象,不同帧所改变的是各个骨骼对象的位置,以达到骨骼动画效果。
    而在关键帧动画中,它的对象结构只有一个,而在每一帧修改的不是其位置,而是其显示内容。这是两者之间的区别,那操作方式也有所不同。而对于它们所导出的 资源 则是相同,用法也是同样。./images/6.png
  4. 剩余帧添加之后,我们看见在 “关键帧” 视图中,已经有了多帧动画,可以播放动画,查看效果,并可以通过修改 “速率” 来控制动画的播放速度。./images/7.png
  5. 导出动画资源,导出的资源文件可以被我们在 Cocos2d-x 中以代码的方式直接加载,然后播放其动画,也可以作为 场景编辑器中的一个元素,被添加在场景编辑器里,后面的内容就是使用 场景编辑器来加载一个动画的方式。

2.3 场景编辑器的 资源“整合”



使用 CocoStudio 可以很好的帮助游戏开发过程中 分工合作。动画编辑器 和 UI 编辑器可以由多个人进行编辑,最后再由一个人统合资源,这也就是场景编辑器的优点了,它除了能支持 CocoStudio 本身所自带的动画编辑器,UI 编辑器,它还能支持,Tmx 地图资源,粒子编辑器的粒子效果资源,声音资源等~并且不断扩展中。以下将给出如何在 场景编辑器整合我们之前所创建的动画与 UI 界面的资源,来实现我们一个场景的运行效果。它的步骤如下:

  1. 启动场景编辑器,新建一个场景项目。并设置 “画布” 大小。画布大小要适量。
  2. 我们拖动一个 UI 控件到画布之上,它作为我们之前导出的 UI 资源的承载。./images/8.png
  3. 我们将之前的 UI 编辑器所导出的资源,导入到当前场景项目中来,导入方式与 UI 编辑器导入资源方式同样,如下图:./images/9.png
  4. 为 UI 控件的 “文件” 属性赋值:我们在资源视图中找到 UI 编辑器所导出的 UI 资源,其目录下包含 json 文件资源(如这里的 “MysticalCard_1.json”),将其拖动到 UI 控件的文件 属性中去,如下图所示:./images/11.png
  5. 前面的步骤已经将 UI 资源导入场景之内,现在需要添加之前所创建的动画资源。
    • 我们以相同的方式导入动画编辑器所导出的动画资源文件。
    • 拖动一个骨骼控件至场景界面,如下图所示。
    • 为骨骼控件的 “文件” 属性赋值,其值为 动画资源中的 ExportJson(或者 json 文件,这取决于动画资源的导出方式) 文件。

    ./images/12.png
  6. 运行效果:当我们建立好场景之后,可以通过工具栏运行按钮,点击查看效果,这意味着你不用将所有的资源文件,手动以代码的方式添加到 Cocos2d-x 中,便能看到效果。./images/13.png在运行效果中,所有的控件都是可操作的,如下图,但这里只有点击效果,如果需要实现其逻辑,那么现在需要将其加载到 Cocos2d-x 项目中,编写后台代码实现。./images/14.png

3 在 Cocos2d-x 中加载场景资源 并运行之

3.1 加载场景内容



前面那么多步骤,使用 CocoStudio 来创建了 UI,动画,还有一个场景,而要将其运行在实际的项目中,就非常的简单与方便了,只需几行代码,就能够将其加载到项目中去,当然在这之前我们需要将场景编辑器的资源(场景项目目录中 “Resources” 目录,其中将包含一个 json 文件)复制到项目资源目录中去:

// 加载场景资源
CCNode *pNode = CCJsonReader::sharedJsonReader()->createNodeWithJsonFile("McScene.json");
this->addChild(pNode);

通过 CCJsonReader 来读取解析 json,从而获得场景中的节点内容,直接添加到当前的场景就能运行。


3.2 在场景中播放动画



默认加载的场景资源 动画 组件是没有播放的,需要手动获取动画组件对象,然后调用其播放方法,当然这个步骤也是非常简单的:

// pNode 为 之前所获取的场景资源根节点,通过此节点获取到动画对象,获取方式根据在场景编辑其中设置的层次关系而定
CCComRender *pLoadRender = (CCComRender*)(pNode->getChildByTag(1)->getChildByTag(1)->getComponent("CCArmature"));
CCArmature* armLoad = (CCArmature*)(pLoadRender->getRender());

// 播放动画
armLoad->getAnimation()->playByIndex(0);

./images/15.png

3.3 对场景的一些编码说明



使用 CocoStudio 就是为了帮助我们快速的建立 UI 原型,然后通过编码可以获取到里面的任意一个元素对象,并修改其属性值,调用其方法,正如上面所示播放一个动画的方法同样。其步骤如下:

  • 通过 CCJsonReader 类读取 json 文件,将会自动解析构建对象,返回一个节点 CCNode
  • 任何元素都能通过这个 CCNode 节点,获取到,它其实就是一个树,所不同的是层级关系(树节点的位置)
  • 找到需要对象所在的 “树枝”,后通过 getComponent 方法获取 所在的 CCComRender 对象
  • 通过 CCComRender 的 getRender 方法获取最终对象
  • 得到我们所需要的具体对象之后,我们就能够对齐进行草,设置属性,调用方法等,诸如此类

本文中所有的源码示例 和 CocoStudio 项目工程都可以在 这里 查看。

?>