游戏中人物的走动,跑动,攻击等动作是必不可少,实现它们的方法一般采用帧动画或者骨骼动画。

帧动画与骨骼动画的区别在于:帧动画的每一帧都是角色特定姿势的一个快照,动画的流畅性和平滑效果都取决于帧数的多少。而骨骼动画则是把角色的各部分身体部件图片绑定到一根根互相作用连接的“骨头”上,通过控制这些骨骼的位置、旋转方向和放大缩小而生成的动画。

它们需要的图片资源各不相同,如下分别是帧动画和骨骼动画所需的资源图: 
 

骨骼动画比传统的逐帧动画要求更高的处理器性能,但同时它也具有更多的优势,比如:

  • 更少的美术资源: 骨骼动画的资源是一块块小的角色部件(比如:头、手、胳膊、腰等等),美术再也不用提供每一帧完整的图片了,这无疑节省了资源大小,能为您节省出更多的人力物力更好的投入到游戏开发中去。
  • 更小的体积: 帧动画需要提供每一帧图片。而骨骼动画只需要少量的图片资源,并把骨骼的动画数据保存在一个 json 文件里面(后文会提到),它所占用的空间非常小,并能为你的游戏提供独一无二的动画。
  • 更好的流畅性: 骨骼动画使用差值算法计算中间帧,这能让你的动画总是保持流畅的效果。
  • 装备附件: 图片绑定在骨骼上来实现动画。如果你需要可以方便的更换角色的装备满足不同的需求。甚至改变角色的样貌来达到动画重用的效果。
  • 不同动画可混合使用: 不同的骨骼动画可以被结合到一起。比如一个角色可以转动头部、射击并且同时也在走路。
  • 程序动画: 可以通过代码控制骨骼,比如可以实现跟随鼠标的射击,注视敌人,或者上坡时的身体前倾等效果。

骨骼动画编辑器——Spine

Spine是一款针对游戏的2D骨骼动画编辑工具,它具有良好的UI设计和完整的功能,是一个比较成熟的骨骼动画编辑器。Spine旨在提供更高效和简洁的工作流程,以创建游戏所需的动画。

使用Spine创建骨骼动画分两大步骤:

  1. 在SETUP模式下,组装角色部件,为其绑定骨骼;
  2. 在ANIMATE模式下,基于绑定好的骨骼创建动画。

下面简单介绍下具体步骤,更多详细内容请查看官方网站教程:Spine快速入门教程。

1)在SETUP模式下,选中Images属性,导入所需图片资源所在文件夹,其中路径名和资源名中不能出现中文,否则解析不了; 
2)拖动Images下的图片到场景,对角色进行组装(把各个身体部位拼在一起),可通过Draw Order属性调整图片所在层的顺序; 
3)创建骨骼,并绑定图片到骨骼上,要注意各骨骼的父子关系。 
4)切换到ANIMATE模式,选中要“动”的骨骼,对其进行旋转、移动、缩放等操作,每次改动后要记得打关键帧。 
5)在菜单栏找到Texture Packer项,对角色纹理进行打包,资源文件后缀为atlas(而非Cocos2d-x常用的plist)。打包后将生成两个文件,即:png 和 atlas。 
 
6)导出动画文件Json。

Spine动画的使用

Cocos2d-x程序中,使用Spine动画首先需要包含spine的相关头文件。

1
2
3
#include <spine/spine-cocos2dx.h>
#include "spine/spine.h"
using namespace spine;

其常用方法如下:

创建一个Spine动画对象,将动画文件和资源文件导入。

1
auto skeletonNode = new SkeletonAnimation("enemy.json", "enemy.atlas");

骨骼动画往往是不止一个动画的,例如:当人物需要行走时,就设置播放动画为行走;当要发动攻击时,就设置播放动画为攻击。下面方法可以设置当前播放动画,其中参数false表示不循环播放,true表示循环播放。

1
skeletonNode->setAnimation(0, "walk", true);

setAnimation方法只能播放一种动画,所以当要连续播放不同的动画时,需要使用addAnimation方法来实现,它可以一条一条的播放不同的动画。

1
2
skeletonNode->addAnimation(0, "walk", true);
skeletonNode->addAnimation(0, "attack", false);

对于一般情况下,动画的切换要求两个动画完全能衔接上,不然会出现跳跃感,这个对于美术来说要求很高,而Spine加了个动画混合的功能来解决这个问题。使得不要求两个动画能完全的衔接上,比如上面的walk和attack动画, 就是衔接不上的,直接按上面的办法播放,会出现跳跃,但是加了混合后,看起来就很自然了。哪怕放慢10倍速度观察,也完美无缺。这个功能在序列帧动画时是无法实现的,也是最体现Spine价值的一个功能。

1
2
skeletonNode->setMix("walk", "attack", 0.2f);
skeletonNode->setMix("attack", "walk", 0.4f);

设置动画的播放快慢可通过设置它的timeScale值来实现。

1
skeletonNode->timeScale = 0.6f;

设置是否显示骨骼通过设置debugBones,true表示显示,false表示隐藏。

1
skeletonNode->debugBones = true;

例子:创建一个player行走和攻击的动画, 并且循环播放。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
auto skeletonNode = new SkeletonAnimation("enemy.json", "enemy.atlas");
skeletonNode->setMix("walk", "attack", 0.2f);
skeletonNode->setMix("attack", "walk", 0.4f);
skeletonNode->setAnimation(0, "walk", false);
skeletonNode->setAnimation(0, "attact", false);
skeletonNode->addAnimation(0, "walk", false);
skeletonNode->addAnimation(0, "attact", true);
skeletonNode->debugBones = true;
Size windowSize = Director::getInstance()->getWinSize();
skeletonNode->setPosition(Point(windowSize.width / 2, windowSize.height / 2));
addChild(skeletonNode);

效果图: 

Cocos2d-x游戏开发之骨骼动画详解-Spine相关推荐

  1. 骨骼动画详解-Cocos Studio

    任珊原创,首发于泰然,转载请注明出处 https://github.com/chukong/cocos-docs/blob/master/manual/framework/native/v3/spin ...

  2. Unity载入骨骼动画详解

    Spine Skeleton Animation(2D骨骼动画) 骨骼动画 首先我们来看到底什么是骨骼动画: 在早期的机器上,渲染本身已经占用了很多CPU资源,因此,对于渲染,往往采取的是一种空间换时 ...

  3. 骨骼动画详解 和 帧动画

     骨骼动画 vs. 精灵表(sprite sheets) 创建动画又快又简单的方法是使用"精灵表"(sprite sheets).当你意识到游戏需要大量动画,内存消耗会涨上来, ...

  4. cocos2d-x 骨骼动画详解

     骨骼动画 vs. 精灵表(sprite sheets) 创建动画又快又简单的方法是使用"精灵表"(sprite sheets).当你意识到游戏需要大量动画,内存消耗会涨上来, ...

  5. 使用Spine制作柔性的骨骼动画详解

    缘起是要实现一个需求,即寻找一个能制作如下图所示腿部弯曲动画的工具. 由于要求不能使用序列帧动画,因为一旦弯曲效果不理想需要全部重画,美术的工作量会很大,而且序列帧动画的图量也会很大. 一番寻找后,发 ...

  6. Unity3D游戏开发之跑酷游戏项目详解

    今天的博客的主题就是<游戏开发之跑酷游戏项目讲解>. 从我们自身来考虑这件事情,当你选择做自己热爱的事情的时候,你的内心一定是充满激情和勇气的,你愿意看到自己的努力,你愿意看到自己的付出, ...

  7. 3D游戏开发中的矩阵详解

    矩阵很多同学没有接触过,所以感觉很难,很复杂,其实只要学过矩阵的同学都知道,矩阵运算并不难.今天我们给大家讲讲游戏开发中的矩阵的运算. 这里有个游戏开发交流小组 大家可以一起来学习交流哦 1:矩阵是什 ...

  8. 【手机游戏开发优化篇】详解手游[体积]及[运行内存]的优化篇!

    本站文章均为李华明Himi原创,转载务必在明显处注明:(作者新浪微博:@李华明Himi) 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/android- ...

  9. 【通知】▁▂▃ Himi 最新著作《iOS游戏编程之从零开始—Cocos2d-x与cocos2d引擎游戏开发》★书籍源码+第4/5/6样章★-免费下载★ ▃▂▁

    2013年新年,Himi的第二本著作:<iOS游戏编程之从零开始-Cocos2d-x与cocos2d引擎游戏开发>一书正式发售: (大家可以到新华书店.淘宝.拍拍.当当.亚马逊等进行购买) ...

  10. 《Cocos2d 跨平台游戏开发指南(第2版)》一1.9 添加动作到精灵

    本节书摘来异步社区<Cocos2d 跨平台游戏开发指南(第2版)>一书中的第1章,第1.9节,作者: [印度]Siddharth Shekar(谢卡)译者: 武传海 责编: 胡俊英,更多章 ...

最新文章

  1. 一个不错的命令行解析类
  2. spring cloud微服务分布式云架构 - Spring Cloud集成项目简介
  3. Apache Mina 介绍
  4. visual studio 2015安装 无法启动程序,因为计算机丢失D3DCOMPILER_47.dll 的解决方法
  5. 小汤学编程之JAVA基础day12——异常
  6. 单页面与多页面的优缺点
  7. python笔记-标准库unittest
  8. vue获取编辑器纯文字_vue中使用富文本编辑器
  9. yolov1-v5学习笔记及源码解读
  10. python treeview控件使用详解_python绘图工具turtle库的使用详解
  11. ResNet----残差结构
  12. document.body、document.documentElement和window获取视窗大小的差别
  13. java流程图表示输入 输出,用流程图描述算法
  14. qpsk调制matlab仿真,QPSK调制解调仿真
  15. 计算器计算经纬距离_经纬距离计算器下载_经纬距离计算器官方下载-太平洋下载中心...
  16. python录制音频
  17. 井下三专两闭锁的内容_三专两闭锁
  18. 家用无线路由器的选购技巧
  19. iterative-mergesort
  20. 激光电视好还是OLED电视好?两者各有什么优缺点

热门文章

  1. 如何把视频生成二维码,手机扫一扫就可以看
  2. JavaScript hash 与 history 实现客户端路由的原理
  3. gmail注册方法_“ Gmail脱机”应用正在关闭,这是使用的替代方法
  4. uniapp 蓝牙通讯(搜索/连接蓝牙、读、写)
  5. ora12514问题怎么解决linux,ORA-12514问题解决
  6. iphone 如何给cydia添加中文源和威锋源
  7. 华为手机的快应用是什么?如何使用快应用?
  8. Linux中RPM(红帽软件包管理器)
  9. 小红帽linux软件,linux常用软件类表
  10. 鸿蒙版瑞幸咖啡开发日记(四)咖啡详情页