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）