九,骨骼动画

1.骨骼动画vs Sprite sheets

你能使用sprite sheets 创建动画,它很快又容易。直到你意识到你的游戏需要大量的动画并且内存消耗越来越高,并且需要时间载入全部数据。为了限制大小,你需要为动画限制到比较低的FPS,然后动画看起来不会如你所期望的那么平滑。这时你就需要骨骼动画了。

2.骨骼动画简介

骨骼动画在cocos2d-x动画是一个技术,一个角色由两部分组成:一个显示的表皮和类似人骨头样的网格。

Cocos2d-x提供了一种方式来在你的应用程序中使用2 D骨骼动画。骨骼动画设置的过程可能有些复杂,但使用起来很容易,当然有一些工具能简化这个过程。当使用骨骼动画时,动画是由几个骨头批次连接组成。影响一个骨头也会影响它下面的所有子元素。通过在每个骨头不同的组合转换,你可以获得不同姿势的骨架。

如果对于一个时间点的每个骨骼使用某个转换定义关键帧,你能插入关键帧来让骨骼动画更为平滑。附加代码中,我使用一个类,名叫Transformation,它包含2D转换数据,如平移,旋转,缩放。然后一个关键帧通过一个帧数被定义成一个这样的转换。一个关键帧定义了一个KeyframeAnimation的集合。最后一个SkeletonAnimation是一个KeyframeAnimations集合,一个用于每个骨骼。另外,你使用一个骨骼,保持关节的列表定义骨骼的层次结构。不同于sprite sheets每个骨头分配特定的纹理,如下图所示:

3.骨骼动画的工具

据我们所知,CocosBuilder 是一个很好的免费的创建骨骼动画的工具。CocosBuilder于Javascript绑定构建Cocos2d,这意味着你的代码,动画,接口将会在cocos2d-x中无修改运行。

4.使用cocosbuilder动画

你能使用CocosBuilder来创建角色动画
,场景动画或任何你能想象到的动画。动画编辑器已经完全支持多个解决方案,关键帧,骨骼动画和多个时间线等。在主窗口的底部你可以找到时间轴。你使用时间线来创建你的动画。

默认情况下你的ccb-file文件有一个单独的10秒长度的时间线。CocosBuilder编辑动画在每秒30帧的帧率下,当你在cocos2d中你的应用在播放动画时,却是60帧/每秒(默认)。当前时间显示在右上角,格式为分钟:秒钟:帧。蓝色的垂直线显示当前时间。点击time显示改变当前时间线的间隔。

5.添加关键帧

在CocosBuilder中动画是基于关键帧的。你能添加关键帧到不同属性的一个节点中并且CocosBuilder会自动插入到关键帧之间,任意不同类型的容位中。为了添加一个关键帧,首先通过点击名字右边的三角形来展开视图节点。它会展示所有的节点动画属性。取决于你选择的节点类型,动画会有略微不同。一旦属性可见,那么你能点击时间线中用可选的属性。在点击的时候这会创建一个新的关键帧。或者,你可以通过选择一个节点创建一个新的关键帧,然后选择插入关键帧动画菜单。如果你在画布局域转换一个节点,关键帧会自动添加到当前时刻,考虑到转换后的属性在时间轴上已经有一个或多个关键帧。

6.编辑关键帧

你编辑一个特定节点的关键帧通过移动时间标记到关键帧的时刻并选择这个节点。通过双击它你能集中一个关键帧。通过拖动它们周围的选择框,你能选择关键帧并且一起移动它们。你也可以在节点之间复制和粘贴关键帧。在粘贴关键帧时确保你仅有一个已选择的关键帧。这个关键帧将会粘贴到时间标记是起始位置。如果你选择一组关键帧,那么通过选择反向选择关键帧动画菜单可以扭转他们的顺序。使用拉伸选择关键帧选项来加快或减慢一个动画的一个比例系数。

7.导入一个图像序列

如果你有一个通过sprite创建出来的帧动画,它被乏味到移动到时间线每一个帧中。CocosBuilder简化了这个过程通过自动导入一个图像序列。在工程视图的左手边选择你想要导入的关键帧,然后在时间线上选择一个CCSprite。现在在动画菜单中选择Create Frames from
Selected Resources。这关键帧将会自动被创建在标记的起始位置。如果你需要让动画慢下来,选择新创建的关键帧并使用Stretch Selected Keyframes命令

8.使用 Easing

CocosBuilder提供一个可选的cocos2d提供的easings子集。在2个关键帧中右键并选择你想要应用的easing。

一些easings有额外的选项,在easing之后你能再次点击右键运用

9.使用多个时间线

CocosBuilder的动画编辑器一个非常强大的特性就是在一个单一的文件中可以有多个时间线。你能为不同的序列命名并使用它们的名字在代码中播放它们。在不同的时间线中它们也能平滑的转换。

使用时间线弹出菜单,选择,添加,编辑你的时间线。

在编辑时间线的对话框中你能获得你时间线的概述并重命名它们,添加新的一个并设置一个时间线当ccbi-file装入你的应用程序直接自动开始播放。

在时间线中没有关键帧设置可以跨时间线来共享它们的属性值。例如,如果你在一个时间线中移动一个节点,只要它们没有一个关键帧设置position属性,它将被移到所有时间线中。有时添加一个单一的关键帧到一个属性中,为一个特定的时间线,覆盖了共享值是很有用的。

10.链接时间线

你可以自动播放时间序列通过链接它们。你还可以使用这个特性来自动循环的时间表。

在有时间线的播放序列中,点击No chained timeline文本并选择你想要播放当前帧之后的时间线。

11.在代码中播放动画

以编程方式控制你通过CocosBuilder创建的动画,你就需要找到CCBAnimationManager。当ccbi-file被载入时,动画manager将分配到节点userObject。

CCNode *myNodeGraph = ccbReader->readNodeGraphFromFile("myFile.ccbi", this);

动作管理器将返回一个autoreleased对象。播放一个特定的时间线调用runAnimationsForSequenceNamed方法。如果一个时间线是当前正在被播放,当调用这个方法时,它将立即停止。

animationManager->runAnimationsForSequenceNamed("My Timeline");

还有一种可选的情况,你能使用一个在间隔时间期间到平滑转换的新时间线。在可能的情况下线性加速器将被用于转换。

animationManager->runAnimationsForSequenceNamedTweenDuration("My Timeline",0.5f);

也可以检索一个回调,每当一个时间线完成播放时。在序列中你将接收这些回调,即使另一个时间线被链接了。使用CCBAnimationManagerDelegate来接收这些回调。

cocos2d-x开发记录:二,基本概念(骨骼动画)的更多相关文章

  1. Qt移动应用开发(二):使用动画框架

    Qt移动应用开发(二):使用动画框架 上一篇博客介绍了怎样使用Qt的QML来对屏幕分辨率大小进行适应,其实,不同分辨率的适应是一个很棘手的问题,除了分辨率不同外,宽高比(aspect ratio)也不 ...

  2. OpenHarmony标准设备应用开发(二)——布局、动画与音乐

    (以下内容来自开发者分享,不代表 OpenHarmony 项目群工作委员会观点) 邢碌 上一章我们讲解了应用编译环境准备,设备编译环境准备,开发板烧录,将一个最简单的 OpenAtom OpenHar ...

  3. cocos2d-js 骨骼动画 3.10

    近期使用了cocos动画中的骨骼动画,这里记录使用的两种方式(3.10版): 一.cocos自带的动画编辑器导出的动画 ccs.armatureDataManager.addArmatureFileI ...

  4. cocos creator 动画编辑器以及骨骼动画的使用

    一.普通动画的设置 1.添加动画组件 a.添加空节点=>添加动画组件 b.新建Clip文件=>打开编辑模式添加动画编辑(并且把添加的clip文件拖动到右边面板的Default Clip 与 ...

  5. Cocos2d-js 开发记录:骨骼动画载入

    不得不说cocos2d-js的文档实在是少,骨骼动画的载入和C++版本的好像还有些不同不能直接依样画葫芦. 一个由cocos studio编辑生成的骨骼动画一般会包含如下几个文件: .ExportJs ...

  6. Dokuwiki 二次开发记录

    Dokuwiki 二次开发记录 [转]http://www.syyong.com/other/Dokuwiki-Secondary-Development-Record.html DokuWiki 是 ...

  7. SQL开发技巧(二)

    本系列文章旨在收集在开发过程中遇到的一些常用的SQL语句,然后整理归档,本系列文章基于SQLServer系列,且版本为SQLServer2005及以上-- 文章系列目录 SQL开发技巧(一) SQL开 ...

  8. Chrome扩展开发之二——Chrome扩展中脚本的运行机制和通信方式

    目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制 ...

  9. MS CRM 2011的自定义和开发(11)——插件(plugin)开发(二)

    http://www.cnblogs.com/StoneGarden/archive/2012/02/06/2339490.html MS CRM 2011的自定义和开发(11)——插件(plugin ...

随机推荐

  1. springboot项目启动报错

    启动springboot项目报错: NoSuchMethodError: org.apache.tomcat.util.scan.StandardJarScanner.setJarScanFilter ...

  2. jasperreport 通过javabean datasoource实现chart的报表

    继上次report的demo后,还在继续做着report方面的research,今天主要是实现了通过javabean datasource填充chart图表,通过webservice下载pdf格式的报 ...

  3. w3cschool菜鸟教程离线版chm手册正式发布

    w3cschool菜鸟教程是一个提供了最全的的web技术基础教程网站.网站包含了HTML教程.CSS教程.Javascript教程.PHP教程等各种建站基础教程.同时也提供了大量的在线实例,通过实例, ...

  4. Java总结:Java 流(Stream)、文件(File)和IO

    更新时间:2018-1-7 12:27:21 更多请查看在线文集:http://android.52fhy.com/java/index.html java.io 包几乎包含了所有操作输入.输出需要的 ...

  5. 算法笔记_170:历届试题 分糖果(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 有n个小朋友围坐成一圈.老师给每个小朋友随机发偶数个糖果,然后进行下面的游戏: 每个小朋友都把自己的糖果分一半给左手边的孩子. 一轮分糖后 ...

  6. Fiddler SessionFlags

    Each Session object in Fiddler contains a collection of string flags, in the Session.oFlags[] collec ...

  7. 【原创】浅析密码学在互联网支付中的应用|RSA,Hash,AES,DES,3DES,SHA1,SHA256,MD5,SSL,Private Key,Public Key

    一)概述 什么是互联网支付? 当支付遇到互联网,一场革命自然不可避免.成为现实的是传统的现金支付已经“退居二线”,各种在线支付方式成为人们日常消费的主要支付方式.银行推出的网银以及第三方支付公司推出的 ...

  8. maven 配置环境变量

      maven 环境变量配置 CreationTime--2018年6月4日18点45分 Author:Marydon 前言 要先运行maven,需要按安装并配置jdk,没有配置的见文末推荐. 1.m ...

  9. css 设置英文字母大小写转换(text-transform)

      css 设置英文字母大小写转换 CreateTime--2018年5月25日07点16分 Author:Marydon 1.实现:通过text-transform实现 2.text-transfo ...

  10. POJ2226

    题意:给定一个矩阵,当中有一些地方有水,如今有一些长度随意,宽为1的木板,要求在全部板不跨越不论什么坑的前提下,用一些木板盖住这些有水的地方,问至少须要几块板子? 思路: watermark/2/te ...