Libgdx播放Spine动画(1)-基础

博客已迁移：更多技术文章请前往AyoCrazy.com—Libgdx播放Spine动画（1）

Spine作为2D骨骼动画编辑器中的佼佼者，其高效简洁的操作流程，强大并且实用的各种功能，受到越来越多的动画设计师的青睐。Spine的作者本人也是libgdx的联合作者，其中也大量的用到了libgdx的相关内容，所以spine和libgdx也算是近亲关系。本文就来讲一讲在libgdx中如何播放Spine动画，以及在使用spine动画过程中遇到的各种坑。

原理

在写具体的代码之前，我想把spine动画文件进行一个简单的讲解，这对于理解spine动画的运行流程有极大的帮助，既方便排除一些坑，而且在以后的复杂项目中，要实现一些特殊功能也可以很容易地对运行库进行改写。

spine文件结构

spine的导出文件一般有三个，后缀名分别为”.atlas”,”.png”,”.json”。前面两个是纹理集合，后面一个就是对骨骼动画的描述文件，以json形式。最关键的就是要了解这个json文件的内容，我们可以打开一个spine的json文件看一看。将会看到json文件通常是这样的形式：

“skeleton”:{ 哈希值，版本，宽高、纹理路径 }

“bones”:{ 关节名称、父级、长度、xy、旋转 }

“slots”:{ 插槽名称、关节、附件 }

“skins”:{ 皮肤 }

”皮肤名程”

”对应插槽”

”对应附件”：{ 附件名称、路径、坐标、缩放、选装、宽高 }

“animations”:{ 动画 }

”动画名称”

”控制”

… (这里不再详细叙述，控制的部件不同，中间层级也不尽相同)

”关键帧”:{ 时间、参数 }

大概就是这个样子，其中一些关键名词这里做出一些解释：

skeleton：骨骼。指的是整套骨骼，不是某一个关节。
bones：关节。骨骼中的一些关节节点，有层级关系。
slots：插槽。附着在关节上的，用于在关节上添加附件。
attachment：附件。例如为某个关节贴上图片，这个贴图就是一个附件。附件必须添加到插槽上，并且一个插槽只能同时拥有一个附件。附件种类不止贴图一种。
skin：皮肤。定义了每个插槽附件的实现，例如贴图附件，皮肤中会为该附件指定其对应纹理集合中的纹理区域，以及该纹理的其它参数。而插槽中的附件只定义了一个名字，具体的实现是在皮肤中定义的。
animation：动画。定义了骨骼中每个部件的动画形式和关键帧。

spine加载过程

1. 首先获取纹理集合，即拿到TextureAtlas;
2. 读取json文件，获取文件中包含的全部信息;
3. 用json信息中的骨骼部分(包含关节、插槽、附件、皮肤)初始化一个骨骼出来，仅仅是骨骼并不包含动画；
4. 用json信息中的动画部分初始化出一个动画控制器，并为每个动画创建一个时间轴;
5. 播放动画的时候，通过时间轴信息去控制每一帧骨骼的位移、旋转、缩放、颜色、形变等来达到动画效果。
6. 也可以直接控制骨骼，通过代码来做出一些特殊效果。

Spine运行库

了解了基本原理之后，就可以下载官方的libgdx-spine运行库，集成到libgdx中了。

到github上将运行库源码拷下来，放到工程中，或者自己打包成jar包。

https://github.com/EsotericSoftware/spine-runtimes

导入运行库之后就可以开始在项目中播放spine动画了，此处作个简单演示。

首先，创建libgdx工程，将spine官方示例中goblins文件导入到assets文件夹下。

共三个文件，必须放在相同路径下。如下：



接下来就可以写代码了，在主类中：

private SkeletonMeshRenderer render;
private SkeletonData sData;
private AnimationState state;
private Skeleton skeleton;
private PolygonSpriteBatch polygonBatch;

@Override
public void create() {
render = new SkeletonMeshRenderer();
// 获取纹理集合
TextureAtlas tAtlas = new TextureAtlas(Gdx.files.internal("goblins.atlas"));
// 读取json信息
SkeletonJson sJson = new SkeletonJson(tAtlas);
sJson.setScale(1f);// 缩放，以后不可更改
sData = sJson.readSkeletonData(Gdx.files.internal("goblins.json"));
// 初始化动画信息
AnimationStateData animData = new AnimationStateData(sData);
state = new AnimationState(animData);
// 初始化骨骼信息
skeleton = new Skeleton(sData);
// 初始化batch
polygonBatch = new PolygonSpriteBatch();
// 播放动画
state.setAnimation(0, "walk", true);
// 设置位置
skeleton.setPosition(500, 200);
}

@Override
public void render() {
// 清屏
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
// 动画控制器更新时间步
state.update(Gdx.graphics.getDeltaTime());
// 动画控制器控制骨骼动画
state.apply(skeleton);
// 骨骼逐级进行矩阵变换
skeleton.updateWorldTransform();
// 绘制
polygonBatch.begin();
render.draw(polygonBatch, skeleton);
polygonBatch.end();
}

运行如下图：

博客已迁移：查看全文请点击AyoCrazy.com—Libgdx播放Spine动画（1）

917d