Cocos2d-x 3.0final 终结者系列教程22Cocos Studio动画编辑器的帧动画和骨骼动画详解

最近闭关修炼,准备第二季的视频,在网上找了一堆不错的代码,第二季视频想录制Cocos2d-x项目源码解析、移植的系列,期待吧,CocoStudio也会推出系列视频。
1 CocoStudio 简介
CocoStudio 是由 Cocos2d-x 官方推出的一个专门针对 Cocos2d-x 游戏开发的免费工具集,目前正在开发阶段,且日益完善之中!既是工具集,当然集成了现有各零零散散工具的功能,并且不断扩充,包含动画编辑器,UI编辑器,场景编辑器和数据编辑器。具体内容及其特性欢迎访问 CocoStudio 官网 http://cocostudio.org/ 。在这里,我们通过动画编辑器来快速体验一下 CocoStudio 为我们开发带来的便捷~
 
2 环境搭建与配置
本文章所使用的系统环境为 win7 系统,CocoStudio-0.2.0 版本。
 
在当前最新稳定版 Cocos2d-x-2.1.4 的 TestCpp 中已经有例子展示了一些相关骨骼动画的效果。
 
3 序列帧动画的创建步骤
帧动画,顾名思义!就是将一张张设计好的图片,依次展示出来,就像放胶片电影一样,多帧组成动画效果。不多介绍了,直接看 CocoStudio 的使用方法。
 
a.打开 CocoStudio 启动动画编辑器
 
b.点击文件新建项目,并确定

c.在资源窗口选择添加资源,序列帧原图(这里不支持使用plist作为资源,但可以导出plist)
 
d.选择第一帧图片,拖进“渲染窗口”,选择工具栏第三项,居中显示。(居中可选操作) 

e.我们看见在“对象结构”视图中多出一个层,这就是序列帧动画层,在资源视图多选文件(除首帧之外),
之后拖动到“对象结构”视图中刚才那个层之上,(这句话最重要,不过貌似读者晕了,回头看我视频吧)
我们将能够看见“关键帧”视图的变化,当前帧根据图片数量自动变化,注意“对象结构”视图中鼠标的位置。

f.点击“关键帧”视图“播放”即可播放,也可循环播放动画 
g.保存项目后,可以导出大图,自动打包资源图片,在本例中生成了 “CsAnim.ExportJson”,”CsAnim0.plist” 和 “CsAnim0.png” 三个文件,然后我们就能拿着这三个文件在 Cocos2d-x 中使用了。
 
4.如何在 Cocos2d-x 中运行其动画
上面我们生成了一些文件,动画的资源文件,此时我们需要在 Cocos2d-x 中加载这些资源,并运行之,我们将以上文件放在项目 “Resources” 的 “Export” 目录之中。 然后使用如下关键代码,创建动画。
 
  
  
  
  
  1. // 加载资源文件 png 图片,plist 文件和 ExportJson 动画文件,一般而言可以在场景运行之初加载此资源 
  2. cs::ArmatureDataManager::sharedArmatureDataManager()->addArmatureFileInfo("Export/CsAnim0.png""Export/CsAnim0.plist""Export/CsAnim.ExportJson"); 
  3.   
  4. // 这里直接使用 CsAnim ,而此信息保存在 CsAnim.ExportJson 中,与其创建的项目属性相对应 
  5. cs::Armature* armature = cs::Armature::create("CsAnim"); 
  6. // 设置当前运行动画的索引,一个“工程”可以建立多个动画 
  7. armature->getAnimation()->playByIndex(0); 
  8. // 设置位置信息 
  9. armature->setPosition(VisibleRect::center()); 
  10. // 添加到容器,当前运行的场景之中 
  11. addChild(armature); 

创建骨骼动画

首先,打开Cocos Studio 的 Animation Editor(动画编辑器),新建一个动画工程。 
同Spine一样,Cocos Studio动画编辑器也有两种模式,但这里是形体模式和动画模式。用户需要在形体模式下组装角色部件,并为其绑定骨骼;并在动画模式下调整骨骼相应属性生成骨骼动画。

下面我们先来对编辑器整体做一个认识,见下图。

形体模式下: 
动画模式下: 
Cocos2d-x 3.0final 终结者系列教程22Cocos Studio动画编辑器的帧动画和骨骼动画详解_第1张图片

上面两图中,标记为1的部分是渲染区域,也就是我们的画布,它是资源布局的主编辑区,在该区域可以对各对象进行移动,缩放,旋转的操作,所有主要的操作结果都会在这个区域中显示完成。

第2部分是快捷菜单栏,该窗口中有一些常用操作,其中包括模式的切换,创建骨骼,缩放,旋转等等一系列操作。

第3部分是资源栏,本项目中使用的所有资源都必须导入到该面板才可以使用。

第4部分是预览区域,当选中资源栏的资源时,会在该区域中显示,达到预览的作用。

第5部分是对象结构栏,编辑器将根据对象结构栏中对象的顺序依次渲染对象,在最下层的对象将先于渲染,也就是说它可能会被后渲染的对象遮盖。另外,对象的顺序在该栏中是可调的。

第6部分是属性栏,当选中一个对象时,属性窗口会显示出该对象的所有属性。修改任意属性都可以立即改变该节点在渲染区域的状态。

第7部分是动作列表栏,一个动画工程是允许有多个动作的,比如:行走、跳跃、奔跑等等。所以在该栏中用户可以创建多个动作,并在多个动作中切换。

第8部分是动画帧面板,该面板将显示画布中所有对象的序列帧,用户可通过添加帧和改变对象属性创建动画序列帧。

对编辑器有了大致的了解后,现在就可以开始编辑动画了。

  1. 在形体模式下,选择 文件->导入资源 或在资源栏中右键选择需要导入的资源文件,也可直接将资源拷入工程的Resources文件夹目录下,然后刷新资源面板。
  2. 将资源拖到渲染区,并摆好位置。
  3. 开始创建骨骼:选中快捷菜单栏中创建骨骼的按钮,在角色身体的各部位单击左键并拖动鼠标画出骨骼。
  4. 将资源素材与骨骼绑定,右击渲染区的资源素材,选择“绑定到骨骼”,然后选择骨骼(选择的骨骼会高亮显示),就可以实现骨骼的绑定。
    Cocos2d-x 3.0final 终结者系列教程22Cocos Studio动画编辑器的帧动画和骨骼动画详解_第2张图片 Cocos2d-x 3.0final 终结者系列教程22Cocos Studio动画编辑器的帧动画和骨骼动画详解_第3张图片
  5. 当绑定好所有素材和骨骼后,右击骨骼选择“绑定父关系”,再选择该骨骼的父骨骼(选择的骨骼同样会高亮显示),这样依次根据身体部位的“父子”层级关系设定好。
  6. 切换到动画模式,选中相应控件,移动鼠标到动画帧一栏的某帧处,然后,改变被选择控件的某个属性,如旋转它,这样就能实现流畅的补间动画。
  7. 导出项目为程序可用的资源:导出的资源在工程目录的Export/..文件夹下,一共有三个资源文件,分别是 .ExportJson,.plist 和 .png文件。ExportJson文件中记录了骨骼动画的描述信息,plist文件则是记录碎图整合成大图后图片的位置描述信息,png文件是整合的大图。

在 Cocos2d-x 中加载动画资源

前面我们花了很多精力来创建骨骼动画,然而要将它运行在实际的项目中却非常的简单,只需几行代码,当然在这之前我们需要将动画编辑器导出的资源复制到项目Resource目录中去。

同样地,在Cocos2d-x程序中使用Cocos Studio动画首先需要包含相关头文件,如下:

1
2
#include "cocostudio/CocoStudio.h"
using namespace cocostudio;

创建一个骨骼动画对象,需要将动画文件和资源文件载入到程序。这里我们通过ArmatureManager动画数据管理器来加载动画。ArmatureManager本身是一个单例,它管理整个场景中的Armature。而Armature则封装了我们播放动画需要的Animation。由此可见,这是一个三层缔结的层次结构。其中ArmatureManager最大,然后是Armature,最后是Animation。

说完了原理,下面来看看代码。修改init函数, 在return前加入如下代码:

1
2
3
4
5
6
ArmatureDataManager::getInstance()->addArmatureFileInfo( "NewAnimation0.png" , "NewAnimation0.plist" , "NewAnimation.ExportJson" );
Armature *armature = Armature::create( "NewAnimation" );
armature->setPosition(Point(visibleSize.width * 0.5, visibleSize.height * 0.5));
// 播放动画
armature->getAnimation()->play( "walk" );
this ->addChild(armature);

效果图: 

我们在动画编辑器中编辑的动作就是Animation,一个动画工程中可以编辑多个动作,也就是动作列表中可创建多个动作。如下图所示:
Cocos2d-x 3.0final 终结者系列教程22Cocos Studio动画编辑器的帧动画和骨骼动画详解_第4张图片

所以播放动画需要根据具体地需要来播放,这样才能知道用户要播放的动画是哪一个。可以像上面代码一样指定动画名来播放动画,也可以通过指定动作编号来播放动画,如下:

1
armature->getAnimation()->playWithIndex(0);

播放连续地动画可通过以下函数实现:

1
2
void playWithNames( const std::vector<std::string>& movementNames, int durationTo = -1, bool loop = true );
void playWithIndexes( const std::vector< int >& movementIndexes, int durationTo = -1, bool loop = true );

(晕了吧)

你可能感兴趣的:(Cocos2d-x 3.0final 终结者系列教程22Cocos Studio动画编辑器的帧动画和骨骼动画详解)