Pixi’VNLive2D
How to use the Live2D integration in Pixi’VN to load models, play motions, switch expressions, and combine them with Pixi’VN's own animations.
The Live2D integration is currently in a testing phase and its API may change in future releases.
Within your Pixi’VN project, you can use the Live2D integration to display and animate Live2D models for your characters. This integration is a wrapper around untitled-pixi-live2d-engine — note that this is not an official PixiJS/Live2D plugin, but a community-maintained engine that bridges Live2D with PixiJS — allowing you to use its features directly inside your Pixi’VN project.
Installation
To install the Live2D package in an existing JavaScript project, use one of the following commands:
npm install @drincs/pixi-vn-live2dextensions.add(Live2DPlugin) must be called at startup, in your main file, before Game.init is called.
import { extensions } from "pixi.js";
import { Live2DPlugin } from "@drincs/pixi-vn-live2d/core";
extensions.add(Live2DPlugin);
Game.init(body, {
// ...
});Usage
You can use the Live2D component just like any other Pixi’VN component. Unlike Spine, a Live2D model doesn't need to be pre-loaded through Assets.load — registering the alias with Assets.add is enough, since Live2D resolves and fetches the model itself.
Because that fetch is asynchronous, the model isn't safe to use until its ready promise resolves — await it right after construction, before reading anything derived from the loaded model (e.g. its size).
For example:
import { canvas } from "@drincs/pixi-vn";
import { Live2D } from "@drincs/pixi-vn-live2d";
const live2d = new Live2D({
source: "shizuku",
xAlign: 0.5,
yAlign: 1,
scale: 0.5,
});
await live2d.ready;
canvas.add("shizuku", live2d);