PixiJS UI

Come spiegato più dettagliatamente qui, l'intera parte di rendering di Pixi'VN è basata su PixiJS. Sfruttando i vantaggi dei PixiJS Layers, puoi usare PixiJS per creare schermate di interfaccia utente personalizzate.

È anche possibile combinare i componenti del HTML Layer con quelli PixiJS Layer. Per fare ciò, aggiungi i componenti PixiJS durante il primo rendering di una schermata HTML e pulisci 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.getLayer("ui");
        if (layer) {
            const texture = await Assets.load('https://pixijs.com/assets/bunny.png');
            const bunny = new Sprite(texture);
            layer.addChild(bg);
        }

        return () => {
            canvas.getLayer("ui")?.removeChildren();
        };
    });

    return null;
}

Le migliori librerie di componenti PixiJS

Per creare una bella interfaccia utente puoi utilizzare alcune delle migliori librerie di componenti PixiJS:

• PixiJS
• PixiUI
• PixiLayout