PixiJS UI
Wie man PixiJS-Layer und -Komponenten verwendet, um benutzerdefinierte UI-Screens in Pixi’VN zu erstellen und sie mit HTML-UI zu kombinieren.
Wie hier ausführlicher erklärt, basiert der gesamte Rendering-Teil von Pixi’VN auf PixiJS. Indem du die Vorteile von PixiJS Layers nutzt, kannst du mit PixiJS benutzerdefinierte UI-Screens erstellen.
Vorlagen
In allen Templates wird beim Start ein PixiJS Layer namens "ui" erstellt. Du kannst diese Ebene verwenden, um deine UI-Screens zu erstellen.
Du kannst außerdem HTML-Layer-Komponenten mit PixiJS-Layer-Komponenten kombinieren. Füge dazu die PixiJS-Komponenten beim ersten Rendering eines HTML-Screens hinzu und räume den PixiJS Layer auf, wenn der Screen geschlossen wird.
Zum Beispiel:
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;
}Die besten PixiJS-Komponentenbibliotheken
Um eine schöne Benutzeroberfläche zu erstellen, kannst du einige der besten PixiJS-Komponentenbibliotheken verwenden: