Pixi’VNSpine 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 コンポーネント内で使用できるように、ゲームの初期化時にインポートする必要があります。
import "@drincs/pixi-vn-spine";
Game.init(body, {
// ...
});使用方法
他の Pixi’VN コンポーネントと同様に、Spine コンポーネントを使用できます。
ただし、使用する前に、まず Spine 2D のアセット（skeleton と atlas）を読み込む必要があります。
例：
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);