Press enter to see results or esc to cancel.

EZGUI : The missing GUI Library for Pixi.js and Phaser.io

Today we are glad to introduce EZGUI, a GUI library to simplify GUI creation for PIXI.js and Phaser.io game developers. first, take a look at those cool examples 🙂 ezgui-game-optimized2 ezgui-app-optimized2                       EZGUI main goal is to separate the GUI description/visual aspect from game code. All gui elements and themes are described in JSON format, which can be stored in separate files keeping the code clean. The only code you'll need to write is the gui behaviour throught events binding, and if you want, add some animated transitions (EZGUI provide a simplified API for TweenJS). The library is shiped with two themes, which will be enhanced in future version, those themes are based on kenney UI pack and feathers metalworks theme. Loading gui component is very simple. The following code load metalworks theme and create a gui element defined in mainScreenJSON json object suppose that mainScreenJSON content is this will define a draggable window with a header, containing a child button in the center.
the button is in the center because we defined a layout of 1 horizontal element per 3 vertical elements, the first (top) child is null, the middle child is our button and we set its position to 'center'.
  if we create a gui element using the above JSON, EZGUI will give access to elements with IDs.  

let's take a look at real example

the interface bellow is intercative. The source code to achieve this example in both Pixi and Phaser is as follow All Gui screens are defined in this json file Let's initialize the library (Pixi or Phaser)   now that the library is initialized we can create our GUI at this stade, we can already see the main screen, but clicking the buttons wil not give any result.   now let's write the gui behaviour   as you can see, all we did here is defining the interactions and transitions. you can use this part of code to define specific behaviour and/or interactions with the game. the most important thing is that the code is completely independant from a given game code. you can even copy past it from a game to another, it'll work the same way.   This is the main idea behind EZGUI, but there is more to come ! Because the library is mainly targetting game developement, we are planing to provide specific game UI components like : levels screen component, Hight score with stars component, Social share component ...etc You can already fork the current EZGUI version from girhub : https://github.com/Ezelia/EZGUI Or visit the website : http://ezgui.ezelia.com/   your suggestions and contributions are welcome. also feel free to report issues and submit PRs.        
Indie Gamedev resources

Receive curated list of resources, specifically selected for indie game developers.
including graphics, music, tutorials, software ...etc

(one email per week max)