Pixi’VNDémarrage rapide
Bien démarrer avec Pixi’VN
Vous pouvez commencer à utiliser Pixi’VN en initialisant un nouveau projet ou en installant le package dans un projet existant.
Prérequis
Avant de commencer, assurez-vous d’avoir installé les outils suivants:
- Node.js version 18 ou supérieure.
- Un éditeur de texte prenant en charge TypeScript, tel que:
- (Recommandé) Git
Initialisation du projet
Pour démarrer un nouveau projet avec un modèle Pixi’VN, exécutez la commande suivante:
npm create pixi-vn@latestVous pouvez consulter la liste des modèles disponibles et des démonstrations interactives ici.
Une fois le projet initialisé, ouvrez le répertoire du projet avec votre éditeur de texte (VSCode est recommandé) et commencez à développer.
Tous les modèles incluent un fichier README.md contenant plus d’informations sur le projet.
Installation
Pour installer le package Pixi’VN dans un projet JavaScript existant, exécutez l’une des commandes suivantes:
npm install @drincs/pixi-vnInitialisation
Avant d’utiliser le moteur Pixi’VN, vous devez initialiser le jeu. Vous pouvez le faire en appelant la méthode Game.init.
Cette fonction accepte les paramètres suivants:
element: L’élément HTML auquel le canvas sera ajouté.options: Équivalent aux options que vous pouvez utiliser lors de l’initialisation d’une application PixiJS. Les options suivantes sont obligatoires :width: Largeur du canvas.height: Hauteur du canvas.
devtoolsOptions: Options pour 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>