Pixi'VN 2D game engine

Appearance

Getting Started ​

You can start using Pixi’VN by initializing a new project or installing the package in an existing project.

Prerequisites ​

Before starting, you must have the following tools installed:

Project Initialization ​

If you want to start a new project, you can use the following command to initialize a new project with the Pixi’VN template:

sh
npm create pixi-vn@latest
sh
yarn create pixi-vn
sh
pnpm create pixi-vn
sh
bun create pixi-vn
sh
deno init --npm pixi-vn

The supported template presets are:

More templates will be added in the future

Pixi’VN knows the possibility of proposing templates and helps you in its development. You can follow the development of templates and show your interest from the following thread https://github.com/DRincs-Productions/pixi-vn/discussions/361.

Visual Novel - React:

Other templates:

After the project is initialized, you can open the project directory with your text editor (VSCode is recommended) and start developing your visual novel.

Into all templates there is a README.md file with more information about the project.

Installation ​

For installing the Pixi’VN package in an existing Javascript project, you can use the following command:

sh
npm install @drincs/pixi-vn
sh
yarn add @drincs/pixi-vn
sh
pnpm add @drincs/pixi-vn
sh
bun add @drincs/pixi-vn
sh
deno install npm:@drincs/pixi-vn

You can use the CDN version of this plugin:

html
<script src="https://cdn.jsdelivr.net/npm/@drincs/pixi-vn@<version>/+esm"></script>
html
<script type="importmap">
  { "imports": {
      "@drincs/pixi-vn@<version>":        "https://cdn.jsdelivr.net/npm/@drincs/pixi-vn/+esm"
  } }
</script>
js
import pixivn from "https://cdn.jsdelivr.net/npm/@drincs/pixi-vn@<version>/+esm";

Now you must initialize the Pixi’VN window before using the engine. For example, you can add the following code to the main.ts or index.ts (It depends on your project configuration):

Initialize the Game ​

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

The Game.init method takes the following arguments:

  • element: The HTML element to append the canvas to.
  • options: This is equivalent to the options you can use when initializing a PixiJS Application. The following options are mandatory:
    • width: The width of the canvas.
    • height: The height of the canvas.
  • devtoolsOptions: This is equivalent to the options you can use when initializing the PixiJS Devtools.
ts
import { Game } from "@drincs/pixi-vn";

// Canvas setup with PIXI
const body = document.body
if (!body) {
    throw new Error('body element not found')
}

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

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

Game.onError((type, error, { notify }) => {
    notify("allert_error_occurred");
});
html
<!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>

How enable the decorators in TypeScript? ​

In Pixi’VN, in some advanced features, it is necessary to use decorators.

By default, TypeScript does not enable the use of decorators. To enable the use of decorators in TypeScript, you must add the following configuration to the tsconfig.json file:

tsconfig.json
json
{
    "compilerOptions": {
        // ...
        "experimentalDecorators": true
    }
}