Spine 动画模型制作与加载：从编辑器到应用的完整流程

Spine 的工作流程分三步：在 Spine Editor 里制作动画 → 导出资源文件 → 在应用中用 Spine Runtime 加载渲染。

第一步：用 Spine Editor 制作动画

Spine Editor 是官方编辑器（收费，有免费试用），下载地址 esotericsoftware.com。

1. 准备素材

把角色拆成独立的图片部件，导入 Spine：

text

角色.png → 拆成多个独立 PNG
├── body.png（身体）
├── head.png（头部）
├── arm_left.png（左臂）
├── arm_right.png（右臂）
├── leg_left.png（左腿）
└── leg_right.png（右腿）

要求：每个部件需要导出为 PNG（带透明通道），各部件在图片上的位置不重要，Spine 会用骨骼重新定位。

2. 搭建骨骼

在 Spine Editor 里创建骨骼层级：

text

root（根骨骼）
├── hip（胯部）
│   ├── spine（脊柱）
│   │   └── neck（脖子）
│   │       └── head_bone（头部骨骼）
│   ├── leg_left_bone（左腿骨骼）
│   └── leg_right_bone（右腿骨骼）
└── shoulder（肩膀）
    ├── arm_left_bone（左臂骨骼）
    └── arm_right_bone（右臂骨骼）

3. 将部件附加到骨骼

把刚才导入的图片 attach 到对应的骨骼上：body.png 绑到 spine 骨骼，head.png 绑到 head_bone，以此类推。

4. 制作动画

在 Timeline 上关键帧打点：

第 0 帧：设置站姿（所有骨骼的默认位置/旋转）
第 12 帧：左腿前迈，右臂前摆（走路姿势 1）
第 24 帧：右腿前迈，左臂前摆（走路姿势 2）
第 36 帧：回到第 0 帧位置（循环）

Spine 会在关键帧之间自动插值，不需要补中间画。

5. 导出

导出文件：

.json 或 .skel（二进制格式，体积更小）—— 骨骼数据和动画
.png + .atlas —— 把多个部件图打包成一张大图 + 坐标映射文件

Editor → Export → JSON Data / Binary Data → 勾选需要的动画和纹理设置。

第二步：在应用中加载渲染

以 Web（JavaScript/TypeScript）为例：

安装 Spine Runtime

bash

npm install @esotericsoftware/spine-player

加载并播放动画

html

<div id="player-container" style="width:400px;height:600px"></div>

<script type="module">
import { SpinePlayer } from '@esotericsoftware/spine-player';

new SpinePlayer('player-container', {
  jsonUrl: 'models/character/spineboy.json',
  atlasUrl: 'models/character/spineboy.atlas',
  animation: 'walk',
  showLoading: true,
  alpha: true
});
</script>

通过代码控制

const player = new SpinePlayer('player-container', {
  jsonUrl: 'models/character/spineboy.json',
  atlasUrl: 'models/character/spineboy.atlas',
  animation: 'idle',
  showLoading: true,
  alpha: true
});

// 切换动画（自动过渡）
player.play('run', { loop: true, delay: 0.3 });

// 混合两个动画
player.play('walk', {
  track: 0,           // 下半身走路
  loop: true
});
player.play('wave', {
  track: 1,           // 上半身挥手
  loop: false
});

更底层的方式（Spine Runtime）

手动控制骨骼实现交互效果：

import * as spine from '@esotericsoftware/spine-webgl';

// 加载数据
const assetManager = new spine.AssetManager('path/to/');
assetManager.loadTextureAtlas('spineboy.atlas');
// ...

// 创建动画状态机
const state = new spine.AnimationState(stateData);
state.setAnimation(0, 'run', true);

// 每帧更新
state.update(delta);

// 程序化控制骨骼位置（如追踪鼠标）
const skeleton = ...;
const armBone = skeleton.findBone('arm_right');
armBone.rotation = Math.atan2(mouseY, mouseX) * (180 / Math.PI);

各平台加载方式

平台	运行时库	示例
Web	`@esotericsoftware/spine-player` 或 `spine-webgl`	`new SpinePlayer()`
Unity	从 Asset Store 安装 Spine Runtime	`SkeletonAnimation` 组件
Cocos2d-x	C++ 运行时	`spine::SkeletonAnimation`
iOS/macOS	官方 Swift 或第三方封装	MacArkPet 使用 WKWebView 加载 WebGL 版
Android	Java/Kotlin 运行时	`SkeletonRenderer`

MacArkPet 中的加载方式

桌面宠物应用 MacArkPet 使用的就是 Web 端加载方案：通过 WKWebView 内嵌 Spine WebGL 运行时渲染模型，实现透明无边框桌面宠物窗口中的角色动画播放。

免费替代方案

Spine Editor 是付费软件（约 $299 起），如果想免费制作骨骼动画：

DragonBones：免费的 2D 骨骼动画工具，功能类似，导出格式与 Spine 不完全兼容
Cocos Creator 内置动画系统：如果使用 Cocos 引擎可以省去 Spine 费用