Pixi’VN - PixiJS Game Engine
!pixi-vn-cover
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.
npm
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.
| Platform | Roves | Tauri | Electron |
| ----------- | ----------------------------------- | ------------------------------ | --------------------------------------- |
| Windows | ✅ | ✅ | ✅ |
| macOS | ✅ | ✅ | ✅ |
| Linux | ✅ | ✅ | ✅ |
| Android | ✅ | ✅ | ❌ |
| iOS | 🚧 | ✅ | ❌ |
| Nintendo | 🚧 | ❌ | ❌ |
| PlayStation | 🚧 | ❌ | ❌ |
| Xbox | 🚧 | ❌ | ❌ |
Wiki
- 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 18 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
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.
`ts title="src/main.tsx"
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));
`
`html title="index.html"
Game
`
`css title="styles.css"
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 (like Claude Code) how to correctly use each part of the engine. If you use Claude Code, you can install all of them into your project with:
`npm
npx skills add DRincs-Productions/pixi-vn --all
`
This installs every skill below and prompts you to pick which ones to keep. To install only specific ones, add --skill (repeat the flag to install several, e.g. --skill canvas --skill sound). Use --list instead of installing to just see what's available. Available skills:
getting-started — installing the package and initializing the Game
assets — local vs. online assets, the manifest/bundle/alias system, and loading strategy
canvas — images, sprites, text, video, transitions and effects
characters — defining and registering characters
history — going back/rewinding and reading the narration backlog
narration — labels, dialogue and choices
saves — exporting/restoring game state and persisting save files
sound — music, sound effects and audio channels
storage — game variables, flags and stored classes
testing — driving/inspecting a running game from an AI agent or script via Game.testing, for automated play-testing
ui — mounting HTML/PixiJS UI layers over the canvas, screen navigation, theming, and connecting UI to storage
migration` — upgrading an existing project to the current version