Pixi’VNInicio rápido
Empezando con Pixi’VN
Puedes empezar a usar Pixi’VN inicializando un nuevo proyecto o instalando el paquete en un proyecto existente.
Requisitos previos
Antes de comenzar, debes tener instaladas las siguientes herramientas:
- Node.js versión 18 o superior.
- Un editor de texto con soporte para TypeScript, como:
- (Recomendado) Git
- Una cuenta de GitHub
Inicialización del proyecto
Si deseas comenzar desde un nuevo proyecto, puedes usar el siguiente comando para inicializar un proyecto con las plantillas de Pixi’VN:
npm create pixi-vn@latestPuedes ver la lista de plantillas disponibles y demostraciones interactivas aquí.
Después de inicializar el proyecto, abre el directorio con tu editor de texto (se recomienda VSCode) y comienza a desarrollar tu proyecto.
Todas las plantillas incluyen un archivo README.md con más información sobre el proyecto.
Instalación
Para instalar el paquete Pixi’VN en un proyecto JavaScript existente, usa uno de los siguientes comandos:
npm install @drincs/pixi-vnInicialización
Antes de usar el motor Pixi’VN, debes inicializar el juego. Puedes hacerlo llamando al método Game.init.
Esta función tiene los siguientes parámetros:
element: El elemento HTML donde se agregará el canvas.- Equivalente a las opciones que puedes usar al inicializar una aplicación PixiJS. Las siguientes opciones son obligatorias:
width: El ancho del canvas.height: La altura del canvas.
devtoolsOptions: Equivalente a las opciones utilizadas al inicializar 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>