User Interface (UI)
Comment créer et intégrer des écrans UI dans Pixi’VN en utilisant des frameworks JavaScript externes comme React, Vue et PixiJS.
Pixi’VN ne fournit pas de composants intégrés pour créer l'UI du jeu, et ne réinvente pas ce qui existe déjà dans l'écosystème JavaScript. Plutôt que de vous enfermer dans un framework spécifique, il vous permet d'utiliser le framework JavaScript externe de votre choix pour construire votre UI, afin que vous puissiez exploiter des systèmes tels que React, Vue, etc., pour créer des écrans UI complexes et performants.
Cette flexibilité fait également de Pixi’VN un excellent choix pour le développement assisté par IA : comme l'UI est construite avec des frameworks standards et largement utilisés plutôt qu'un système propriétaire, les assistants de codage IA connaissent déjà bien ces outils et peuvent générer, comprendre et modifier le code de l'UI très efficacement.
React
Intégrez Pixi’VN avec React, y compris la configuration, les modèles et les meilleures bibliothèques UI.
Vue
Intégrez Pixi’VN avec Vue, y compris la configuration, les modèles et des exemples d'UI.
PixiJS
Utilisez les couches et composants PixiJS pour créer des écrans UI personnalisés, et combinez-les avec de l'UI HTML.
Pixi’VN propose des fonctionnalités pour améliorer la compatibilité avec d'autres frameworks JavaScript :
Différences entre l'UI et le canvas
Tel que Pixi’VN a été conçu, l'UI et le canvas sont deux éléments distincts et indépendants. L'UI se trouve au-dessus du canvas et sert à créer des boutons, des formulaires, etc. Le canvas sert à afficher des images, des vidéos, etc.
Toutes les informations sur l'état actuel du canvas sont incluses dans la sauvegarde, et il est possible de restaurer l'état d'un step précédent. L'état actuel de l'UI ne sera pas inclus dans les sauvegardes. Vous devez donc la gérer vous-même en enregistrant les informations dont vous avez besoin dans le stockage du jeu ou le stockage du navigateur.
Dans le canvas, vous pouvez ajouter des composants à chaque step. Dans l'UI, vous ne pouvez pas faire cela, vous pouvez créer plusieurs « écrans » et naviguer entre eux.
Dans le canvas, vous ne pouvez ajouter que des composants Pixi’VN. Dans l'UI, vous pouvez ajouter n'importe quel composant HTML/PixiJS ou utiliser n'importe quelle bibliothèque de composants UI, afin de créer des interfaces bien plus complexes.