CocoStudio工具集开发入门之动画编辑器教程

移动开发 Android 游戏开发
CocoStudio工具集中集成了动画编辑器,动画编辑器是专门为动画设计人员提供的工具,能够实现动画实时显示、编辑、自动序列帧、关键帧编辑、骨骼动画等。

1.1     界面介绍

v 动画列表:工程文件可以支持多个动画编辑编辑,动画列表下的一个元素就是一个完整的动作;

v 对象结构:是一个列表结构,展示当前动作的所有图层;

v 帧编辑区:针对于当前动作的图层进行动作帧的编辑,还可以播放预览当前动作;

v 渲染区:主要的编辑窗口,实时显示当前动作的帧效果,可以进行平移、旋转、缩放和骨骼绑定等操作;

v 资源编辑区:可以对当前选中的图层使用到的图片资源进行编辑,可以更改图片的锚点,也可以添加碰撞块数据;

v 属性窗口:支持对当前选中图层的数字编辑;

v 资源窗口:支持对当前工程的资源管理;

v  日志窗口:日志窗口用来记录所有操作的明细和历史。

2.1 新建工程

点击菜单栏的文件菜单,下拉列表中的新建按钮,会弹出一个新建工程的信息面板,大家可以给工程命名,并选择工程的保存路径,最好在命名和路径中不要有中文字符。

2.2 导入资源

1.点击菜单栏的文件菜单,下拉列表中的导入资源菜单,可以导入单个文件,也可以导入整个文件夹;

2.也可以点击资源窗口的图标按钮,分辨导入单个文件,和整个文件夹;

2.3资源编辑

右键点击资源窗口的资源,可以进行删除,重命名的操作;

可以再资源窗口下方的预览窗口,查看选中的资源预览效果图;

3.1创建动画

(1)右键点击动画列表窗口,选择新建动画;

(2)右键点击结构树窗口,选择添加图层;

(3)右键点击帧编辑窗口,选择添加帧;

经过以上操作,就可以看到渲染区会渲染出一个默认的图层元件;

3.2编辑图层

单个元件编辑方式:

(1)鼠标点击图层,选中元件,移动鼠标进行元件的拖动;

(2)在结构树上选择相应的图层,该元件会全局被选中;

多个元件编辑方式:

(1)渲染区:点击鼠标左键并进行拖动,可以进行元件的框选;

(2)结构树:点击鼠标左键并进行拖动,可以进行元件的框选;

删除图层元件:渲染区右键菜单,结构树右键菜单,delete建;

复制图层元件:渲染区右键菜单,结构树右键菜单,Ctrl+C;

粘贴图层元件:渲染区右键菜单,结构树右键菜单,Ctrl+V;

显示编辑:

1.元件被选中的时候,会显示白色的编辑框,编辑框的四个角点可以进行缩放编辑,编辑框的右边中心点可以进行旋转编辑;

3.3画布操作

1.缩放画布:Ctrl+鼠标滚轮,可以放大缩小画布;

2.移动画布:space(空格键) + 鼠标左键,可以拖动画布;

3.4属性编辑

显示/隐藏:显示或隐藏选中的控件;

旋转:调整控件的旋转角度;

缩放:调整控件的横向缩放和纵向缩放;

位置:调整控件的坐标;

渲染资源:设置/替换 当前图层元件的当前帧的图片资源;

颜色混合:设计/替换 当前图层元件的当前帧的资源的混合颜色;

3.5 资源编辑区

1.移动红色锚点,调整图层元件的渲染锚点,影响图层元件的平移,旋转和缩放的操作表现;

2.点击鼠标左键,拖动;添加碰撞矩形,可以添加多个碰撞矩形;

3.碰撞矩形可以左键点击选中,通过角点进行缩放;

4.右键点击碰撞矩形,选择删除,可以删除选中的碰撞矩形;

5.点击上方的放大、缩小按钮,可以对画布进行缩放,也可以通过Ctrl+鼠标滚轮进行画布缩放;

3.6导出资源

导出资源面板:

图片最大宽度:合成图片的最大宽度;

图片最大高度:合成图片的最大高度;

碎图缝隙:合成大图中的小图之间的缝隙像素;、

导出路径:用户自定义导出路径;

导出文件包括.png和.plist文件;

当工程中使用的图片合并后的尺寸大于设定的图片尺寸,程序将自动分割合并后的图片成多组合并图片,并添加序列下标;

4.0 自动序列帧动画

(1)右键动画列表,新建动画;

(2)右键结构树,新建图层;

(3)资源窗口,多选序列帧资源;

(4)拖动资源到结构树的图层上,完成自动创建序列帧;

4.1关键帧编辑

(1)选中编辑图层,右键帧编辑区,添加帧;

(2)可选中帧,并拖动帧,进行时间调整;

(3)点击时间刻度区,定位黄色时间线到相应的时间点,右键添加帧,也可以在渲染区对图层元件进行编辑,可以自动补齐关键帧;

4.2骨骼动画编辑

(1)选中图层,点击工具栏 绑定骨骼 按钮,左键点击渲染区图层,并拖动鼠标,画出骨骼;

(2)左键点击骨骼,拖动鼠标进行骨骼的旋转;

(3)按下键盘M键,拖动鼠标,进行骨骼的移动;

(4)按下键盘S键,拖动鼠标,进行骨骼的缩放;

(5)直接点击图层,可以单独对图层进行操作,不影响骨骼;

责任编辑:徐川 来源: cocoachina
相关推荐

2013-06-18 00:45:23

CocoStudio工Cocos2d-x

2013-06-18 02:39:29

CocoStudio工Cocos2d-x

2013-06-18 01:22:46

CocoStudio工Cocos2d-x

2013-06-17 18:19:41

CocoStudio工cocos2d-x

2013-06-03 16:45:54

手游开发CocoStudio下工具

2013-06-20 09:02:51

CocoStudio工cocos2d-x

2010-03-12 14:26:58

Python入门教程

2023-09-07 08:24:35

图形编辑器开发绘制图形工具

2010-08-06 15:44:28

Windows PhoWindows PhoSilverlight

2022-12-02 07:24:46

2010-05-28 13:53:41

Linux开发工具

2023-02-06 16:59:57

Canvas编辑器

2023-06-12 08:22:56

图形编辑器工具

2015-04-24 10:54:58

JavaScript开发工具代码编辑器

2011-09-01 09:58:13

PHP

2023-10-19 10:12:34

图形编辑器开发缩放图形

2021-04-08 14:58:59

开发前端编辑器

2010-03-24 09:20:07

CentOS vi编辑

2009-10-27 12:43:41

linux vi编辑器

2023-09-11 09:02:31

图形编辑器模块间的通信
点赞
收藏

51CTO技术栈公众号