Pixi’VNQuick start
Getting started with Pixi’VN
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 - You will be able to use Copilot (Al assistant), auto-generation of packages to distribute and add comments to the wiki
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@latestYou 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.
Installation
To install the Pixi’VN package in an existing JavaScript project, use one of the following commands:
npm install @drincs/pixi-vnInitialize
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.web.app/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;
}