Siguiendo la documentación oficial de Pixi.js para su instalación, nos encontraremos con que las opciones mas modernas que ofrecen son las de integrar React dentro de Pixi.js, lo cual influye escandalosamente en el FPS al responsabilizarse del game loop, perdiendo algo de la eficiencia y poderío que ofrece Pixi.js por si solo.
La forma de sacarle el jugo es dividir los frameworks por capas haciendo una instalación y configuración manual. De esta forma Pixi va a encargarse del game loop, incorporándolo como un framework independiente dentro de React, y en React podremos encargarnos de otras cuestiones que podamos requerir si así se desea.
🛠️ Configuración Inicial y Dependencias
Empezamos creando el proyecto base. Para ello arrancamos usando Vite, que será nuestra build tool donde se empaquetaran nuestros otros frameworks:
npm create vite@latest
Ahora si, podemos incorporar React, y el variant será Typescript con compilador SWC.
Procedemos entonces a instalar las dependencias:
npm install
Para culminar, añadiremos Pixi.js al proyecto:
npm install pixi.js
npm install -D @types/pixi.js
💻 Modificaciones de Archivos
Ahora debemos hacer modificaciones a los archivos, empezando por el App.tsx. En el caso de mi proyecto, se llama PinballGame (porque estoy haciendo un juego de Pinball), pero vos le debes cambiar el nombre acorde a tu juego o nombre pertinente que encuentres para el módulo punto de entrada del mismo. Lo primero que hago es limpiar el código de ejemplo de App.tsx para que quede solo la base funcional:
Archivo: App.tsx
import PinballGame from "./PinballGame";
function App() {
return (
<div style={{ width: '100vw', height: '100vh' }}>
<PinballGame />
</div>
);
}
export default App;
Si te arroja error la primer linea no te asustes, aún necesitamos crear mas archivos.
Consecuentemente procedo a modificar el archivo index.css. Aquí al menos en la versión que dispongo, lo único relevante sería quitar el centrado, ya que React ya se está encargando en App.tsx de usar el 100% de la ventana, haciendo que estas lineas entren en conflicto.
Archivo: index.css (Líneas a Remover)
display: flex;
place-items: center;
🎮 Componente de Juego con Pixi.js
Una vez que tenemos esto, procedemos a crear el archivo .tsx correspondiente a nuestro juego/app. En mi caso como ya mencioné, es PinballGame (respetando el nombre asignado previamente en App.tsx).
Allí mismo embebemos la base para el uso de Pixi.js (dejé la base completamente pelada, incluso removiendo el ejemplo del consejo que viene por default, que en mi caso no me es útil para nada):
Archivo: PinballGame.tsx
import React, { useEffect, useRef } from 'react';
import * as PIXI from 'pixi.js';
export default function PinballGame() {
const containerRef = useRef<HTMLDivElement>(null);
const appRef = useRef<PIXI.Application | null>(null);
useEffect(() => {
if (!containerRef.current) return;
if (!appRef.current) {
const app = new PIXI.Application();
app.init({
resizeTo: containerRef.current,
background: '#111111',
})
.then(() => {
containerRef.current?.appendChild(app.canvas);
appRef.current = app;
})
.catch((error) => {
console.error("Error Initializing Pixi.js:", error);
});
}
return () => {
if (appRef.current) {
appRef.current.destroy(true, { children: true, context: true });
appRef.current = null;
}
};
}, []);
return <div ref={containerRef} style={{ width: '100%', height: '100%' }} />;
}
✅ Testeo del Proyecto
Felicidades. Tenemos todo listo para empezar a programar. Podemos hacer un testeo, simplemente ejecutando nuestro proyecto:
⚠️ Solución de Problemas
SOLUCION 1: Version Node.js
Extra: Si no disponés de Node.js (dependencia) o tu versión no es compatible, debes instalar el NVM (node version manager):
Una vez hecho esto, voy a pedirle que instale en mi caso la versión mas reciente de Node.js:
nvm install lts
Le indicamos que queremos utilizar la versión instalada:
nvm use lts
SOLUCION 2: La ejecución de scripts está deshabilitada en este sistema
Debemos habilitar la ejecución de scripts. Abrir Power Shell como Administrador e instruir lo siguiente:
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
0 Comentarios