pixijs H5游戏开发入门（八）使用骨骼动画

时间：

分类：

pixijs

字数：

1.2k 字

时长：

大约需要 5 分钟

次数：

0 人阅读

本系列文章

本文编写时 pixijs 版本： v7.3.2
本文编写时 spine-pixi 版本： v4.1.50
本文编写时 pixi-spine 版本： v4.0.4

骨骼动画制作软件

使用 Spine

Spine 官方示例

Spine 官方插件：https://github.com/EsotericSoftware/spine-runtimes/tree/4.1/spine-ts/spine-pixi

插件下载地址： https://www.npmjs.com/package/@esotericsoftware/spine-pixi

一个简单示例：

源码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>pixijs入门示例07</title>
    <script src="https://pixijs.download/v7.3.2/pixi.js"></script>
    <script src="https://registry.npmmirror.com/@esotericsoftware/spine-pixi/4.1.50/files/dist/iife/spine-pixi.js"></script>
    <style>
      html,
      body,
      div {
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <script>
      async function init() {
        // 创建一个 pixi 实例
        let app = new PIXI.Application({
          antialias: true, // 消除锯齿
          width: 300,
          height: 300,
          backgroundColor: 0x223355,
        });

        // 插入到 body 中
        document.body.appendChild(app.view);

        // 预加载骨架数据和图集。您还可以加载 .json 骨架数据。
        PIXI.Assets.add("spineboyData", "./example/spineboy-pro.skel");
        PIXI.Assets.add("spineboyAtlas", "./example/spineboy-pma.atlas");
        await PIXI.Assets.load(["spineboyData", "spineboyAtlas"]);

        // 创建 spine 显示对象
        const spineboy = spine.Spine.from("spineboyData", "spineboyAtlas", {
          scale: 0.5,
        });

        // 设置从一个动画过渡到下一个动画时要使用的默认混合时间。
        spineboy.state.data.defaultMix = 0.2;

        // 将 spine 对象居中显示在屏幕上
        spineboy.x = app.renderer.width / 2;
        spineboy.y = app.renderer.height / 2 + spineboy.getBounds().height / 2;

        // 将动画 run 设置在轨道0上，循环播放。
        spineboy.state.setAnimation(0, "run", true);

        // 添加到舞台
        app.stage.addChild(spineboy);
      }

      init();
    </script>
  </body>
</html>

资源来源于： https://github.com/EsotericSoftware/spine-runtimes/tree/4.1/spine-ts/spine-pixi

更多示例： https://github.com/EsotericSoftware/spine-runtimes/tree/4.1/spine-ts/spine-pixi

pixi 官方示例

pixi 官方插件：https://github.com/pixijs/spine

插件下载地址： https://www.npmjs.com/package/pixi-spine

一个简单示例：

源码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>pixijs入门示例-骨骼动画</title>
    <script src="https://pixijs.download/v7.3.2/pixi.js"></script>
    <script src="https://registry.npmmirror.com/pixi-spine/4.0.4/files/dist/pixi-spine.js"></script>
    <style>
      html,
      body,
      div {
        padding: 0;
        margin: 0;
      }
      body,
      canvas {
        /* width: 100%; */
      }
    </style>
  </head>
  <body>
    <script>
      async function init() {
        // 创建一个 pixi 实例
        let app = new PIXI.Application({
          antialias: true, // 消除锯齿
          width: 300,
          height: 300,
          backgroundColor: 0x223355,
        });

        // 插入到 body 中
        document.body.appendChild(app.view);

        // https://github.com/pixijs/spine
        const dragonAsset = await PIXI.Assets.load('./example/dragon.json');

        // 实例化 spine 动画
        const dragon = new PIXI.spine.Spine(dragonAsset.spineData);
        dragon.skeleton.setToSetupPose();
        dragon.update(0);
        dragon.autoUpdate = false;

        // 为 spine 动画创建一个容器，并将动画添加到其中
        const dragonCage = new PIXI.Container();
        dragonCage.addChild(dragon);

        // 测量 spine 动画，并将其放置在容器内，使其与原点对齐
        const localRect = dragon.getLocalBounds();
        dragon.position.set(-localRect.x, -localRect.y);

        // 现在我们可以像任何其他显示对象一样缩放、定位和旋转容器
        const scale = Math.min(
            (app.screen.width * 0.7) / dragonCage.width,
            (app.screen.height * 0.7) / dragonCage.height,
        );
        dragonCage.scale.set(scale, scale);
        dragonCage.position.set(
            (app.screen.width - dragonCage.width) * 0.5,
            (app.screen.height - dragonCage.height) * 0.5,
        );

        // 添加到舞台
        app.stage.addChild(dragonCage);

        // 定位并缩放后，设置要播放的动画
        dragon.state.setAnimation(0, 'flying', true);


        app.ticker.add(() => {
            // 更新 spine 动画, 仅当 dragon.autoupdate = false 时才需要
            dragon.update(app.ticker.deltaMS / 1000); // IN SECONDS!
        });
          

      }

      init();
    </script>
  </body>
</html>

资源来源于： https://github.com/pixijs/examples

更多示例： https://github.com/pixijs/examples

其他示例： https://sbfkcel.github.io/pixi-spine-debug/

本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2023-12-04/js-pixi-spine/

如果您觉得文章不错，可以点击文章中的广告支持一下！