Pixi’VNReact UI
Come integrare Pixi'VN con React, inclusi configurazione, modelli e le migliori librerie 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.
Cos'è React? React è una libreria JavaScript per la creazione di interfacce utente (UI) per siti web, app e altro ancora. È gratuito, open source e gestito da Meta (ex Facebook) e da una vasta comunità.
Puoi scoprire di più su React sul sito web di React.
Come aggiungere Pixi'VN a un'applicazione React
Modelli
Sono disponibili modelli Pixi'VN che utilizzano React. Per ulteriori informazioni, consulta la sezione 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));