LogoPixi’VN

Spine 2D

如何在 Pixi’VN 中使用 Spine 2D 集成来加载骨骼、切换皮肤、播放和组合动画,以及控制动画轨道。

在你的 Pixi’VN 项目中,你可以使用 Spine 2D 集成为角色和物体创建复杂而流畅的动画。 该集成本质上是对官方 PixiJS 版 Spine 2D 运行时 的封装,让你可以直接在 Pixi’VN 项目中使用所有 Spine 2D 功能。

安装

要在现有的 JavaScript 项目中安装 Spine 2D 包,请使用以下命令之一:

npm install @drincs/pixi-vn-spine

该库必须在游戏初始化时导入,以便可以在 Lazy 组件内部使用。

main.ts
import "@drincs/pixi-vn-spine";

Game.init(body, {
    // ...
});

使用方法

你可以像使用其他任何 Pixi’VN 组件一样使用 Spine 组件。 不过,在使用之前,你必须先加载 Spine 2D 资源(skeletonatlas)。

例如:

main.ts
import { Assets, canvas } from "@drincs/pixi-vn";
import { Spine } from "@drincs/pixi-vn-spine";

await Assets.load(["spineboySkeleton", "spineboyAtlas"]);
const spine = new Spine({
    atlas: "spineboyAtlas",
    skeleton: "spineboySkeleton",
    xAlign: 0.5,
    yAlign: 1,
    animation: "idle",
});
canvas.add("boy", spine);

本页内容