【v2.x OGE教程 11】 动画编辑器帮助文档

】

动画编辑器帮助文档

版本号	日期	作者	说明
1.0	2014-9-3	橙子游戏	文档创建

一、简单介绍

动画编辑器用于游戏动画的可视化编辑,支持序列帧动画和关键帧动画。通过解析生成的数据文件就可以获取动画信息，并能随时调整，以降低开发工作量。提高开发效率。

二、相关概念

1. 帧

帧是动画在某个时间点的状态。一系列的帧组成了动画的时间线。动画播放时。通过帧的切换，实现动画效果

2. 序列帧

序列帧组成序列帧动画，这样的动画中。仅通过静态图片的切换来实现动画效果

3. 关键帧

关键帧记录某帧的状态，包含要绘制的图片资源，图片的位置、旋转、缩放和颜色设置等；播放动画时，通过当前帧的位置结合关键帧数据就可以计算出当前帧的属性，而无需逐帧存储其属性

4. 坐标系

动画编辑器採用一个二维平面坐标系；横轴向左为正，向右为负，纵轴向上为正，向下为负

5. 节点

1) 定义

节点是动画的基本组成部分，是一个图片或者一组序列帧

2) 位移

节点相对于第一帧的位移

3) 旋转\缩放中心

节点旋转或缩放时的中心点；在动画编辑器中，是在资源中定义的

4) 旋转

节点绕旋转中心的旋转角度。正数表示顺时针旋转，负数表示逆时针旋转

5) 资源

节点在当前帧所绘制的资源

6) 缩放

节点相对于缩放中心点的缩放比例，分横向和纵向

7) 透明度

节点的透明度，取值区间为0-255；0表示全然透明，255表示不透明

8) 颜色

节点的颜色增量，R,G,B格式，三个数字分别表示红绿蓝三种颜色的增量，取值区间为 0-255

三、主界面

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvT3JhbmdlR2FtZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

图01_主界面

1. 画布

1) 简单介绍

画布用于动画预览，动画元素的选择和移动

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvT3JhbmdlR2FtZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

图02_画布

2) 选择节点

鼠标左键单击节点相应的图片就可以选中节点，选中后。节点中心会绘制一个灰色圆圈。表示已经被选中

3) 移动节点

用鼠标左键拖动节点图片就可以移动节点，移动之后，关键帧的“位移”属性将同步更新

注意：仅当所选中的节点在当前帧上加入了关键帧时，才干对节点调整节点的位移、缩放、旋转等属性

4) 移动坐标系

用鼠标左键按住画布的空白区域并拖动，松开鼠标后即完毕坐标系的移动

5) 缩放

按住Ctrl键，然后滚动鼠标滚轮就可以缩放画布，画布左上角的文字显示当前的缩放百分比

2. 菜单条

1) 简单介绍

菜单条是编辑器经常使用操作的集合，包含“文件”、“设置”、“预览”和“帮助”菜单

2) 文件菜单

①　新建项目

用于打开“新建项目”窗体，在该窗体中输入新项目名称后点击确定button就可以创建一个新项目

图03_新建项目

注意：新项目名称不能与已有项目的名称反复

②　打开项目

用于打开已有项目。

点击菜单button，在弹出窗体中选择要打开的项目配置文件（xml格式的）就可以打开项目(眼下仅支持从程序安装文件夹下读取项目)

图04_打开项目

③　保存项目

用于保存对项目的改动

④　导出项目

用于导出项目所生成的动画数据文件。

点击菜单,在弹出窗体中选择要导出的目标文件夹。再点击确定后将在指定文件夹下 生成动画数据文件

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvT3JhbmdlR2FtZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

图05_导出项目

3) 设置菜单

①　循环播放

用于设置是否循环预览动画。勾选时表示循环

②　播放速度

用于设置预览时的播放速度。单位是“帧/秒”

③　设置背景

² 选择背景图片

用于设置画布的背景图片

注意：背景图片自己主动与画布坐标系的第二象限对齐；背景图片仅用于预览，并不导出到动画数据文件里

² 删除背景

用于删除画布的背景图片

3. 预览菜单

1) 预览

从当前帧開始预览动画；单击后，“预览”菜单的文字变为“停止”，假设未设置循环播放，则当播放到动画末尾时即停止预览，菜单的文字将变为“预览”

2) 停止

開始预览后，“预览”菜单的文字将变为“停止”。点击即停止播放，动画将定格在当前正在绘制的帧

4. 帮助菜单

用于打开帮助菜单

5. 资源列表

1) 简单介绍

资源列表是动画素材的集合，用于动画素材的导入、序列帧的编辑等

图06_资源列表

资源列表是一个树状结构，第一级表示皮肤或者序列帧，第二级是序列帧的帧列表；资源列表的操作主要借助右键弹出菜单完毕

2) 导入皮肤

用于导入动画素材。点击后在弹出的对话框中选择要导入的图片再点击确定就可以完毕导 入（可多选）。支持bmp、jpg和png等经常使用图片格式

3) 导入序列帧

用于导入序列帧的素材，点击后在弹出的对话框中选择要导入的图片（可多选）。再点击确定，这些图片将组合成一个序列帧动画；序列帧的播放顺序按文件名称升序排列

4) 重命名

用于重命名皮肤，应避免使用中文

注意：导入资源后。编辑器会自己主动将相应的皮肤命名为资源的文件名称（假设是序列帧则取序号左边不包括下划线的部分）。普通情况下不要重命名皮肤名称。，否则动画素材将无法解析

5) 编辑序列帧

用于编辑序列帧。点击后弹出“序列帧编辑”窗体

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvT3JhbmdlR2FtZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

图07_序列帧编辑窗体

窗体左側是按播放顺序排列的序列帧列表，右側是各帧的播放时长

①　调整序列帧播放顺序

点击要调整的序列帧所在的单元格，选择当前帧要播放的图片素材就可以

注意：不能反复选择同一个图片素材，即一个图片素材仅仅能在一个序列帧动画中播放一次

②　调整序列帧播放时长

点击要调整的序列帧相应的“播放时长”单元格，输入合适的时长就可以，播放时长的单位是“帧”，与动画中两个时间切片之间的间隔相应

注意：当动画的总时长和序列帧动画的总时长不相等时，通过计算当前的时刻与序列帧总时长的模余来获取当前应绘制的序列帧

6) 插入帧

用于在当前选中的序列帧前面插入一个序列帧。单击后打开一个对话框。在对话框中选 择要插入的图片素材。再点击确定就可以插入一个序列帧

7) 追加帧

用于在当前序列帧末尾追加一个序列帧。单击后打开一个对话框，在对话框中选择要插 入的图片素材，再点击确定就可以追加一个关键帧

8) 删除帧

用于删除选中的序列帧，假设是仅有的一个序列帧则不可删除

6. 预览区域

1) 简单介绍

预览区域用于显示和编辑动画素材

图08_预览区域

2) 缩放

①　缩放比例

预览区域左上角显示当前的缩放比例

②　缩放

按住Ctrl键,再滚动鼠标滚轮就可以缩放图片

3) 碰撞区域

碰撞区域用于物理引擎检測碰撞，动画编辑器可支持多个矩形碰撞区域

①　加入碰撞区域

在合适的位置按住鼠标左键，再拖动鼠标到合适的位置，松开鼠标后就可以在图片上绘制一个碰撞区域

②　移动碰撞区域

用鼠标拖动表示碰撞区域的透明矩形框就可以移动碰撞区域

③　调整碰撞区域大小

让鼠标悬浮在碰撞区域边缘，待鼠标样式改变时，按住并拖动鼠标就可以调整碰撞区域的宽和高

④　删除碰撞区域

右键单击碰撞区域。在弹出菜单中单击“删除碰撞区域”菜单就可以删除碰撞区域

4) 设置缩放和旋转中心

①　通过菜单设置

右键单击预览区域的空白区域，在弹出菜单中点击“设置XX中心”。打开设置窗体

图09_设置坐标

依次输入X、Y坐标，再点击确定就可以改动旋转和缩放中心的位置

②　通过鼠标设置

直接拖动旋转中心（红色的圆点）和缩放中心（蓝色的圆点）就可以调整

7. 节点列表

1) 简单介绍

节点列表显示项目中的全部节点。这些节点依照绘制顺序由下往上排列。即绘制时，先绘制靠上的节点，再绘制后面的节点。假设重合则遮挡先绘制的节点；节点列表的主要操作通过右键弹出菜单完毕

2) 新建节点

在节点列表的右键弹出菜单中展开“新建节点”，然后选择要加入的图片或者序列帧。就可以新建一个节点，同一个资源能够被多次加入到节点列表中

3) 加入到动画

在节点列表中选中要加入的节点，点击鼠标右键，在弹出菜单中选择“加入到动画”就可以把该节点加入到当前动画的第一帧中；同一个动画中，节点不能反复加入

4) 删除节点

在节点列表中选中要删除的节点，点击鼠标右键，在弹出菜单中选择“删除节点”就可以把该节点从项目中删除，与之关联的动画中对应节点都将被删除

5) 重命名节点

在节点列表中选中要重命名的节点，点击鼠标右键。在弹出菜单中选择“重命名”，然后输入新的名称就可以重命名该节点；新输入的名称不能与已有的节点反复。否则会重命名失败。应避免使用中文

6) 调整绘制顺序

直接上下拖拽节点到合适的位置就可以调整节点的绘制顺序

8. 动作列表

1) 简单介绍

动作列表显示项目中的动画列表，即用同样的节点列表可创建多个动画，其主要操作通过右键菜单完毕

2) 切换当前动画

选中要操作的动画就可以切换。画布和帧列表将同步更新显示

3) 加入动画

在动作列表的右键菜单中选择“加入动画”就可以加入一个新的动画到项目中

4) 重命名动画

选择要重命名的动画，然后在右键菜单中选择“重命名”，输入新的名称就可以重命名该动画；新的名称不能与已有的动画重名，否则会重命名失败。应避免使用中文

5) 删除动画

选择要删除的动画，然后在右键菜单中选择“删除动画”就可以删除该动画

9. 帧列表

1) 简单介绍

帧列表显示动画的各个节点的关键帧及时间线，提供帧切换、关键帧编辑等功能

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvT3JhbmdlR2FtZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

图10_帧列表

2) 帧标尺

帧标尺用于标识当前所在的帧位置,点击帧标尺能够切换当前帧位置

3) 关键帧控件

关键帧控件标识节点关键帧的位置;点击控件可将其选中,被选中后颜色变为蓝色

4) 时间线控件

时间线控件显示某个节点在动画播放时,显示的时间片段;点击控件可将其选中,被选中后颜色变为浅蓝色;

注意:一个节点的时间线可能是连续的,也可能是间断的,且不一定从动画播放时開始,也不一定到动画结束时截止,视节点的显示时间而定

5) 帧切换器

用于显示和切换当前帧位置,拖动控件以切换当前帧

6) 右键菜单

对帧列表的操作主要借助右键菜单来完毕

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvT3JhbmdlR2FtZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

①　加入关键帧

² 点击选中要加入关键帧的节点（假设节点尚未加入到动画中,可在节点列表中通过“加入到动画”右键菜单来加入）相应的时间线，此时该时间线控件变为浅蓝色

² 拖动帧切换器。或者点击帧标尺，将当前帧切换到要加入关键帧的位置

² 右键单击帧列表区域。在弹出菜单中选择“加入关键帧”

说明：

1. 关键帧不能反复加入

2. 假设新加入的关键帧之后没有关键帧，则新关键帧的位移、旋转等属性将默认从前一帧复制

3. 假设新加入的关键帧位于两个关键帧之间，则新关键帧的属性的默认值将通过其前后两帧及帧索引计算得出

②　复制关键帧

² 点击选中要复制的关键帧控件。此时该控件变为蓝色

² 右键单击帧列表区域，在弹出菜单中选择“复制关键帧”就可以复制该关键帧的数据

③　粘贴关键帧

² 拖动帧切换器，或者点击帧标尺，将当前帧切换到要粘贴关键帧的位置

² 右键单击帧列表区域，在弹出菜单中选择“粘贴关键帧”就可以加入一个关键帧。该关键帧的数据复制自上一次被复制的关键帧

说明：

1. 仅能在同一个节点内复制粘贴关键帧数据

2. 假设指定帧索引处已存在关键帧。则不能再粘贴

④　删除关键帧

² 点击选中要删除的关键帧控件。此时该控件变为蓝色

² 右键单击帧列表区域，在弹出菜单中选择“删除关键帧”就可以删除该关键帧

⑤　移除节点

² 点击选中要移除的节点相应的时间线控件。此时该时间线控件变为浅蓝色

² 右键单击帧列表区域，在弹出菜单中选择“移除节点”就可以将该节点从动画中移除

10. 属性列表

1) 简单介绍

属性列表用于显示和设置关键帧的各项属性

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvT3JhbmdlR2FtZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

图11_属性列表

2) 位置

用于显示节点在画布中的坐标，该值仅用于动画预览，与动画的实际位置无关

3) 位移

用于显示和设置节点相对于其起始位置的位移

4) 旋转

用于显示和设置节点在当前帧的旋转角度，分为x、y、z三种，分别相应节点在右手坐标系的x、y、z轴方向上的旋转角度；正值为顺时针旋转。负值为逆时针旋转

5) 资源

用于显示节点在当前帧所绘制的资源名称（图片资源或者序列帧）

6) 缩放

用于显示和设置节点的缩放比例，依次为横向和纵向

7) 透明度

用于显示和设置节点的透明度

8) 颜色

用于显示和设置节点的颜色增量。依次为红、绿、蓝

9) “隐藏”复选框

用于临时隐藏选中的节点，以方便编辑其他的节点

四、序列帧动画演示样例

1. 创建项目

1) 点击文件菜单。选择新建项目

2) 在弹出的对话框中输入项目名称，点击确定

2. 导入序列帧

1) 右键单击“资源列表”区域。在弹出菜单中选择“导入序列帧”

2) 在弹出的对话框中依次选择要导入的序列帧图片。再点击“打开”button

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvT3JhbmdlR2FtZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

图12_序列帧演示样例_导入序列帧

3) 在弹出的“序列帧编辑”对话框中设置序列帧的播放顺序和播放时长。然后点击“确定”button

图13_序列帧演示样例_设置序列帧播放时长

4) 改动资源名称为合适的文本

3. 创建节点

1) 右键单击“节点列表”区域，在弹出菜单中选择“新建节点”，再选择合适的资源

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvT3JhbmdlR2FtZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

图14_序列帧演示样例_新建节点

2) 改动节点名称为合适的文本

4. 创建动画

1) 右键单击“动作列表”区域，在弹出菜单中选择“加入动画”

图15_序列帧演示样例_加入动画

2) 修修改画名称为合适的文本，并选中该动画

5. 将节点加入到动画中

1) 在“节点列表”中选择要加入的节点

2) 右键单击“节点列表”区域，在弹出菜单中选择“加入到动画”

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvT3JhbmdlR2FtZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

图16_序列帧演示样例_加入到动画

6. 设置序列帧动画时长

帧加入一个关键帧

2) 计算序列帧动画的总时长的帧数

3) 拖动“帧列表”区域的“帧切换器”或者点击“帧标尺”，将当前帧切换到与序列帧动画“总时长帧数”同样的地方

4) 右键单击“帧列表”区域。在弹出菜单中选择“加入关键帧”，为节点加入一个关键帧

图17_序列帧演示样例_加入关键帧

五、关键帧动画演示样例

1. 创建项目

新建一个项目

2. 导入图片素材和序列帧

1) 右键单击“资源列表”区域，在弹出菜单中选择“导入皮肤”或“导入序列帧”

2) 在弹出的对话框中依次选择要导入的图片。再点击“打开”button

3) 改动资源名称为合适的文本，并设置序列帧播放信息

3. 创建节点

依次为图片资源和序列帧创建对应的节点

4. 创建动画

创建动画。并选中。将其设置为当前动画

5. 将节点加入到动画中

1) 在“节点列表”中选择要加入的节点

2) 右键单击“节点列表”区域，在弹出菜单中选择“加入到动画”

3) 反复上述步骤，直到所需的节点都加入到了动画中

6. 加入关键帧

1) 点击选中要加入关键帧的节点相应的时间线

2) 拖动“帧列表”区域的“帧切换器”或者点击“帧标尺”。将当前帧切换到要加入关键帧的索引处

3) 右键单击“帧列表”区域。在弹出菜单中选择“加入关键帧”，为节点加入一个关键帧

4) 在“属性列表”中改动关键帧的各项属性为合适的值

5) 反复上述步骤。直到生成须要的动画为止

六、在项目中使用

1. 导出为数据文件

在动画编辑器中将动画导出，生成对应的xml数据文件，然后将数据文件复制到项目的合适位置

2. 将纹理资源打包并载入到项目中

1) 用TexturePacker将动画中所使用的纹理打包成pvr包

2) 在载入资源时。加入载入pvr包的代码

RegionRes.loadTexturesFromAssets(Res.XML_GFX_BALLOON);

RegionRes.loadTexturesFromAssets(Res.XML_GFX_FIREWORKS);

3. 载入动画数据文件并使用

//载入动画数据

AnimationLoader.getInstance().loadAnimation(Res.XML_GFX_ANIMATION_1);

//通过动作名称查找获取数据(AnimationInfo)对象

final AnimationInfo animationData =  AnimationMgr.getInstance().getAnimationData(Res.Animation_1);

//初始化动画对象

final Animation animation = new Animation(this,animationData,"FrameByFrame");

//设置动画属性

animation.setX(120);

animation.setY(120);

animation.setScale(0.5f);

//设置当前显示第几帧

animation.setCurrentIndex(22);

//加入到Layer中

layer.attachChild(animation);

//播放动画

int speed = 10,

loopCount = Animation.LOOP_CONTINUOUS,

startIndex = 5;

animation.startPlaying(speed, loopCount, null, startIndex);

//停止播放

animation.stopPlaying();