出来行，迟早是要还的!篇二学会使用cocostudio的动画编辑器基础

本文是篇很新手的博客，5分钟。

主要是序列帧动画的编辑，骨骼动画我没设计过，仅仅是检查了一下

在正常的游戏行业开发工作流程中，我们作为编码人员，铁三角之一，要学会和策划、美术沟通。所以我们需要去接触一些边缘事务，比如触控发布的cocostudio，已然成为行业必备工具集。这个集场景、UI、动作和数据与一身的编辑器在2014年下半开始崭露头角，随着Adobe伴随页游衰退的脚步退出中国市场，大家开始正眼看这个曾经各种bug的工具箱。编码人员要去堆UI，我不想去吐槽行业的不良习惯，我只能说我要尽量找一个有UI设计师的公司，这样子，他根据策划和美术提供的资源区完成UI的设计和堆砌，我再经手直接实现编码和功能响应，避免“左移一点，呃~，不行，还是还原吧”的尴尬。要不然浪费的是两个人的劳动时间去完成一份工作，谈何“升职加薪迈向人生巅峰”。所以今天不谈论ui和和场景，虽然它们能节省硬编码的时间——但boss还是会找到更多的UI让你去堆。因为既然有UI要堆，你们游戏的主玩法是UI玩法，简单点就是UI游戏，主要靠美术和策划，程序是个打杂的。别这么悲观了，至少这样的工作轻松，适合养生，然后可以泡美术妹子或数值策划妹子（真奇怪，做数值策划的女生多一些。。）数据编辑器是策划专用，目前我也不熟，不过说真的，都会Excel和json、xml啦，cocostudio的数据编辑器沦为转化工具。所以我们继续回来无聊地点着cocostudio中的动画演示吧。

还是笨木头的那一个系列的动画，算不算侵权啊？还是要换回cocos的自带的？不必了吧，有空我要去认识一下笨木头，然后请他吃饭之类比较好。

如果美术给的动画资源是PS直接导出的cocos2dx （XML）plist文件，我们程序可以直接打开导入并播放即可，进行检查验收，最好检查出点错误，这样子才能有理由和美术妹子聊天。

如果美术是个新手或工具兼容性问题，仅仅是一堆png切图，那就慢慢来。

步骤1：检查美术的切图资源和命名，强烈要求采用 XXX_%d.png的格式，要不然不进行验收。

步骤2：打开cocostudio的动画编辑器，新建工程（默认为形体模式）。

步骤3：右方的resource目录下导入资源目录，左移鼠标，在对象结构工作区右键添加薪节点

步骤4：点击左上角的形体模式切换成动画模式，在Layer1（上图新建的节点名）中把resource中的图片拖动进来或者先选择png点击上面的添加按钮。这样子png就在帧序列中出现了。

步骤5：前后拖动序列帧排列为正确顺序（这个时候就知道%d形式的命名是多么有效的，况且在编码中一般可以减少单帧读取命名出错的麻烦）。

步骤6：检查动画的播放间隔，这个一定要策划或美术给出明确的数字，绝对不要自己去尝试。等你明白为什么的时候就晚了。检查动画的流畅性，确保ok的情况下在验收工作流程签名确认吧——非公有美术组的小公司哪来签名，你不需要自己骗自己啦，大公司每个工作室一般有独立的美术部门，很多时候是口头交流。在美术外包的情况下才需要签名或者项目在维护阶段身边的美术和策划是兼任工作，你的需求来自运营部门的时候也是需要签名的。

步骤7：导出为plist文件和png，在我们的项目中应用就行了

当然最好这些步骤留给特效制作的美术人员完成，你只要验收就行了。

首先要知道骨骼模型通过骨骼节点和蒙皮，实现资源复用减少图片资源重复。

至于骨骼模型，编码人员的工作真心很简单。原理是通过不同节点（layer%d，默认命名）来展示一个动画的不同形态。在一个完整的动作中，隐藏不必要的layer%d中的模型，通过时间差来控制节点的展示顺序即可。总资源很少，同一张png但是在不同的layer中复用，并设计为不同的位置（如何设计为不同的位置？），然后构造成一个整体。（我还不懂骨骼的创建和设计，就不吹水啦）。

还是弄点我们工作的：

#include <spine/spine-cocos2dx.h>

#include "spine/spine.h"

using namespace spine;

创建：

auto skeletonNode = newSkeletonAnimation("enemy.json","enemy.atlas");




//设置动作过渡混合，只有完成了这个设置才不会出现动作切换跳帧的情况

skeletonNode->setMix("walk","attack",0.2f);
skeletonNode->setMix("attack","walk",0.4f);


//设置初始动画，就跟动画帧设置初始精灵frame一样

skeletonNode->setAnimation(0,monospace!important; min-height:inherit!important; color:blue!important; background:none!important">"walk"true); //true 循环标志

//根据需要播放新动画的话可以使用

skeletonNode->addAnimation(0,monospace!important; min-height:inherit!important; color:blue!important; background:none!important">"attack"false)

如果希望在移动中攻击？怎么办？先addAnimation(0,monospace!important; min-height:inherit!important; color:blue!important; background:none!important">"walk") 然后在按钮操作事件回调中增加setAnimation(0,attack"false);这样子就可以跑动状态攻击，在完成攻击动作时再次回调"walk"true);即可。




另外把一篇博客搬过来：http://www.th7.cn/Program/cp/201407/228358.shtml 基本的骨骼原理 最好看原文，我截取了理论段。

GPU出现后，CPU的问题早已不像以前那么突出，一些新的手段和技术也可以被应用进来了。
骨骼动画相对于帧动画而言，更加灵活多变，但同时，骨骼动画需要更多的计算量，因此骨骼动画往往应用在需要着重体现动作细节的模型中。

骨骼动画技术后于帧动画技术出现。
最开始，骨骼动画仅用于非实时渲染的建模领域，如3DMax这类建模软件之中，以方便美工的建模。
后来，CPU从渲染中解放后，骨骼动画才用于实时渲染的游戏中。

骨骼动画原理

骨骼动画的想法来源于人体骨骼。
例如说，人的上肢所有肌肉和皮肤都受上肢骨胳的影响，而人的踝关节则分别承受小腿骨胳和脚骨的影响。
根据这个我们可以将骨骼动画理解为两个概念： 骨骼：用以控制蒙皮的一种抽象的概念，如人体骨骼控制皮肤。 蒙皮：被骨骼控制、并显示在外的因素，如人体的皮肤被骨骼所影响。

骨骼动画原理：蒙皮（SKINMESH）

在最终的渲染结果中，蒙皮将完全显示出来，蒙皮实际上就是顶点、法线和纹理坐标等将被渲染的元素。
而其中，最关键的当然是顶点，顶点将直接被骨头牵扯运动，因而使得整个模型呈现骨骼所决定的样子。

骨骼动画原理：骨骼（SKELETON）

骨骼是一种抽象的概念，在最终的渲染结果中，它不可见。
类如人体骨骼、骨骼是若干骨头（Bone）成树状的集合体，而每块骨头又分别与若干数量的蒙皮顶点关联。
当骨头运动的时候，与之关联的所有蒙皮顶点也会受骨骼的影响而运动。

骨头与蒙皮顶点的关联需要考虑到每块骨头对蒙皮顶点的影响。 尽管大部分情况下，一个顶点将仅仅被一个骨头的影响，但是关节处的顶点往往被多根骨头影响，例如踝关节，可能会分别受小腿骨50％和脚骨50％的影响，这种影响叫作权重（Weight）。
在这种情况下，我们称踝关节的这些顶点，受小腿骨影响的权重是50％，受脚骨影响的权重也是50％。

而在cocos2dx中常用的骨骼动画编辑器就是cocosStudio和spine了。

但是就我的感受，2款编辑器中spine可以说是完爆ccs的骨骼动画部分，不仅因为spine容易上手，并且它提供了mesh，通常来说一张纹理只有4个顶点，左下右下左上右上，但是有了mesh，我们可以抓取这个图片，并设置大量的顶点给它，之后就能通过对顶点的设置完成图片的拉伸形变，比如乳摇功能。

Q群讨论：

【话唠】[C++]Jingz蓝玉2014/10/2716:42:35

诺亚，骨骼动画是不是图片+json？

【传说】cocos2dx诺亚
是
【传说】cocos2dx诺亚
2014/10/2716:43:31

骨骼有json文件提供
【传说】cocos2dx诺亚
2014/10/2716:43:37

图片有plist和png提供

总结：cocostudio自带的文件导出来，然后是个altas后缀，记录所有骨骼的图形基础信息，json则是编辑好的骨骼动画信息，在程序中调用的对应得是json里面的动作