Pixi’VNSchnellstart
Erste Schritte mit Pixi’VN
Du kannst mit der Verwendung von Pixi’VN beginnen, indem du ein neues Projekt initialisierst oder das Paket installierst in einem bestehenden Projekt.
Projektinitialisierung
Wenn du mit einem neuen Projekt starten möchtest, kannst du den folgenden Befehl verwenden, um ein neues Projekt mit den Pixi’VN-Vorlagen zu initialisieren:
npm create pixi-vn@latestDie Liste der verfügbaren Vorlagen und interaktive Demos findest du hier.
Nachdem das Projekt initialisiert wurde, öffne das Projektverzeichnis mit deinem Texteditor (VSCode wird empfohlen) und beginne mit der Entwicklung deines Projekts.
Installation
Um das Pixi’VN-Paket in einem bestehenden JavaScript-Projekt zu installieren, verwende einen der folgenden Befehle:
npm install @drincs/pixi-vnInitialisierung
Bevor du die Pixi’VN-Engine verwendest, musst du das Spiel initialisieren. Dies geschieht durch den Aufruf der Methode 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.com/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;
}