Pixi’VNDémarrage rapide
Premiers pas avec Pixi’VN
Vous pouvez commencer à utiliser Pixi’VN en initialisant un nouveau projet ou en installant le paquet dans un projet existant.
Prérequis
Avant de commencer, vous devez avoir installé les outils suivants :
- Node.js version 18 ou supérieure.
- Un éditeur de texte avec prise en charge de TypeScript, tel que :
- (Recommandé) Git
- Un compte GitHub - Vous pourrez utiliser Copilot (assistant IA), la génération automatique de paquets à distribuer et ajouter des commentaires au wiki
Initialisation du projet
Si vous souhaitez démarrer à partir d'un nouveau projet, vous pouvez utiliser la commande suivante pour initialiser un nouveau projet avec les modèles Pixi’VN :
npm create pixi-vn@latestVous pouvez consulter la liste des modèles disponibles et les démos interactives ici.
Après l'initialisation du projet, ouvrez le répertoire du projet avec votre éditeur de texte (VSCode est recommandé) et commencez à développer votre projet.
Installation
Pour installer le paquet Pixi’VN dans un projet JavaScript existant, utilisez 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.
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;
}