Pixi’VNReact UI
Cómo integrar Pixi’VN con React, incluyendo la configuración, las plantillas y las mejores bibliotecas de UI. Create a React visual novel or story-driven game.
Pixi’VN works great as a visual novel React engine, letting you build the UI of your visual novel or story-driven game with React components while Pixi’VN handles the narration and canvas.
¿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
Plantillas
Existen plantillas de Pixi’VN que utilizan React. Puedes leer más sobre ellas en la sección templates.If you want to add Pixi’VN to an existing React application, follow the steps below.
If you want to add Pixi’VN to an existing React application, follow the steps below.
First, you need a React application and to install pixi-vn. It is recommended to use Vite to create a new React application.
Now you can replace the content of the following files with the code below:
import { Assets, canvas, Container, drawCanvasErrorHandler, Game, showImage, sound } from "@drincs/pixi-vn";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import "./index.css";
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",
resizeMode: "contain",
}).then(() => {
showImage(
"juliette",
"https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/icon.webp",
{ xAlign: 0.9, yAlign: 0.1, anchor: 0.5 },
).then(() => {
canvas.animate("juliette", { angle: 360 }, { repeat: Infinity, duration: 5 });
});
// Pixi.JS UI Layer
canvas.addLayer("ui", new Container());
// Sound setup
sound.addChannel("bgm", { background: true });
sound.addChannel("sfx");
sound.defaultChannelAlias = "sfx";
// React setup with ReactDOM
const root = document.getElementById("root");
if (!root) {
throw new Error("root element not found");
}
const htmlLayout = canvas.addHtmlLayer("ui", root);
if (!htmlLayout) {
throw new Error("htmlLayout not found");
}
const reactRoot = createRoot(htmlLayout);
reactRoot.render(
<StrictMode>
<App />
</StrictMode>,
)
});
Game.onEnd(async (props) => {
Game.clear();
// Navigate to the main menu after the game ends
});
Game.addOnError(drawCanvasErrorHandler());
Game.addOnError((error, props) => {
console.error(`Error occurred`, error);
});
Game.onLoadingLabel((_stepId, { id }) => Assets.backgroundLoadBundle(id));