spine之五——在程序中使用动画

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

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

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

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

  • 更少的美术资源: 骨骼动画的资源是一块块小的角色部件(比如:头、手、胳膊、腰等等),美术再也不用提供每一帧完整的图片了,这无疑节省了资源大小,能为您节省出更多的人力物力更好的投入到游戏开发中去。
  • 更小的体积: 帧动画需要提供每一帧图片。而骨骼动画只需要少量的图片资源,并把骨骼的动画数据保存在一个 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的相关头文件。

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

其常用方法如下:

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

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

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

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

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

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

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

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

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

skeletonNode->timeScale = 0.6f;

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

skeletonNode->debugBones = true;

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

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);

效果图:

时间: 2024-10-01 22:21:40

spine之五——在程序中使用动画的相关文章

实习小白::(转) Cocos2d-x 3.0 开发(七)在程序中处理cocoStudio导出动画

1.概述 使用cocoStudio可以方便的制作动画,接下来的工作就是在我们的程序中使用制作的动画.这篇中,我将使用程序将两个动画连接起来.有图有真相: 2.制作动画 承接上一篇,我们再制作一个动画.制作动画的方法与之前没有差别,不太熟悉的同学可以看:Cocos2d-x 3.0开发(六)使用cocoStudio创建一个骨骼动画.在“动作列表”中右击,“添加动画”然后编辑就成. 我们新制作的动画的结束点,要与上一篇中制作动画的开始点重合,这样在连接的时候,画面就不会跳动. 制作好后我们将动画导出.

【腾讯GAD暑期训练营游戏程序班】游戏中的动画系统作业

游戏中的动画系统作业说明文档   一.实现一个动画状态机:至少包含3组大的状态节点 动画状态机如图所示,其中Blend Tree_Run是一个动画混合树,Blend为混合树的参数,speed为控制动作过渡的参数,共有蹲下空闲状态.走路状态.跑路状态三种状态. (1)    当speed大于0.1时,由蹲下的空闲状态转换为走路状态. (2)    当speed小于0.1时,由走路状态转换回蹲下空闲状态. (3)    当speed大于0.2且在走路状态时,可转换为动画混合树制作的跑步状态. (4)

Cocos Creator中的动画支持技术

Cocos Creator主要亮点 官方的权威描述是:Cocos Creator是以内容创作为核心的一体化游戏开发工具,这个引擎基于Cocos2d-x,组件化,脚本化,数据驱动,跨平台发布.本人使用一段时间后的感觉是,这个工具并不仅仅实现了开发语言由C++向Javascript的转移(当然Cocos Creator是从Cocos2d-js发展而来的),其真正的亮点在于它实现了全面型游戏开发思想的转变.程序员与美工都要熟悉这个工具的整体使用流程,并重点了解二者如何交互.本人感觉在设计之初,通过类似

【转】将3DMAX中的动画通过OGREMAX导入OGRE中,并生成相应的骨骼动画

原创内容转载请注明:http://weibo.com/gdexqin 程序代码的的基础在http://blog.sina.com.cn/s/blog_7c03dc6f01012um2.html中 先看导入后的效果. 动画模型是用别人传到网上的(好像这个人物叫真名法典的样子,不太认识,但是感谢上传者),之前我们已经完成了通过OGREMAX导入静态的场景的效果,导入骨骼动画我们需要对OGREMAX的导出选项进行一些修改. 下面先了解一下OGREMAX的一些基本选项(转自网络): ----------

前端编程提高之旅(十六)————jquery中的动画

    上一篇文章对jquery中的事件做了总结,这篇文章主要对jquery中的动画做一下总结归类.最近微信端分享中,有很多页面交互及动画做的非常受欢迎,非常符合移动端体验.看似花哨的动画从本质上都脱离不了编写动画的基本方法.乐帝将jquery动画部分内容,做了一个简单的归类.     如下图:     如上图所示,无论多复杂的动画,从实现上都采用这些最底层的动画方法.本篇将从动画方法和与动画状态有关的方法讲起.    一.动画方法    1.同时改变高.宽.不透明度方法    这里涉及show

NS2仿真过程中nam动画的保存

关于NS2仿真过程中nam动画的保存为gif格式大家可以参考科学网的这篇博客,http://blog.sciencenet.cn/blog-281551-390046.html,通过实验,个人觉得其实现过程比较复杂. 当然nam程序除了linux版本以外,还有windows版本.可到如下网站进行下载.http://www.isi.edu/nsnam/nam/ ,然后即可利用该可执行文件打开仿真时保存的.nam文件.如在"运行"中键入D:\nam-1.0a11a-win32.exe D:

如何使用iAd在应用程序中展示Banner广告

虽然,你可能即将开始开发下一个超级应用程序,你的一切规划和设计都已就绪,但还是有一件事可能你并没有把它考虑进去--如何通过它盈利呢?有两种选择,要么使它成为一个付费应用程序,那些潜在的用户可以付费下载:或者使它成为一个免费的应用程序,添加一些广告,从广告中赚取收入. 如今的趋势表明,用户更有可能下载免费的应用,而不是收费的应用程序.他们只会购买真正值得购买的应用,或者它是超有名气,并获得良好的评价.然而,如果你决定让你的app免费时,就可以在其内整合广告.要做到这一点,你有不同的服务选择来显示广

了解 JavaScript 应用程序中的内存泄漏

简介 当处理 JavaScript 这样的脚本语言时,很容易忘记每个对象.类.字符串.数字和方法都需要分配和保留内存.语言和运行时的垃圾回收器隐藏了内存分配和释放的具体细节. 许多功能无需考虑内存管理即可实现,但却忽略了它可能在程序中带来重大的问题.不当清理的对象可能会存在比预期要长得多的时间.这些对象继续响应事件和消耗资源.它们可强制浏览器从一个虚拟磁盘驱动器分配内存页,这显著影响了计算机的速度(在极端的情形中,会导致浏览器崩溃). 内存泄漏指任何对象在您不再拥有或需要它之后仍然存在.在最近几

android中的动画全解析

Android为我们提供了2中动画 一: Tween Animation 渐变动画 通过对特定对象做图像的变换,例如: 平移, 缩放,旋转, 淡入淡出 等. 二: Frame Animation 帧动画 创建一个淡入阿瓦不了可以按照指定的时间间隔一个一个显示.顺序播放 下面我们就详细介绍一下这两中动画: 首先我们介绍 渐变动画: 1. Tween Animation 1. 渐变动画有四种样式: alpha: 渐变透明度 scale: 缩放尺寸伸缩动画 translate: 移动动画效果 rota