PixiJS UI
Cómo usar capas y componentes de PixiJS para crear pantallas de UI personalizadas en Pixi’VN, y combinarlas con HTML UI.
Como se explica con más detalle aquí, toda la parte de renderizado de Pixi’VN se basa en PixiJS. Aprovechando las PixiJS Layers, puedes usar PixiJS para crear pantallas de UI personalizadas.
Plantillas
En todas las plantillas, se crea una PixiJS Layer llamada "ui" al iniciar. Puedes usar esta capa para crear tus pantallas de UI.
También puedes combinar componentes de HTML Layer con los de PixiJS Layer. Para hacerlo, añade los componentes de PixiJS durante el primer renderizado de una pantalla HTML y limpia la PixiJS Layer cuando se cierre la pantalla.
Por ejemplo:
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;
}Mejores bibliotecas de componentes de PixiJS
Para crear una interfaz de usuario atractiva, puedes usar algunas de las mejores bibliotecas de componentes de PixiJS: