Pixi'VN - Quick Start

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:

Node.js version 18 or higher.
Text editor with TypeScript support, such as:
(Recommended) Git
- A GitHub account

Project Initialization

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

npm create pixi-vn@latest

yarn create pixi-vn

pnpm create pixi-vn

bun create pixi-vn

deno init --npm pixi-vn

You can see the list of available templates and interactive demos here.

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

All templates include a README.md file with more information about the project.

Installation

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

npm install @drincs/pixi-vn

yarn add @drincs/pixi-vn

pnpm add @drincs/pixi-vn

bun add @drincs/pixi-vn

deno install npm:@drincs/pixi-vn

You can also use the CDN version of this plugin:

index.html

<script src="https://cdn.jsdelivr.net/npm/@drincs/pixi-vn@<version>/+esm"></script>

index.html

<script type="importmap">
  { "imports": {
      "@drincs/pixi-vn@<version>":        "https://cdn.jsdelivr.net/npm/@drincs/pixi-vn/+esm"
  } }
</script>

index.js

import pixivn from "https://cdn.jsdelivr.net/npm/@drincs/pixi-vn@<version>/+esm";

Now you must initialize Pixi’VN before using the engine. For example, you can add the following code to main.ts or index.ts (depending 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.

This function has the following parameters:

element: The HTML element to append the canvas to.
options: 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: Equivalent to the options you can use when initializing the PixiJS Devtools.

src/main.tsx

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");
});

index.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>

Quick Start

Prerequisites

Project Initialization

Installation

Initialize the game

On this page