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:
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.
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-vnInitialize
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. Additionally, it supports the following options:id: The ID to assign to the canvas element.resizeMode: The resize mode to use. Possible values are:none: No resizing.contain: The canvas will be resized to fit within the parent element while maintaining its aspect ratio. (default)
devtoolsOptions: Equivalent to the options you can use when initializing the PixiJS Devtools.
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");
});<!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>:root {
background-color: #242424;
}
html,
body {
height: 100%;
}
body {
margin: 0;
min-height: 100vh;
display: flex;
overflow: hidden;
}