Pixi’VNReact UI
Comment intégrer Pixi’VN avec React, y compris la configuration, les templates et les meilleures bibliothèques UI. Créer des visual novels ou des jeux 2D avec React.
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. Elle est gratuite, open source et maintenue par Meta (anciennement Facebook) ainsi que par une large communauté.
Vous pouvez en apprendre davantage sur React sur le React website.
Comment ajouter Pixi’VN à une application React
React template
Des templates Pixi’VN utilisant React sont disponibles. Vous pouvez en savoir plus dans la section templates.
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 d’installer pixi-vn. Il est recommandé d’utiliser Vite pour créer une nouvelle application React.
Ensuite, vous pouvez remplacer le contenu des fichiers suivants par le code des exemples:
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>,
);
}
) Meilleures bibliothèques de composants React
Pour créer une belle interface utilisateur, vous pouvez utiliser certaines des meilleures bibliothèques de composants UI pour React :