Pixi’VNInicio rápido
Primeros pasos con Pixi’VN
Puedes empezar a usar Pixi’VN inicializando un nuevo proyecto o instalando el paquete en un proyecto existente.
Inicialización del proyecto
Si quieres comenzar desde un nuevo proyecto, puedes usar el siguiente comando para inicializar un nuevo proyecto con las plantillas de Pixi’VN:
npm create pixi-vn@latestPuedes ver la lista de plantillas disponibles y las demos interactivas aquí.
Después de inicializar el proyecto, abre el directorio del proyecto con tu editor de texto (se recomienda VSCode) y comienza a desarrollar tu proyecto.
Instalación
Para instalar el paquete Pixi’VN en un proyecto JavaScript existente, usa uno de los siguientes comandos:
npm install @drincs/pixi-vnInicializar
Antes de usar el motor Pixi’VN, debes inicializar el juego. Puedes hacerlo llamando al método 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;
}