Appuyez sur Entrée pour voir vos résultats ou Echap pour annuler.

EZGUI : La Librairie GUI pour Pixi.js et Phaser.io

Aujourd'hui, nous sommes heureux de vous présenter EZGUI , une bibliothèque GUI pour simplifier la création d'interfaces utilisateur pour PIXI.js et Phaser.io développeurs de jeux . Voici deux exemples de ce que permet EZGUI 🙂 ezgui-game-optimized2 ezgui-app-optimized2                       l'objectif principal de EZGUI est de séparer le code de l'UI. Tous les éléments thèmes/gui sont décrits au format JSON ,ils peuvent ainsi être stockées dans des fichiers séparés afin de garder le code propre . Le seul code que vous aurez besoin d'écrire consiste à lier votre UI au comportements souhaités à travers les événements. et si vous le souhaitez, vous pouvez ajouter quelques animations et transitions grâce à une API simplifiée (un wrap de TweenJS) La librairie embarque deux thèmes qui seront améliorés dans les futures versions, ces thèmes utilisent des éléments graphique du pack UI de Kenney et du theme metalworks de la librairie feathers. Le chargement des composants GUI est assez simple Le code suivant précharge le theme metalworks, puis crée un élément gui défini dans l'objet JSON mainScreenJSON. en supposant que le contenu de mainScreenJSON est : ceci va créer une fenêtre draggable avec un bandeau-titre, la fenêtre contien un bouton enfant placé au centre.
le bouton est centré car nous avons defini un layout d'un élément horizontal per 3 éléments verticaaux, le premier enfant du layout est nul, le second (donc centre vertical) c'est notre boutton, et nous lui avons défini une position 'center' qui le met au centre de la cellule du layout.
  Une fois les éléments GUI créés avec le JSON ci-dessus, EZGUI nous donne accès aux différents éléments avec leurs IDs respectifs comme suit :  

Prenons un cas d'utilisation réél

l'interface ci-dessous est interactive Le code source pour réaliser cet exemple avec Pixi et Phaser est le suivant Toutes les définitions JSON des élements GUI utilisés sont dans ce fichier Tout d'abord nous avons besoin d'initialiser la librairie utilisée (Pixi ou Phaser)   Maintenant que notre librairie est initialisée nous allont créer les éléments GUI à ce stade , nous pouvons déjà voir l'écran principal , mais en cliquant sur les boutons rien ne se passe.   nous allons coder le comportement du GUI   comme vous pouvez le voir, tout ce que nous avons ici est de définir les interactions et les transitions . vous pouvez utiliser cette partie du code pour définir le comportement et / ou des interactions spécifiques à votre jeu . Le plus important étant de maintenir le code spécifique au jeu complètement séparé de l'interface utilisateur. ainsi vous porrez copier/coller votre GUI d'un jeu à l'autre, elle gardera le même comportement.   c'est le principe de fonctionnement d'EZGUI mais ce n'est pas tout ! puisque la librairie cible principalement les dévelopeurs de jeux, nous prévoyons mettre en place des composant GUI spécifiques pour les jeux, tel que : des écrans de sélection de niveau, des écrans de scores, connexion avec réseau sociaux ...etc Vous pouvez dès à présent forket la version actuelle d'EZGUI sur github https://github.com/Ezelia/EZGUI ou visitez le site officiel de la librairie : http://ezgui.ezelia.com/   Vos suggestions et contributions sont les bienvenues. et si vous rencontrez des bugs, n'hésitez pas à les remonter sur le trackeur de bugs de github.