pixi-vn

Pixi’VN - PixiJS Game Engine

Pixi’VN is a very versatile and powerful story-driven engine. It is based on JavaScript/TypeScript and PixiJS, and supports animated characters through Spine 2D and Live2D.

Pixi’VN aims to be an innovative and fast engine, and puts a strong emphasis on AI-assisted development: an AI agent can start your game, gain all the knowledge it needs about your project through Agent Skills, and test the game by launching it in a browser — with the ability to keep driving it from the outside while it plays.

You can use narrative languages that are able to take full advantage of the engine's features, as well as any custom features you add to your project. Currently supported:

• ink

Templates

For a quick start, various project templates are available, built with React. Less experienced developers can use these templates without much knowledge of JavaScript/TypeScript.

• Visual Novel: a classic dialogue-driven experience, with characters, backgrounds, and choices.
• Point & Click Adventure: an adventure game where the player explores scenes and interacts with objects and characters.
• Interactive Fiction: feels like reading a book. Unlike a visual novel, images are shown as vignettes, just as illustrations would appear on a page.

To create a new project from a template, run:

npm create pixi-vn@latest

Distribution

Pixi’VN is independent of any distribution technology, but strong emphasis is being placed on Roves, built by the same team behind Pixi’VN.

Wiki

• Quick Start
  • Templates
• Features:
  • Characters
  • Narration
  • Assets
  • Canvas WebGL/WebGPU
  • Sounds and music
  • Storage
  • User Interface (UI)
  • Minigames
  • AI-Generated Content
  • Save and load
  • Distribution

Prerequisites

Before starting, you must have the following tools installed:

• Node.js version 20.19.0 or higher.
• Text editor with TypeScript support, such as:
  • Visual Studio Code
  • Cursor
  • VSCodium

Installation

To install the Pixi’VN package in an existing JavaScript project, use one of the following commands:

npm install @drincs/pixi-vn

Initialize

Before using the Pixi’VN engine, you must initialize the game. You can do this by calling the Game.init method.

import { Game } from "@drincs/pixi-vn";

const body = document.body;
if (!body) {
  throw new Error("body element not found");
}

Game.init(body, {
  height: 1080,
  width: 1920,
  backgroundColor: "#303030",
}).then(() => {
  // ...
  Game.start("start", {});
});

// read more here: https://pixi-vn.com/start/other-narrative-features.html#how-manage-the-end-of-the-game
Game.onEnd(async (props) => {
  Game.clear();
  // navigate to main menu
});

Game.addOnError((error, props) => {
  console.error(`Error occurred`, error);
});

Game.onNavigate((path) => navigateTo(path));

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Game</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

html,
body {
  background-color: #242424;
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  overflow: hidden;
}

Agent Skills

Pixi'VN ships a set of Agent Skills that teach AI coding assistants how to correctly use each part of the engine.

In LM Studio Bionic, ask the agent to install skills from https://github.com/DRincs-Productions/pixi-vn, or add the skill files in Settings → Skills. To reuse skills installed for Codex or Claude Code, enable Settings → Skills → Use skills found in other apps.

Codex:

npx skills@latest add DRincs-Productions/pixi-vn@latest --skill '*' --agent codex -g -y

Claude Code:

npx skills@latest add DRincs-Productions/pixi-vn@latest --skill '*' --agent claude-code -g -y

Other agents:

npx skills@latest add DRincs-Productions/pixi-vn@latest --all -y

Available skills:

• pixi-vn — the index/entry point of the skill set: skill map, installing the package and initializing the Game
• pixi-vn-assets — local vs. online assets, the manifest/bundle/alias system, and loading strategy
• pixi-vn-canvas — images, sprites, text, video, transitions and effects
• pixi-vn-characters — defining and registering characters
• pixi-vn-history — going back/rewinding and reading the narration backlog
• pixi-vn-narration — labels, dialogue and choices
• pixi-vn-saves — exporting/restoring game state and persisting save files
• pixi-vn-sound — music, sound effects and audio channels
• pixi-vn-storage — game variables, flags and stored classes
• pixi-vn-testing — driving/inspecting a running game from an AI agent or script via Game.testing, for automated play-testing
• pixi-vn-ui — mounting HTML/PixiJS UI layers over the canvas, screen navigation, theming, and connecting UI to storage
• pixi-vn-migration — upgrading an existing project to the current version