Pixi’VNSpine 2D
This page is under construction
This library is currently in testing phase, so it may change significantly between versions.
What is Spine 2D? Spine 2D is a powerful 2D animation software specifically designed for game development. It uses a skeletal animation system, meaning that characters and objects are animated through a hierarchy of bones that control the movement of attached parts.
You can learn more about Spine 2D on the official Spine 2D website.
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.
Perché?
By using the Spine 2D integration in Pixi’VN, you can easily add animated components while taking advantage of both Pixi’VN and Spine 2D features, such as:
- Saving the current animation state within game save files.
- Using the additional Pixi’VN positioning properties.
- Starting animation sequences quickly and easily.
- Accessing additional features shared with other Pixi’VN components.
Installazione
To install the Spine 2D package in an existing JavaScript project, use one of the following commands:
npm install @drincs/pixi-vn-spineInizializzare
Due to compatibility issues with Lazy components, the 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.
This component has two required properties: skeleton and atlas, which must match the names of the loaded assets.
Ad esempio:
import { Assets, canvas, newLabel } from "@drincs/pixi-vn";
import { Spine } from "@drincs/pixi-vn-spine";
export const startLabel = newLabel("start", [
async () => {
await Assets.load("spineboySkeleton", "spineboyAtlas");
const spine = new Spine({ atlas: "spineAtlas", skeleton: "spineSkeleton", xAlign: 0.5, yAlign: 1 });
spine.addAnimation("idle", { loop: true });
canvas.add("spine", spine);
},
]);Animation
import { Assets, canvas, newLabel } from "@drincs/pixi-vn";
import { Spine } from "@drincs/pixi-vn-spine";
export const startLabel = newLabel("start", [
async () => {
await Assets.load("spineboySkeleton", "spineboyAtlas");
const spine = new Spine({ atlas: "spineAtlas", skeleton: "spineSkeleton", xAlign: 0.5, yAlign: 1 });
spine.addAnimation("idle", { loop: true });
canvas.add("spine", spine);
},
]);Spine + motion.js animations
import { Assets, canvas, newLabel } from "@drincs/pixi-vn";
import { Spine } from "@drincs/pixi-vn-spine";
export const startLabel = newLabel("start", [
async () => {
await Assets.load("spineboySkeleton", "spineboyAtlas");
const spine = new Spine({ atlas: "spineAtlas", skeleton: "spineSkeleton", xAlign: 0.5, yAlign: 1 });
spine.addAnimation("idle", { loop: true });
canvas.add("spine", spine);
},
]);Animations sequence
import { Assets, canvas, newLabel } from "@drincs/pixi-vn";
import { Spine } from "@drincs/pixi-vn-spine";
export const startLabel = newLabel("start", [
async () => {
await Assets.load("spineboySkeleton", "spineboyAtlas");
const spine = new Spine({ atlas: "spineAtlas", skeleton: "spineSkeleton", xAlign: 0.5, yAlign: 1 });
spine.playSequence([["idle", { loop: true, duration: 2 }], "jump"], {
repeat: Infinity,
});
canvas.add("spine", spine);
},
]);