LogoPixi’VN

Spine 2D

Comment utiliser l'intégration Spine 2D dans Pixi’VN pour charger des squelettes, changer de skins, jouer et combiner des animations, et contrôler les pistes d'animation.

Au sein de votre projet Pixi’VN, vous pouvez utiliser l'intégration Spine 2D pour créer des animations complexes et fluides pour vos personnages et objets. Cette intégration est essentiellement un wrapper autour du runtime officiel Spine 2D pour PixiJS, vous permettant d'utiliser toutes les fonctionnalités de Spine 2D directement dans votre projet Pixi’VN.

Installation

Pour installer le package Spine 2D dans un projet JavaScript existant, utilisez l'une des commandes suivantes :

npm install @drincs/pixi-vn-spine

La bibliothèque doit être importée lors de l'initialisation du jeu, afin qu'elle puisse être utilisée à l'intérieur des composants Lazy.

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

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

Utilisation

Vous pouvez utiliser le composant Spine comme n'importe quel autre composant Pixi’VN. Cependant, vous devez d'abord charger les assets Spine 2D (skeleton et atlas) avant de l'utiliser.

Par exemple :

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);

Sur cette page