干货:使用Spine制作柔性的骨骼动画详解(DragonBones也能使用)

2023-10-15 09:10

本文主要是介绍干货:使用Spine制作柔性的骨骼动画详解(DragonBones也能使用),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

2015-10-21 15:06 编辑: cocopeng 分类:游戏开发 来源:Tim's Blog

缘起

缘起是要实现一个需求,即寻找一个能制作如下图所示腿部弯曲动画的工具。

ani-example.gif.pagespeed500.gif

由于要求不能使用序列帧动画,因为一旦弯曲效果不理想需要全部重画,美术的工作量会很大,而且序列帧动画的图量也会很大。

一番寻找后,发现骨骼动画工具Spine可以完美的满足需求,并且其支持众多游戏引擎,包括我们正在使用的Cocos2d-x。

下文将会简略介绍骨骼动画的一些基本术语以及如何用Spine做出柔性弯曲的骨骼动画。

一些基本概念

以下将介绍一些骨骼动画的基础概念,便于对骨骼动画不甚了解的童鞋(比如技术)进行扫盲。已经熟悉骨骼动画的童鞋可以直接跳过。

动画的基本原理

动画,顾名思义,即是能动的画,画能随着时间的推移进行变换,从而给人产生一种连续在动的感觉。

在游戏里动画大体有两种制作方式:逐帧动画和补间动画。

逐帧动画即为每一帧画出一张图,然后通过按照一定速度(帧率,每秒多少帧)来播放这些画好的图,从而达到动画的效果。

补间动画则比较偷懒,它不为每一帧绘制一张图,而是对一个「动」的形体设置关键帧,而关键帧之间则通过不同的插值算法进行自动补全中间帧的形体的变化轨迹。

相比于逐帧动画,补间动画更加节省图片,使动画运行时的内存更少和最终包的大小更小,同时也减少了原画的工作量,但其画面的表现可能会略逊于逐帧动画。其中的利弊需要开发者进行平衡取舍。

关键帧(key frame)

关键帧其实就是要动的形体发生「变化」且我们手动记录这些变化的帧,剩余的其他帧则称为补间帧。

关键帧称为「关键」的原因就是每个补间帧上形体的形变参数都是程序根据其前后两个关键帧自动推导出来的。

假设形体在第A帧的位置为PA,我们将这帧标记为关键帧,这个动作一般称为“K帧”。然后在第A+N帧,形体的位置我们设置为PN,我们在A+N帧进行K帧。这样我们就有两个关键帧,当我们播放从A到A+N帧的动画时,我们会发现形体会有从PA到PN的一个位移动画。

骨骼动画(skeleton animation)

想象一个你坐在电脑前打字,你的手指在移动,同时你的手腕也在移动,但是你的躯干却保持不动,你的肘部也固定在桌面上。这一切都是因为你的骨骼驱动了你的肌肉和皮肤,从而使你完成了一系列打字的动作。

骨骼动画即是利用了这个原理,它是一种补间动画。它由两部分组成:骨骼(bone)和蒙皮(skin/mesh)。

蒙皮是素材,可以认为是一张贴图,它显示了动画的外在表现。骨骼本身是不可见的,但对其进行形变会带动蒙皮进行各种形变,从而产生出各种看起来比较真实的动画。

xbones.png.pagespeed.ic280.jpg

蒙皮动画(skinned animation)

一般情况下,一根骨骼通常跟一个贴图进行绑定,这根骨骼完全控制这张贴图的形变。但是因为是刚性的绑定,在关节移动的时候,容易出现裂缝,如下图。

xbone-gap.png.pagespeed.ic.jpg

随着硬件的能力提升,骨骼动画能对贴图的每个顶点做出形变。称为蒙皮(skin)的圆滑三角形网格会绑定到骨骼上,其三角形的顶点会追踪骨骼的移动而产生相应的移动。蒙皮上的每个顶点可以按照权重绑定到多个骨骼上,从而产生自然的拉伸效果。

本文最开始提到的腿部柔性弯曲效果就可以利用蒙皮动画来实现。

权重(weights)

上文提到了权重,其实是一个很关键的概念。

权重是蒙皮上的顶点受到不同骨骼的一个影响因子。其总和为1。

想象一下你弯曲你的肘部,试想你肘部靠前臂上的皮肤的一个点,它主要受到前臂骨骼的影响,但是它也受到上臂骨骼的一些影响。假设其受到前臂骨骼的影响占到它总形变的80%,则它的前臂骨骼的权重为0.8,相应的上臂骨骼对它的权重为1 – 0.8 = 0.2,因为其他骨骼对它的影响可以忽略不计。

以上即是权重的直观概括,权重表示了蒙皮受到不同骨骼的对其形变影响占比,合理分配好每个蒙皮顶点的权重至关重要。

幸运的是Spine可以为我们自动计算权重,避免了繁琐的权重设置,并且能够让我们看到直观的权重分布图。

如何利用Spine制作蒙皮动画?

我们以一个男孩的手为例,来讲述如何在Spine中制作这种柔性的蒙皮动画。

创建骨骼

首先我们需要创建手部的骨骼,如下图所示:

1445412242505327.jpg

  • 确保左上角为SETUP模式

  • 确保选中右边视图中的根骨骼,创建骨骼时必须要选中父骨骼

  • 单击左下角的Create按钮

  • 开始依次创建出5根骨骼

创建蒙皮网格

然后我们需要给手部创建蒙皮网格(MESH),如下图所示:

1445412353776153.jpg

首先,单击创建骨骼的Create按钮,退出骨骼创建模式:

  • 选中手部贴图(Attachment)

  • 勾选其底部的Mesh选项

  • 单击右下角的Edit按钮

  • 呼出了Edit Mesh菜单

  • 勾选Edit Mesh菜单中的Deformed选项

  • 单击Edit Mesh菜单中的Create按钮

  • 开始在手部创建网格顶点

  • 可以单击Edit Mesh菜单中的Modify按钮对顶点进行位移

设置网格点权重

还记得前文所说吗,我们需要给网格顶点设置各个骨骼的权重,整个过程如下图所示:

1445412447221856.jpg

首先,关闭Edit Mesh菜单:

  • 确认勾选的还是手部的贴图

  • 单击左下角的Weights按钮,呼出Weights菜单

  • 单击Weights菜单底部的Bind按钮,来绑定骨骼

  • 选择手部的五根骨骼,直到它们都出现Weights菜单里,注意不同的骨骼颜色是不一样的

  • 单击Weights菜单的Auto按钮或者按esc键,来触发Spine的自动权重计算

  • 勾选Weights菜单的Overlay,我们可以看到绑定后的权重热力图

动起来!

现在我们要让手动起来了,我们只展示一个弯曲手臂的动画即可。

首先,我们需要设置关键帧,让我们在第1帧和第30帧设置好关键帧,这两个关键帧对应的手臂位置是完全一样的,因为我们需要循环播放动画。

具体步骤如下图:

1445412493572938.jpg

确保左上角的模式处于ANIMATE模式

  • 选中手部的五根骨骼(按住cmd键或control键依次点选)

  • 选中第0帧

  • 单击Rotate下的钥匙按钮,我们对手臂的旋转属性设置关键帧

  • 选择第30帧

  • 重复第4步的操作,使第30帧的关键帧与第0帧完全相同

接下来我们只需轻轻旋转手臂,并在0-30帧中间找一个帧当做关键帧即可: 我们选择第15帧作为中间的关键帧。

xkey-frame2.png.pagespeed.ic.jpg

  • 选择第15帧

  • 确保Rotate按钮被选中

  • 向上旋转5根骨骼到一个角度

  • 按下K帧按钮进行关键帧设置

  • 按下播放按钮来预览动画

额外的,我给另一只手、嘴巴、脸部和头发都做了MESH,以下是动画的效果图:

boy.gif.pagespeed.ce300.gif

可以看到,Spine完美的实现了文章开始提到的柔性弯曲动画。

以下是Spine的一些参考资料的链接:

Spine快速入门-官方中文

Spine用户指南-官方英文

Spine官方视频-英文Youtube

一个完整的Spine动画制作视频-中文优酷


这篇关于干货:使用Spine制作柔性的骨骼动画详解(DragonBones也能使用)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/216754

相关文章

一文详解SpringBoot中控制器的动态注册与卸载

《一文详解SpringBoot中控制器的动态注册与卸载》在项目开发中,通过动态注册和卸载控制器功能,可以根据业务场景和项目需要实现功能的动态增加、删除,提高系统的灵活性和可扩展性,下面我们就来看看Sp... 目录项目结构1. 创建 Spring Boot 启动类2. 创建一个测试控制器3. 创建动态控制器注

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker

Python使用vllm处理多模态数据的预处理技巧

《Python使用vllm处理多模态数据的预处理技巧》本文深入探讨了在Python环境下使用vLLM处理多模态数据的预处理技巧,我们将从基础概念出发,详细讲解文本、图像、音频等多模态数据的预处理方法,... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

C#读写文本文件的多种方式详解

《C#读写文本文件的多种方式详解》这篇文章主要为大家详细介绍了C#中各种常用的文件读写方式,包括文本文件,二进制文件、CSV文件、JSON文件等,有需要的小伙伴可以参考一下... 目录一、文本文件读写1. 使用 File 类的静态方法2. 使用 StreamReader 和 StreamWriter二、二进

Python使用pip工具实现包自动更新的多种方法

《Python使用pip工具实现包自动更新的多种方法》本文深入探讨了使用Python的pip工具实现包自动更新的各种方法和技术,我们将从基础概念开始,逐步介绍手动更新方法、自动化脚本编写、结合CI/C... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

Conda与Python venv虚拟环境的区别与使用方法详解

《Conda与Pythonvenv虚拟环境的区别与使用方法详解》随着Python社区的成长,虚拟环境的概念和技术也在不断发展,:本文主要介绍Conda与Pythonvenv虚拟环境的区别与使用... 目录前言一、Conda 与 python venv 的核心区别1. Conda 的特点2. Python v

Spring Boot中WebSocket常用使用方法详解

《SpringBoot中WebSocket常用使用方法详解》本文从WebSocket的基础概念出发,详细介绍了SpringBoot集成WebSocket的步骤,并重点讲解了常用的使用方法,包括简单消... 目录一、WebSocket基础概念1.1 什么是WebSocket1.2 WebSocket与HTTP

C#中Guid类使用小结

《C#中Guid类使用小结》本文主要介绍了C#中Guid类用于生成和操作128位的唯一标识符,用于数据库主键及分布式系统,支持通过NewGuid、Parse等方法生成,感兴趣的可以了解一下... 目录前言一、什么是 Guid二、生成 Guid1. 使用 Guid.NewGuid() 方法2. 从字符串创建

Python使用python-can实现合并BLF文件

《Python使用python-can实现合并BLF文件》python-can库是Python生态中专注于CAN总线通信与数据处理的强大工具,本文将使用python-can为BLF文件合并提供高效灵活... 目录一、python-can 库:CAN 数据处理的利器二、BLF 文件合并核心代码解析1. 基础合

java中反射Reflection的4个作用详解

《java中反射Reflection的4个作用详解》反射Reflection是Java等编程语言中的一个重要特性,它允许程序在运行时进行自我检查和对内部成员(如字段、方法、类等)的操作,本文将详细介绍... 目录作用1、在运行时判断任意一个对象所属的类作用2、在运行时构造任意一个类的对象作用3、在运行时判断