@drincs/pixi-vn

v1.9.3

Published

13 days ago

Pixi'VN is a very versatile and powerful game/story-driven engine.

0High
0Medium
0Low

blackram

2d canvas development engine game game-development game-engine games js novel pixi pixi-js visual visual-novel webgl

Pixi’VN - PixiJS Game Engine

pixi-vn-cover

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.

| Platform | Roves | Tauri | Electron | | ----------- | ----------------------------------- | ------------------------------ | --------------------------------------- | | Windows | ✅ | ✅ | ✅ | | macOS | ✅ | ✅ | ✅ | | Linux | ✅ | ✅ | ✅ | | Android | ✅ | ✅ | ❌ | | iOS | 🚧 | ✅ | ❌ | | Nintendo | 🚧 | ❌ | ❌ | | PlayStation | 🚧 | ❌ | ❌ | | Xbox | 🚧 | ❌ | ❌ |

Wiki

Prerequisites

Before starting, you must have the following tools installed:

Node.js version 18 or higher.
Text editor with TypeScript support, such as:

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 (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:

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 <name> (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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme