Pixi’VNGuida introduttiva
Come iniziare con Pixi'VN
Puoi iniziare a utilizzare Pixi'VN inizializzando un nuovo progetto o installando il pacchetto in un progetto esistente.
Prerequisiti
Prima di iniziare, è necessario avere installato i seguenti strumenti:
- Node.js versione 18 o superiore.
- Editor di testo con supporto per TypeScript, come:
- (Raccomandato) Git
Inizializzazione del progetto
Se vuoi iniziare da un nuovo progetto, puoi usare il seguente comando per inizializzare un nuovo progetto con i template Pixi'VN:
npm create pixi-vn@latestPuoi vedere l'elenco dei template disponibili e delle demo interattive qui.
Dopo aver inizializzato il progetto, apri la directory del progetto con il tuo editor di testo (si consiglia VSCode) e inizia a sviluppare il progetto.
Tutti i templates includono un file README.md con maggiori informazioni sul progetto.
Installazione
Per installare il pacchetto Pixi'VN in un progetto JavaScript esistente, utilizzare uno dei seguenti comandi:
npm install @drincs/pixi-vnPuoi anche utilizzare la versione CDN di questo plugin:
<script src="https://cdn.jsdelivr.net/npm/@drincs/pixi-vn@<version>/+esm"></script>Ora devi inizializzare Pixi’VN prima di utilizzare l'engine. Ad esempio, puoi aggiungere il seguente codice a main.ts o index.ts (a seconda della configurazione del progetto).
Inizializzare
Prima di utilizzare l'engine Pixi'VN, è necessario inizializzare il gioco. Puoi farlo chiamando il metodo Game.init.
Questa funzione ha i seguenti parametri:
element: L'elemento HTML a cui aggiungere il canvas.options: Equivalente alle opzioni che puoi utilizzare durante l'inizializzazione di un'applicazione PixiJS. Le seguenti opzioni sono obbligatorie:width: La larghezza del canvas.height: L'altezza del canvas.
devtoolsOptions: Equivalente alle opzioni che puoi utilizzare durante l'inizializzazione di 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>