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: Equivalent to the options you can use when initializing a PixiJS Application. De plus, il prend en charge les options suivantes:id: L’ID à attribuer à l’élément canvas.resizeMode: Le mode de redimensionnement à utiliser. Valeurs possibles:none: Pas de redimensionnement.contain: Le canvas sera redimensionné pour s’adapter à l’élément parent tout en conservant son rapport d’aspect. (par défaut)
devtoolsOptions: Options pour PixiJS Devtools.
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);
});<!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;
}