React-UI
So integrierst du Pixi’VN mit React, einschließlich Einrichtung, Vorlagen und den besten UI-Bibliotheken. Erstelle eine Visual Novel oder ein erzählgetriebenes Spiel mit React.
Pixi’VN funktioniert hervorragend als React-Visual-Novel-Engine und ermöglicht es dir, die Benutzeroberfläche deiner Visual Novel oder deines erzählgetriebenen Spiels mit React-Komponenten zu erstellen, während Pixi’VN die Erzählung und das Canvas übernimmt.
Was ist React? React ist eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen (UIs) für Websites, Apps und mehr. Es ist kostenlos, Open Source und wird von Meta (ehemals Facebook) und einer großen Community gepflegt.
Mehr über React erfährst du auf der React-Website.
So fügst du Pixi’VN einer React-Anwendung hinzu
Vorlagen
Es gibt Pixi’VN-Vorlagen, die React verwenden. Mehr darüber erfährst du im Abschnitt Vorlagen.Wenn du Pixi’VN einer bestehenden React-Anwendung hinzufügen möchtest, folge den unten stehenden Schritten.
Wenn du Pixi’VN einer bestehenden React-Anwendung hinzufügen möchtest, folge den unten stehenden Schritten.
Zuerst benötigst du eine React-Anwendung und musst pixi-vn installieren. Es wird empfohlen, Vite zu verwenden, um eine neue React-Anwendung zu erstellen.
Jetzt kannst du den Inhalt der folgenden Dateien durch den untenstehenden Code ersetzen:
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.layers.add("ui", new Container());
// Sound setup
sound.channels.add("bgm", { background: true });
sound.channels.add("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.htmlLayers.add("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));