Pixi’VNReact UI
Cómo integrar Pixi’VN con React, incluyendo la configuración, las plantillas y las mejores bibliotecas de UI. Crear novelas visuales o juegos 2D con React.
¿Qué es React? React es una biblioteca de JavaScript para crear interfaces de usuario (UI) para sitios web, aplicaciones y más. Es gratuita, de código abierto y está mantenida por Meta (anteriormente Facebook) y una gran comunidad.
Puedes obtener más información sobre React en el React website.
Cómo añadir Pixi’VN a una aplicación React
React template
Existen plantillas de Pixi’VN que utilizan React. Puedes leer más sobre ellas en la sección templates.
Si deseas añadir Pixi’VN a una aplicación React existente, sigue los pasos a continuación.
Primero, necesitas una aplicación React y instalar pixi-vn. Se recomienda utilizar Vite para crear una nueva aplicación React.
A continuación, puedes reemplazar el contenido de los siguientes archivos con el código de los ejemplos:
import { canvas, Container, Game, RotateTicker, showImage } from '@drincs/pixi-vn'
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(
const body = document.body;
if (!body) {
throw new Error("body element not found");
}
Game.init(body, {
height: 1080,
width: 1920,
backgroundColor: "#303030",
})
.then(() => {
// Pixi.JS UI Layer
canvas.addLayer("ui", new Container());
showImage(
"juliette",
"https://firebasestorage.googleapis.com/v0/b/pixi-vn.appspot.com/o/public%2Fcharacters%2Fjuliette-icon.webp?alt=media&token=cbcdd613-12e4-48b5-b7b3-16443b4e125e",
{ xAlign: 0.9, yAlign: 0.1, anchor: 0.5 }
);
canvas.addTicker("juliette", new RotateTicker({ speed: 1 }));
// React setup with ReactDOM
const root = document.getElementById("root");
if (!root) {
throw new Error("root element not found");
}
const htmlLayer = canvas.addHtmlLayer("ui", root, {
position: "absolute",
pointerEvents: "none"
});
if (!htmlLayer) {
throw new Error("htmlLayer not found");
}
const reactRoot = createRoot(htmlLayer);
reactRoot.render(
<StrictMode>
<App />
</StrictMode>,
);
}
) Mejores bibliotecas de componentes React
Para crear una interfaz de usuario atractiva, puedes utilizar algunas de las mejores bibliotecas de componentes UI para React: