User Interface (UI)
Cómo crear e integrar pantallas de UI en Pixi’VN utilizando frameworks de JavaScript externos como React, Vue y PixiJS.
Pixi’VN no proporciona componentes integrados para crear la UI del juego, y no reinventa lo que ya existe en el ecosistema de JavaScript. En lugar de encerrarte en un framework específico, te permite utilizar cualquier framework de JavaScript externo que prefieras para construir tu UI, de modo que puedas aprovechar sistemas como React, Vue, etc., para crear pantallas de UI complejas y de alto rendimiento.
Esta flexibilidad también hace que Pixi’VN sea ideal para el desarrollo asistido por IA: dado que la UI se construye con frameworks estándar y ampliamente utilizados en lugar de un sistema propietario, los asistentes de codificación con IA ya conocen bien estas herramientas y pueden generar, entender y modificar código de UI de forma muy eficaz.
React
Integra Pixi’VN con React, incluyendo la configuración, plantillas y las mejores bibliotecas de UI.
Vue
Integra Pixi’VN con Vue, incluyendo la configuración, plantillas y ejemplos de UI.
PixiJS
Utiliza capas y componentes de PixiJS para crear pantallas de UI personalizadas, y combínalas con UI en HTML.
Pixi’VN ofrece funciones para mejorar la compatibilidad con otros frameworks de JavaScript:
Diferencias entre la UI y el canvas
Tal como fue diseñado y concebido Pixi’VN, la UI y el canvas son dos elementos distintos e independientes. La UI está por encima del canvas y se utiliza para crear botones, formularios, etc. El canvas se utiliza para mostrar imágenes, vídeos, etc.
Toda la información sobre el estado actual del canvas se incluye en el guardado, y es posible restaurar el estado de un paso anterior. El estado actual de la UI no se incluirá en los guardados. Así que tienes que gestionarlo tú mismo guardando la información que necesites en el almacenamiento del juego o en el almacenamiento del navegador.
En el canvas puedes añadir componentes durante cada paso. En la UI no puedes hacer eso, puedes crear varias "pantallas" y navegar entre ellas.
En el canvas solo puedes añadir componentes de Pixi’VN. En la UI puedes añadir cualquier componente HTML/PixiJS o utilizar cualquier biblioteca de componentes de UI, de modo que puedas crear interfaces mucho más complejas.