Dorothy动画编辑器

  Dorothy里带了一套自己的骨骼动画库,叫做oModel库,以及可视化的动画编辑器AcionEditor。编辑器可执行版本的下载地址在:这里

目录

  一、基本概念
  二、编辑器的使用
  三、图片切片编辑界面
  四、模型节点编辑界面
  五、模型动画编辑界面
  六、模型外观编辑界面
  七、模型文件在程序中使用

  请在右侧面板中进行目录定位。


一、基本概念

  骨骼动画是一种很节省资源的动画形式。通过把比如动画人物分解成肢体的各个部分,然后拼接起来,然后通过关节运动来产生动画。Dorothy支持骨骼动画的功能,并把一套骨骼动画的集合叫做动画模型。
  一个Dorothy的动画模型主要由这样一些东西组成,包括:

  1.图片切片(Clip)

  游戏的图片资源往往是多张小的图片拼接成一张大的图片使用以节省资源。使用时又需要从大图片上取出小图片来用。这样的小图片块就叫做图片切片。

  2.模型节点(Sprite)

  动画模型的本体是一个树状结构的对象,在这颗树中包括一些看得到的图形对象,或是一些没有外观的关节点。一个模型最少有一个叫Root的根节点。
  每个模型节点会包含一些属性,包括:名字(Name)、锚点(Anchor)、位置(Pos)、缩放(Scale)、旋转(Rotation)、透明度(Opacity)、倾斜度(Skew)、遮挡父节点(Front)等。

  3.模型动画(Action)

  每个模型可以包含多个动画,每个动画由多组模型节点的动画帧的集合组成。一个动画帧表示的是某个时刻模型节点的外观。每两个节点的动画帧(外观)之间会自动生成图形的变化过程,从而产生动画。所以一个模型动画的组成结构可以概括为:单个动画帧(KeyFrame)-组成->单个节点的动画帧集(Track)-组成->多个节点的动画帧集-组成->一个动画。
  每个动画帧包含的属性包括:时间点(Time)、位置(Pos)、缩放(Scale)、旋转(Rotation)、透明度(Opacity)、倾斜度(Skew)、可见性(Visible)、位移缓动函数(EaseP)、缩放缓动函数(EaseS)、倾斜缓动函数(EaseK)、透明度缓动函数(EaseO)等。

  4.模型外观(Look)

  有时候你可能会需要切换一些模型节点的可见性,用于实现例如人物表情的切换,战斗状态和普通状态下服饰或是装备的变化等等。一个比较简便的办法就是使用模型的外观功能,通过设置并保存几套不同节点可见性的方案,然后在程序中就可以方便地随时在这几套设置中切换。


二、编辑器的使用

  Dorothy的动画编辑器就是用Dorothy自己开发的。利用Cocos2d-x的跨平台特性,让这个工具在平板甚至手机上也可以做动画编辑,界面很简洁,但功能并不简单。主要包括四个编辑界面,和一些功能面板。四个编辑界面分别对应Dorothy动画模型的主要内容,包括:图片切片编辑界面、模型节点编辑界面、模型动画编辑界面和模型外观编辑界面等。

  1.编辑器的输入输出

  在制作Dorothy的动画模型的整个过程中,需要的输入文件是组成整个动画的多个小的图片文件,输出包括合并后的单张动画用的大图,默认输入输出都使用png格式,然后输出的文件还包括定义原小图片区域信息以.clip结尾的切片文件,以及包含模型数据的以.model结尾的模型文件。就是说一个完整的Dorothy动画模型应该包含三个文件,比如模型名字叫xiaoli,那么编辑器就会生成xiaoli.png,xiaoli.clip以及xiaoli.model三个文件。最后程序使用时将同时需要这三个文件,并且三个文件放在同一个路径中来加载为动画模型。

  2.准备输入的资源

  所以在开始制作模型之前要先准备好自己的动画图片资源,在win32下的编辑器资源路径为C:\Users\Username\AppData\Local\Dorothy\,在Mac下资源路径为/Users/Username/Library/Caches/,路径下的Model/Input/文件夹,以及Model/Output/文件夹,分别为资源输入输出目录。以里面的某萌妹子做的模型示例xiaoli为例,你会看到有一个Model/Input/xiaoli/的目录,里面会有一些被分解的萝莉的图片(分解不是肢解哦),这些就是一套标准的输入资源。这个资源文件夹的名字也很有讲究,因为这个文件夹的名字就是最终输出模型的文件名字,编辑器里暂时不提供名字的修改哟。

输入模型的图片资源

输入模型的图片资源

  准备好资源以后就可以打开编辑器了,打开动画编辑器以后,首先会看到一个luv fight的logo,然后进入了的第一个界面,这时只有左上角写着Edit的按钮可以点击。点击以后出现一个标题是Choose Item的面板,用于选择要编辑的模型。选择和你的输入资源文件夹同名的项目,然后就会进入图片切片编辑界面了。 ###  3.新建模型   在Choose Item面板上,点击按钮的话,可以直接新建一个模型。新建模型首先要输入新模型的名字,确认后弹出Choose Clip的面板,可以选择当前可以使用的图片切片,选择新模型要使用的图片切片后点击面板右上角的Edit按钮,然后就可以进入新模型的编辑界面。 ###  4.编辑器菜单   在各个编辑界面中左上角会一直存在一个叫做Edit的按钮,点击Edit按钮会出现编辑器菜单界面,当处于节点编辑界面时,弹出的菜单界面会出现Edit Animation和Edit Look两个区域,这时可以点击任意区域下的按钮,然后输入新的动画名或是外观名字然后就会进入新创建的相应的动画,或是外观编辑界面。 ###  5.缩放编辑区域   注意!这是一个非常重要的功能,在触屏设备上运行时,往往很难准确地旋转和拖拽要编辑的物件。为了达到像素级地准确编辑模型,可以通过用双指放大界面后,再进行模型的拖拽,放大界面以后进行拖拽编辑时,数值变化速度会变慢,所以你可以通过调节界面的缩放程度来控制编辑的精度。 ###  6.编辑模型的特殊点   有时候你可能会需要给模型定义一些特殊的位置点。比如制作了一个弓箭手的模型,你可能会想在攻击动画播放到某个位置的时候,在动画中人物手里的弓的位置创建一个箭的投射物,这时候你就需要获取模型上的这个特殊点的位置。   没问题,Dorothy的动画编辑器还也提供了这个功能,在任意编辑界面的右上侧面板选择Root模型节点,然后在右下侧的属性面板中选择Keys的属性就可以打开特殊点编辑功能。接着点击上面出现的+号的按钮,点击要添加点的位置,在出现的弹出窗中输入新建特殊点的名称,点击确认完成特殊点的添加。之后在程序中使用时通过model:getKey(name)来获取特殊点。

三、图片切片编辑界面

图片切片编辑界面

图片切片编辑界面

  进入这个界面看到一张合并好的大图片的话,就表示图片编辑已经完成了,可以进入模型节点编辑的环节了。如果还要对输入的小的图片切片做增减的话,可以到资源目录中做完增减以后回到这个界面点击右上角的Update按钮以重新生成合并的图片。然后点击Edit按钮进入模型节点编辑界面。

四、模型节点编辑界面

模型节点编辑界面

模型节点编辑界面

  节点编辑界面除了从图片编辑界面进入,还可以从其它编辑界面里点Edit按钮,然后在Edit Sprite区域中选择Edit按钮,就可以再次进行节点编辑。这个界面分为几部分内容,左边中间有个大的“十”字的编辑界面区域,在触屏上可以用双指进行缩放,单指进行移动;右上是一块以树状结构显示的模型节点选择面板;右下是一块模型节点属性查看和编辑的面板。两块面板内容都可以上下滑动查看内容。   在编辑界面部分的四周有一些功能按钮,包括:

  Edit
  打开编辑选择菜单,在动画模型有任何变化的时候,这个按钮的名字会变成Save,这时点击该按钮会保存模型数据。
  Fixed On
  当这个按钮显示为Fixed On时,所有的模型编辑操作产生的数据除了旋转角度不为0的节点坐标,其它编辑产生的数据都会被取整或是取一位小数。当切换为Fixed Off时,模型编辑产生的数据可以任意变化。适用于喜欢干净的小数位的强迫症患者。
  Batch Used
  切换这个按钮为Batch Used时,编辑生成的模型将会使用CCSpriteBatchNode对节点进行批量渲染,优化渲染效率。但是使用批量渲染时,无法往模型节点上挂载使用了其他图片的CCSprite节点,如果要做一个纸娃娃模型,以后要任意的换装的话,可能只好切换该按钮为Batch Unused,牺牲一些渲染效率来使用了。
  Face Left
  如果要制作的动画模型是2D横版的人物,那么美术最初制作的人物朝向,可能是面朝左或是面朝右,这时可以设置这个按钮,如果默认的人物面朝左就设置为Face Left,如果面朝右就设置为Face Right。用于后面在程序中获取使用。
  Delete
  删除当前选择的模型节点,并且会同时删除选择节点下的所有子节点以及子节点上的动画。
  Add
  添加一个模型节点为当前选择节点的子节点。点击后会出现模型图片的选择界面,如果要添加一个没有外观的节点用于调整模型节点的父子关系,则在选择界面中选择写着Empty的按钮来添加一个空节点。
  Down
  将选择节点在其父节点下的Children中的顺序向下移,越往下的节点会遮档靠上的节点进行渲染。
  Up
  将选择节点在父节点的子节点中的顺序向上移,顺序靠上的节点会被靠下的节点遮挡。
  Rep
  Replace按钮,用于替换节点的图片,点击后出现图片选择界面。可以将空节点替换为带图片的节点或是反过来操作。
  Move
  用于改变选择的节点的父节点为其它节点,选择的节点的所有子节点也会跟着一起移动。先选择要移动的节点,然后点击Move按钮,按钮会变成粉色并且文本变为Moving,接着选择要挂接的父节点,选择后再次点击Moving按钮完成节点的移动。
  100%
  在正常状态下,点击该按钮会将编辑区域的缩放值由100%调整为200%,再次点击会将界面缩放由200%调整为50%。当使用双指缩放编辑界面时,该按钮上会实时显示当前的界面缩放值,这时点击该按钮会恢复缩放为100%。
  Origin
  当移动编辑界面的显示区域以后,点击该按钮可以将显示区域移回原点。
  Size Off
  这是一个隐藏的按钮,在选择Root节点后出现,当切换为Size On时可以显示模型的ContentSize区域。模型的ContentSize区域可以用于辅助调节动画,或是在程序中用于描述模型的碰撞检测区域。

  右上部分的模型节点选择区,单击节点可以进行选择,再次点击取消选择,双击节点可以隐藏该节点的所有子节点,并在右上角显示一个蓝色的小方块,再次双击显示所有子节点。方便进行查看。
  右下部分的节点属性展示区域,可以选择要编辑的属性,然后界面上会出现相应的编辑图形,除了节点名字输入以外的属性编辑操作均直接在左侧编辑区域通过拖拽等操作完成。有一个特别的设计就是像位置这样有X和Y方向编辑操作的属性,选择比如PosX属性后接着再选择PosY属性就可以同时编辑这两个属性,只选择其中一个属性的话就会进行单一属性的编辑。
  注意当选择Root节点以后,只会出现模型的ContentSize属性的Width和Height值并可以被编辑。


五、模型动画编辑界面

模型动画编辑界面

模型动画编辑界面

  动画编辑界面和节点编辑界面很类似,主要是编辑按钮有变化,最下面增加了一条时间轴和播放进度条,还有可编辑的属性变为动画属性。时间轴以游戏帧为单位,游戏默认60帧,时间轴上每一个分度就代表一个游戏帧的时间(1.0/60秒)。   动画编辑界面新增的编辑按钮有:

  New
  添加一个动画帧。需要先选择要添加动画帧的节点,然后拖动下面的时间进度条到要添加动画帧的时间帧的位置,接着再点击New按钮来创建动画帧,创建的动画帧的属性为节点初始状态属性,或如果后面没有已创建的时间帧,则为前一动画帧同样的属性,否则为前后帧之间在该时间轴位置补帧的属性。
  Delete
  删除当前动画进度条位置的动画帧。
  Copy
  复制和粘贴动画帧。需要先拖动进度条至要复制的动画帧位置,然后点Copy按钮,然后Copy按钮会变成粉色,上面的文字会变成Paste,然后再拖动进度条至要粘贴该动画帧的时间轴位置,接着再次点击Paste按钮完成动画帧的粘贴。
  Clear
  清除所有的动画帧。要先选择要清除动画帧的模型节点,然后点击Clear按钮并做确认,就能清除该节点所有的动画帧。
  Play
  点击后播放动画,在动画播放过程中再次点击可以暂停动画的播放,暂停后再点击可以继续播放。
  Loop
  可以切换动画是否循环播放。
  Look
  点击后可以选择当前模型要应用的模型外观。
  Del
  删除当前的动画。

  动画编辑界面的时间轴和进度条都可以进行拖拽。时间轴是无限长的,可以创建编辑的动画帧数量没有限制。进度条除了可以点住它的头部进行拖拽,还可以双击时间轴的任意位置使进度条跳跃至该位置,方便进行编辑。


六、模型外观编辑界面

模型外观编辑界面

模型外观编辑界面

  模型外观编辑界面的功能就比较简单了。要编辑模型外观首先点击左上角的Edit按钮,然后在弹出的面板上找到Edit Look的区域,点按钮添加新的外观,或是按名字选择一个要编辑的外观。外观编辑界面的按钮包括:

  Del
  删除当前正在编辑的外观。
  Hide
  设置选择的模型节点在该外观下不可见,点击后会隐藏选择的节点,然后按钮文字变为Show,再次点击会显示模型节点。


七、模型文件在程序中使用

  首先将模型文件包括xiaoli.png,xiaoli.clip和xiaoli.model文件复制到同一个目录下,然后程序才能正确地加载所有文件。示例代码如下:

Dorothy()

local winSize = CCDirector.winSize

local model = oModel("ActionEditor/Model/Output/xiaoli.model")
model.look = "happy" -- 设置外观
model.loop = true -- 设置动画为循环播放
model:play("walk") -- 播放动画
model.position = oVec2(winSize.width*0.5,winSize.height*0.5)

local scene = CCScene()
scene:addChild(model)

CCDirector:run(scene)
标题目录