Pixi’VNReact UI
Come integrare Pixi'VN con React, inclusi configurazione, modelli e le migliori librerie UI.
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
React template
Sono disponibili modelli Pixi'VN che utilizzano React. Per ulteriori informazioni, consulta la sezione templates.
Se vuoi aggiungere Pixi'VN a un'applicazione React esistente, segui i passaggi sottostanti.
Per prima cosa, hai bisogno di un'applicazione React e di installare pixi-vn. Si consiglia di utilizzare Vite per creare una nuova applicazione React.
Ora puoi sostituire il contenuto dei seguenti file con il codice seguente:
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>,
);
}
) Le migliori librerie di componenti React
Per creare un'interfaccia utente accattivante, puoi utilizzare alcune delle migliori librerie di componenti React UI: