CocoStudio 《动画编辑器 》教程(转)

最新推荐文章于 2016-11-16 21:41:13 发布
最新推荐文章于 2016-11-16 21:41:13 发布
阅读量5.3k 收藏
点赞数
分类专栏： cocos2d-x

转自:
CocoStudio 《动画编辑器 》教程
http://bbs.cocostudio.org/forum.php?mod=viewthread&tid=168&fromuid=214

动画编辑器 视频地址：

http://v.youku.com/v_show/id_XNTQzNjQ5MDI4.html


1.1     界面介绍
v 动画列表：工程文件可以支持多个动画编辑编辑，动画列表下的一个元素就是一个完整的动作；
v 对象结构：是一个列表结构，展示当前动作的所有图层；
v 帧编辑区：针对于当前动作的图层进行动作帧的编辑，还可以播放预览当前动作；
v 渲染区：主要的编辑窗口，实时显示当前动作的帧效果，可以进行平移、旋转、缩放和骨骼绑定等操作；
v 资源编辑区：可以对当前选中的图层使用到的图片资源进行编辑，可以更改图片的锚点，也可以添加碰撞块数据；
v 属性窗口：支持对当前选中图层的数字编辑；
v 资源窗口：支持对当前工程的资源管理；
v  日志窗口：日志窗口用来记录所有操作的明细和历史。


AniamtionEditor.jpg (106.43 KB, 下载次数: 0)

AniamtionEditor.jpg


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

新建工程.jpg 

2.2 导入资源
1.点击菜单栏的文件菜单，下拉列表中的导入资源菜单，可以导入单个文件，也可以导入整个文件夹；
2.也可以点击资源窗口的图标按钮，分辨导入单个文件，和整个文件夹；

导入资源_2.jpg 

导入资源_1.jpg 

2.3资源编辑
右键点击资源窗口的资源，可以进行删除，重命名的操作；
可以再资源窗口下方的预览窗口，查看选中的资源预览效果图；
资源编辑.jpg 

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文件；

当工程中使用的图片合并后的尺寸大于设定的图片尺寸，程序将自动分割合并后的图片成多组合并图片，并添加序列下标；
导出资源.jpg


4.0 自动序列帧动画
(1)右键动画列表，新建动画；
(2)右键结构树，新建图层；
(3)资源窗口，多选序列帧资源；
(4)拖动资源到结构树的图层上，完成自动创建序列帧；

4.1关键帧编辑
(1)选中编辑图层，右键帧编辑区，添加帧；
(2)可选中帧，并拖动帧，进行时间调整；
(3)点击时间刻度区，定位黄色时间线到相应的时间点，右键添加帧，也可以在渲染区对图层元件进行编辑，可以自动补齐关键帧；

4.2骨骼动画编辑
(1)选中图层，点击工具栏 绑定骨骼 按钮，左键点击渲染区图层，并拖动鼠标，画出骨骼；
(2)左键点击骨骼，拖动鼠标进行骨骼的旋转；
(3)按下键盘M键，拖动鼠标，进行骨骼的移动；
(4)按下键盘S键，拖动鼠标，进行骨骼的缩放；
(5)直接点击图层，可以单独对图层进行操作，不影响骨骼；


海洋
关注
专栏目录
Cocos2d-x 3.0开发（六）使用cocoStudio创建一个骨骼动画
阿修罗道
10-18 4万+
概述：虽然我们已经会使用静态的UI控件了，但还远远不够，接下来我们再研究一下动画的使用...... 先上图：
cocos动画编辑器
m0_46113894的博客
01-16 535
cocos动画编辑器动画编辑器添加动画编辑动画插入关键帧呼吸效果帧动画不规则路线 动画编辑器 添加动画 添加节点 添加 Animation 组件 选中节点，在属性检查器里，添加组件 | 其他组件 | Animation 添加 Animation Clip 动画片段 在资源管理器里，添加 anim 目录，添加 Animation Clip 。 把 Clip 添加到 Animation 组件的Default Clip 记得勾选Play On Load选项 对照下图设置： Animation 组件：用于播放
（1）了解cocostudio基础
02-03 601
操作界面   Cocos Studio的界面主要分为菜单栏、工具栏、对象面板、资源面板、画布面板、属性面板、动画面板、输出窗口、状态栏九部分组成，如下图： 菜单栏   菜单栏为Cocos Studio提供了功能入口，它由文件、编辑、视图、项目、窗口、语言、帮助7个命令菜单组成，Mac和Windows菜单项中包含的功能是一样的，只是排序和位置不同而已，下面就以Windows为例...
cocostudio 使用教程
weixin_33895695的博客
09-05 136
项目配置 http://blog.csdn.net/chinahaerbin/article/details/21559351 项目配置如下： 还要引入命名空间之类的： #include "ui/CocosGUI.h" #include "cocostudio/CocoStudio.h" using namespace cocostudio; USING_NS_CC; us...
Cocos2d-x教程 CocoStudio篇 (2) UIButton控件
xidajiancun
12-20 218
欢迎加入 Cocos2d-x 交流群:193411763 欢迎转载，转载时请注明原文地址：http://blog.csdn.net/u012945598/article/details/17429575 需要源码的朋友可以留下邮箱地址，不过这东西这么简单应该不需要吧.... 做过iOS开发的都应该知道，在iOS的UI控件中，有这样一种控件...
cocos2d-x3.1 Cocostudio 场景编辑器
09-15
《cocos2d-x3.1与Cocostudio场景编辑器详解》 在游戏开发领域，cocos2d-x3.1是一个广泛使用的2D游戏引擎，它为开发者提供了强大的功能，支持跨平台的游戏开发。Cocostudio是cocos2d-x生态系统中的一个重要组成部分...
CocoStudio骨骼动画API详解与使用教程
开发者首先在CocoStudio编辑器中设计和导出动画资源，然后在代码中使用API加载和播放这些动画。通过`create`方法创建`Armature`实例，`setAnimation`方法设置动画控制器，最后调用`play`方法启动动画。 总结来说，...
CocoStudio 场景编辑器API使用手册
01-27
场景编辑器API是CocoStudio的核心组成部分之一，它允许开发者通过编程方式与场景进行交互，创建、修改和控制游戏场景。在《CocoStudio 场景编辑器API使用手册》中，我们将深入探讨这一主题，了解如何利用这些API实现...
Cocos2d-x 3.0 开发（十）使用CocoStudio场景编辑器关联组件
11-08
我们有了UI交互、有了动画人物、有了物理模拟，还差最后一步...这次我们使用cocoStudio中的场景编辑器，将先前做过的所有东西都放到一个场景中去。相关博客：http://blog.csdn.net/fansongy/article/details/14544921
3D动画编辑器
06-29
3D动画编辑器，好用，欢迎大家放心使用，无需任何插件．
GIF动画编辑器
06-07
超级好用的GIF动画图片修改和编辑小工具,非常实用的小工具.
spritex动画编辑器
08-31
传说中gameloft流传出来的动画编辑器，是真是假这里不做结论，但是软件本身很好用，功能强大,推荐下载！
COCOstudio动画实例
03-24
COCOstudio动画实例 盖伦的 待机 攻击 技能 胜利 受伤
CocoStudio(cocos2dx编辑器，集合动作，UI，等）
04-16
About CocoStudio is a game development tool kit based on Cocos2d-x. It breaks down tasks in game development into different roles, it includes: UI editor for UI graphic artists, Animation editor for graphic artists, Number cruncher for game data designers, Scene editor for game designers CocoStudio forms a complete game development solution. The UI editor The UI was designed to serve its only purpose: create UI for games. Its simple and intuitive interface allows graphic artists to focus on their expertise, without worrying about other aspects such as programming. Currently the UI editor has 12 different UI elements ready to be used in games, new UI elements will be added with each and every release of CocoStudio, Other key features that the UI editor supports are: Texture packaging - Automatically packs individual texture files into a single large sprite, which further saves memory and improves game performance. Multi-resolution adaption - Automatically adapts to multiple resolution sizes with relative UI positioning. Templating - Reuse the same UI layout across different games, swap out texture resources to give it a new look. The Animation editor The Animation editor was designed to feel like Adobe Flash, which makes graphic artists feel right at home. The Animation editor brings skeletal animation to Cocos2d-x. What advantage does skeletal animation holds against the traditional frame animation? Lower memory consumption - An animation with the traditional frame based solution could use dozens of individual textures, but with skeletal animation, only 1 set of body parts is required to make infinite number of different animations. Smaller file size - due to less number of assets. Animation blending - you can combine animations together to easily make new animation, for example, you could blend attacking animation with walk animation to create "attacking while walking animation". Animation reuse - you can share skeletal animations with another character with the same skeleton setup. Smooth interpolation - traditional frame based animation is very choppy especially in slow motion. Skeletal animation interpolates between 2 sets of key frames, so animation is always played at the same frame rate as the game. However Skeletal animation cannot replace the traditional frame based animation, for example, it cannot make isometric character, it cannot make explosion, that is why we did not forget frame based animation, we even made it better and simpler. You only have to drag and drop frame sequences to the work space, and the animation editor will automatically creates the frame animation for you. Other highlight of Animation editor includes: WYSIWYG collision box editing - editing collision box in wysiwyg way has never being easier and accurate. Reference point - enables characters to wield swords, mount horses, and attaching other objects easily. Texture packing - Automatically packs individual texture files into a single large sprite, which further saves memory and improves game performance. The Data Cruncher The data Cruncher imports excel tables and converts the data into a format readable by cocos2d-x, which can also be used as a component for the Scene editor. The Scene editor The scene editor pieces all the assets made by the UI editor, Animation editor, and the Data Cruncher into a game scene, it can then simulate the game inside the editor. The scene editor also supports many assets made from third party editors such as particle designer, tiled etc. The scene editor relies on the CocosStudio Framework. CocoStudio Framework CocoStudio Framework is an open source higher level framework on top of Cocos2d-x, it employes entity and component system, it is used to read the data saved from the scene editor. The Scene editor saves data in a MVC like fashion, it includes all entities and events used in the current scene, and exports to corresponding code template for the programmers. A programmer can then write the code in Javascript to bring the game alive. CocoStudio的安装 1.CocoStudio的运行平台是Windows操作系统，推荐使用Windows7操作系统。 2.安装CocoStudio之前，确保电脑中安装了.Net 4.0 Framework 3.安装目录尽量不要在C盘的Program Files文件夹下，可能会导致启动器无法启动编辑器。当然，通过“以管理员身份运行”的方式也可以打开软件 4.在Xp和Windows8的操作系统下，可能会出现的闪屏或无法运行的问题。这个问题会尽快修复
CocoStudio 数据编辑器的使用教程
卖萌的大叔的专栏
05-26 2987
1. 在数据编辑器中导入Excel文件 2. 导出Json文件，选择属性模式 3. 使用文本编辑器查看Json数据 4. 在程序中添加Json解析函数 void getJsonFromFile(const char* fileName, rapidjson::Document &jsonDict) {
CocoStudio基础教程(5)使用CocoStudio场景编辑器关联组件
09-24 196
1、概述 　　我们有了UI交互、有了动画人物、有了物理模拟，还差最后一步——将这些元素融合起来。这就要用到cocoStudio中的场景编辑器了。这次我们要将先前我们做过的所有东西都放到一个场景中去。这项工程比看起来是要简单。 2、创建场景 　　运行CocoStudio，选择SceneEditor。进入后创建一个新的工程：MyScene。然后找到先前我们制作的UI部分的导出资源、动画...
CocoStudio 简单使用动画
bull521的博客
11-16 5013
版本： cocos2dx 3.9 cocostudio 3.9 首先抱怨一下cocos2dx官方对cocostudio的不更新，不过现在cocostudio也够用了，不过还是要腹黑一下。。。。 今天接触到了cocostudio的动画部分，所以就做个简单的总结 载进行动画编辑时，很多都用到了 “开始记录动画”这个勾选选项 这个选项是很重要的，不开启的话比如 帧事件，不透明度都是没
出来行，迟早是要还的!（篇二）学会使用cocostudio的动画编辑器基础
镜子蓝玉的专栏
10-19 4893
本文是篇很新手的博客，5分钟。在正常的游戏行业开发工作流程中，我们作为编码人员，铁三角之一，要学会和策划、美术沟通。所以我们需要去接触一些边缘事务，比如触控发布的cocostudio，已然成为行业必备工具集。这个集场景、UI、动作和数据与一身的编辑器在2014年下半开始崭露头角，随着Adobe伴随页游衰退的脚步退出中国市场，大家开始正眼看这个曾经各种bug的工具箱。编码人员要去堆UI，我不想去吐槽行业的不良习惯，我只能说我要尽量找一个有UI设计师的公司，这样子，他根据策划和美术提供的资源区完成UI的设计和堆
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值