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

【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

 

三、主界面

 

图01_主界面

 

 

 

 

1. 画布

1) 简介

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

图02_画布

2) 选择节点

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

3) 移动节点

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

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

4) 移动坐标系

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

5) 缩放

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

2. 菜单栏

 

1) 简介

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

2) 文件菜单

①　新建项目

用于打开“新建项目”窗口，在该窗口中输入新项目名称后点击确定按钮即可创建一个新项目

 

图03_新建项目

 

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

②　打开项目

用于打开已有项目。

点击菜单按钮，在弹出窗口中选择要打开的项目配置文件（xml格式的）即可打开项目(目前仅支持从程序安装目录下读取项目)

 

图04_打开项目

③　保存项目 

用于保存对项目的修改

④　导出项目

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

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

 

 

图05_导出项目

3) 设置菜单

①　循环播放 

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

②　播放速度 

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

③　设置背景 

² 选择背景图片

用于设置画布的背景图片

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

² 删除背景

用于删除画布的背景图片

3. 预览菜单

1) 预览 

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

2) 停止

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

4. 帮助菜单

用于打开帮助菜单

 

5. 资源列表

1) 简介

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

 

图06_资源列表

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

2) 导入皮肤

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

3) 导入序列帧

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

4) 重命名

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

注意：导入资源后，编辑器会自动将对应的皮肤命名为资源的文件名（如果是序列帧则取序号左边不包含下划线的部分），一般情况下不要重命名皮肤名称，，否则动画素材将无法解析

5) 编辑序列帧

用于编辑序列帧，点击后弹出“序列帧编辑”窗口

 

图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) 简介

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

 

图10_帧列表

 

 

2) 帧标尺

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

3) 关键帧控件

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

4) 时间线控件

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

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

5) 帧切换器

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

6) 右键菜单

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

 

 

①　添加关键帧

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

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

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

说明：

1. 关键帧不能重复添加

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

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

②　复制关键帧

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

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

③　粘贴关键帧

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

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

说明：

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

2. 如果指定帧索引处已存在关键帧，则不能再粘贴

④　删除关键帧

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

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

⑤　移除节点

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

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

 

 

10. 属性列表

1) 简介

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

 

图11_属性列表

2) 位置

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

3) 位移

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

4) 旋转

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

5) 资源

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

6) 缩放

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

7) 透明度

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

8) 颜色

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

9) “隐藏”复选框

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

四、序列帧动画示例

1. 创建项目

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

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

2. 导入序列帧

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

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

 

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

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

 

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

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

3. 创建节点

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

 

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

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

 

4. 创建动画

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

 

图15_序列帧示例_添加动画

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

5. 将节点添加到动画中

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

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

 

图16_序列帧示例_添加到动画

6. 设置序列帧动画时长

1) 将节点添加到动画中时，程序会自动在第0帧添加一个关键帧

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

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

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

 

图17_序列帧示例_添加关键帧

五、关键帧动画示例

1. 创建项目

新建一个项目

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

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

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

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();