使用 CocoStudio 创建 Cocos2d-x 序列帧和骨骼动画
2 环境搭建与配置
本文章所使用的系统环境为 win7 系统,CocoStudio-0.2.0 版本。
在当前最新稳定版 Cocos2d-x-2.1.4 的 TestCpp 中已经有例子展示了一些相关骨骼动画的效果。
3 序列帧动画的创建步骤
帧动画,顾名思义!就是将一张张设计好的图片,依次展示出来,就像放胶片电影一样,多帧组成动画效果。不多介绍了,直接看 CocoStudio 的使用方法。
- 打开 CocoStudio 启动动画编辑器
- 点击文件新建项目,并确定
- 在资源窗口选择添加资源,序列帧原图(这里不支持使用plist作为资源,但可以导出plist)
- 选择第一帧图片,拖进“渲染窗口”,选择工具栏第三项,居中显示。(居中可选操作)
- 我们看见在“对象结构”视图中多出一个层,这就是序列帧动画层,在资源视图多选文件(除首帧之外),之后拖动到“对象结构”视图中刚才那个层之上,我们将能够看见“关键帧”视图的变化,当前帧根据图片数量自动变化,注意“对象结构”视图中鼠标的位置。
- 点击“关键帧”视图“播放”即可播放,也可循环播放动画
- 保存项目后,可以导出大图,自动打包资源图片,在本例中生成了 “CsAnim.ExportJson”,”CsAnim0.plist” 和 “CsAnim0.png” 三个文件,然后我们就能拿着这三个文件在 Cocos2d-x 中使用了。
4 如何在 Cocos2d-x 中运行其动画
上面我们生成了一些文件,动画的资源文件,此时我们需要在 Cocos2d-x 中加载这些资源,并运行之,我们将以上文件放在项目 “Resources” 的 “Export” 目录之中。 然后使用如下关键代码,创建动画。例子代码可以从这里下载学习使用:http://www.cocostudio.org/detail.php?id=4062
// 加载资源文件 png 图片,plist 文件和 ExportJson 动画文件,一般而言可以在场景运行之初加载此资源 cs::ArmatureDataManager::sharedArmatureDataManager()->addArmatureFileInfo("Export/CsAnim0.png", "Export/CsAnim0.plist", "Export/CsAnim.ExportJson");// 这里直接使用 CsAnim ,而此信息保存在 CsAnim.ExportJson 中,与其创建的项目属性相对应 cs::Armature* armature = cs::Armature::create("CsAnim"); // 设置当前运行动画的索引,一个“工程”可以建立多个动画 armature->getAnimation()->playByIndex(0); // 设置位置信息 armature->setPosition(VisibleRect::center()); // 添加到容器,当前运行的场景之中 addChild(armature);
5 骨骼动画的创建
前面我们使用了 CocoStudio 动画编辑器创建并在游戏中使用了序列帧动画,那么我们现在看看怎么使用其创建骨骼动画,相比序列帧动画,其导出的文件使用方法和序列帧相同,这里详细介绍下怎么使用动画编辑器创建骨骼动画。
骨骼动画创建步骤稍微复杂,请注意版本变化,操作可能不同
http://bbs.cocostudio.org/forum.php?mod=viewthread&tid=168&extra=page%3D1
- 首先创建项目,把准备好的资源图片导入
- 我们需要得资源一个个拖动到“渲染视图”并摆放好位置关系,注意“对象视图”可以上下移动层次,以改变显示的位置关系(前后关系)Ctrl+鼠标滚轮可以放大或是缩小“渲染视图”,空格加拖动可以拖动渲染视图,方便编辑
- 位置摆好,我们就开始创建骨骼体系了,我们以身体作为基准创建
- 修改编辑模式,默认是动画模式,点击工具栏“动画模式”,然后会转变成“体型模式”,然后点击“停止创建骨骼”会转变为“创建骨骼模式”,然后就可以添加骨骼,我们在身体的部位用鼠标画出骨骼!可以连续画出多个。
- 退出“创建骨骼模式”至“停止创建骨骼”模式,我们看到骨骼已经画出,现在要做的就是资源素材与骨骼的绑定,和骨骼的结构关系设定。
- 右击渲染场景的资源,选择“绑定到骨头”,然后选择骨骼(选择的骨头高亮显示),依次设定绑定所有
- “如果绑定,可能会丢失图层帧信息,是否继续?”直接是即可。
- 右击骨骼“绑定到父亲”,依次根据身体部位设定好。
依照以上方法设定好资源图片与骨骼的对应关系,当然还有各骨骼之间的“父子”关系。 至此骨骼体系已经创建完成,下面则是基于此创建动画效果
- 首先切换到“动画模式”,不同的模式功用不同
- 选中当前帧的所有层,并且复制
- 复制之后,在“如”第十五帧之处右击粘贴
- 以上的复制粘贴的目的是为了使动画的首帧与尾帧相同,完成一个动画循环效果
- 有了首尾帧,我们便可在中间帧编辑动画,选中“如”第六帧,然后拖动如图“手枪”骨骼
- 点击播放就能看见动画效果了,我们可以在定位到其它帧,然后编辑骨骼的位置关系,最终创建出达到我们预期效果的骨骼动画
使用 CocoStudio 的动画编辑器来创建动画的简单步骤如上过程,这里只是简单快速的 “预览” 了一下其功能,但是更多的需要用户动手的实际操作~
使用 CocoStudio 创建 Cocos2d-x 序列帧和骨骼动画相关推荐
- cocos2d 用MotionStreak给骨骼动画的刀加拖尾(刀光拖尾)
最近刚去公司工作,没有一点经验,真是苦逼,做一个demo,当骨骼动画(刀这个骨骼砍得时候能够出现拖尾效果,真是想破脑袋),经过不断的尝试,总结出了一个方法: 直接上代码: MotionStreak * ...
- 在cocos2d-x中使用DragonBones实现骨骼动画
基础知识 要看懂本文,你需要了解骨骼动画(或称关节动画)是什么,以及DragonBones是什么.下面提供了一些资料: Skeletal Animation (Wikipedia en) Dragon ...
- DragonBones骨骼动画制作软件
一.导入项目 1.该软件支持读取PSD格式,自动将各个图层分离出来然后生成项目.我们可以点击软件的帮助栏来获取相关的操作. 2.自己创建一个项目 二.骨骼动画的相关知识 骨骼动画就是将贴图绑上骨骼,然 ...
- 从零开始学习cocoStudio(5)--骨骼动画使用方法
骨骼动画 当前有两种模型动画的方式:顶点动画和骨骼动画.顶点动画中,每帧动画其实就是模型特定姿态的一个"快照".通过在帧之间插值的方法,引擎可以得到平滑的动画效果.在骨骼动画中,模 ...
- 骨骼动画原理与Cocos2d骨骼动画
骨骼动画原理与Cocos2d骨骼动画 声明:本文使用的是cocos2d-x-3.17的代码 文章中的提到的测试代码下载地址https://gitee.com/Kyle12/Cocos2dRenderS ...
- Unity 2D骨骼动画2:创建真实动画
http://bbs.9ria.com/thread-401781-1-1.html 在这个系列,我们将关注Unity引擎提供的基于骨骼动画工具.它的主要思想是为了把它应用到你自己的游戏来介绍和教基本 ...
- Unity 2D教程 | 骨骼动画:创建动画
转载自:2016-02-13 Unity官方平台 本教程主要讲解Unity引擎自带的2D骨骼动画工具,以及2D动画的基本概念.本篇会添加一些动画,如默认状态.跳动.坠落等. 基础动画理论 制作动画要牢 ...
- 利用Unity插件Anima2D创建2D骨骼动画
利用Unity插件Anima2D创建2D骨骼动画 创建步骤 导入Anima2D插件 准备2D素材 配置2D骨骼 对2D角色应用IK(反向动力学) 利用Animation创建2D人物动画 创建步骤 导入 ...
- cocostudio骨骼动画问题总汇
<span style="font-size:18px;"><strong>cocostudio骨骼动画问题总汇:</strong></s ...
- cocos2d-x 骨骼动画详解
骨骼动画 vs. 精灵表(sprite sheets) 创建动画又快又简单的方法是使用"精灵表"(sprite sheets).当你意识到游戏需要大量动画,内存消耗会涨上来, ...
最新文章
- springboot整合Quartz实现动态配置定时任务
- 【控制】《多智能体系统一致性协同演化控制理论与技术》纪良浩老师-第10章-二阶离散时间时延多智能体系统加权一致性
- (原) Data Blocks, Extents, and Segments
- [转]Fiddler模拟post四种请求数据
- python中的常量可以修改吗_python实现不可修改的常量
- linux 运行 chom,Hadoop安装-单节点/伪分布(2.7.3)
- 文案月薪3w?月薪10w的设计大神笑而不语
- 列表使用与内部实现原理
- MongoDB 教程索引 (附有视频)
- Nodejs ORM框架Sequelize
- 神州数码笔试题C语言,神州数码程序类笔试题分享
- 国产操作系统往事:四十年激变,终再起风云
- python函数可以提高代码执行速度吗_Python代码运行速度慢?这五种方法很管用
- 按钮 java_按钮大小(Java)
- macOS Big Sur中“通知中心”的小组件
- 好好工作,别想不开去创业。
- OpenWrt running on VMware
- vrPlus之ARView教程,可实现zView效果,无需二次开发
- 用计算机怎么计算税率表,个税计算器2016年税率表公式
- 马斯克的“圣战”:阻止人工智能毁灭人类
热门文章
- 购物车html js代码,js实现购物车功能
- oracle excel vba6,vba6.dll下载
- ★★★★★手把手教你如何利用凤凰实现破 解后台权限以及升级固件(刷机)★★★★★...
- 五种方法快速查找对方IP地址(转)
- C++STL源码剖析之vector
- 70个python毕设项目_这10个Python项目很有趣!
- MATLAB矩阵合并
- matlab切片操作
- 一文读懂python中数据纬度是怎么数的。
- 初学C语言2--C语言项目的基本框架