Pixi’VNSpine 2D
How to use the Spine 2D integration in Pixi’VN to load skeletons, switch skins, play and combine animations, and control animation tracks.
Within your Pixi’VN project, you can use the Spine 2D integration to create complex and smooth animations for your characters and objects. This integration is essentially a wrapper around the official Spine 2D runtime for PixiJS, allowing you to use all Spine 2D features directly inside your Pixi’VN project.
Installation
To install the Spine 2D package in an existing JavaScript project, use one of the following commands:
npm install @drincs/pixi-vn-spineThe library must be imported when the game is initialized, so that it can be used inside Lazy components.
import "@drincs/pixi-vn-spine";
Game.init(body, {
// ...
});Usage
You can use the Spine component just like any other Pixi’VN component.
However, you must first load the Spine 2D assets (skeleton and atlas) before using it.
For example:
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);