Pixi’VNReact UI
Comment intégrer Pixi’VN à React, y compris la configuration, les modèles et les meilleures bibliothèques UI. Créez un visual novel ou un jeu narratif React.
Pixi’VN fonctionne très bien comme moteur visual novel React, vous permettant de créer l'UI de votre visual novel ou jeu narratif avec des composants React, tandis que Pixi’VN gère la narration et le canvas.
Qu'est-ce que React ? React est une bibliothèque JavaScript permettant de créer des interfaces utilisateur (UI) pour des sites web, des applications et bien plus encore. Il est gratuit, open source, et maintenu par Meta (anciennement Facebook) et une grande communauté.
Vous pouvez en savoir plus sur React sur le site web de React.
Comment ajouter Pixi’VN à une application React
Templates
Il existe des modèles Pixi’VN disponibles qui utilisent React. Vous pouvez en savoir plus à leur sujet dans la section modèles.Si vous souhaitez ajouter Pixi’VN à une application React existante, suivez les étapes ci-dessous.
Si vous souhaitez ajouter Pixi’VN à une application React existante, suivez les étapes ci-dessous.
Tout d'abord, vous avez besoin d'une application React et de installer pixi-vn. Il est recommandé d'utiliser Vite pour créer une nouvelle application React.
Vous pouvez maintenant remplacer le contenu des fichiers suivants par le code ci-dessous :
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));