PixiJS UI
Come usare i livelli e i componenti di PixiJS per creare schermate UI personalizzate in Pixi’VN, e combinarle con l'HTML UI.
Come spiegato più in dettaglio qui, l'intera parte di rendering di Pixi’VN si basa su PixiJS. Sfruttando i PixiJS Layers, puoi utilizzare PixiJS per creare schermate UI personalizzate.
Modelli
In tutti i template, all'avvio viene creato un PixiJS Layer chiamato "ui". Puoi utilizzare questo livello per creare le tue schermate UI.
Puoi anche combinare componenti HTML Layer con componenti PixiJS Layer. Per fare questo, aggiungi i componenti PixiJS durante il primo rendering di una schermata HTML e ripulisci il PixiJS Layer quando la schermata viene chiusa.
Ad esempio:
import { useEffect } from "react";
import { Assets, canvas } from "@drincs/pixi-vn";
import { Sprite } from "pixi.js";
export default function MyScreen() {
useEffect(() => {
let layer = canvas.layers.get("ui");
if (layer) {
const texture = await Assets.load(
"https://pixijs.com/assets/bunny.png",
);
const bunny = new Sprite(texture);
layer.addChild(bg);
}
return () => {
canvas.layers.get("ui")?.removeChildren();
};
});
return null;
}Le migliori librerie di componenti PixiJS
Per creare una bellissima interfaccia utente, puoi utilizzare alcune delle migliori librerie di componenti PixiJS: