EZGUI : The missing GUI Library for Pixi and Phaser

[Ezelia]

Hello folks,

 

I'm happy to share with you our Pixi/Phaser GUI Library.

 

EZGUI is an attempt to make Game UI creation simple, and separate the GUI from the code.

 

it's Themable, extendable, and easy to use (at least we are trying)

 

here are tow examples of what you can do with EZGUI

 

 

 

and you can try them live here

 

Game example : on Pixi   |  on Phaser

 

App example : on Pixi   | on Phaser

 

The library is in early developement stage, but it's already usable in many types of games.

 

Documentation is in preparation, in the meantime you can take a look at the examples to get started.

 

 

So how does EZGUI make GUI creation easier ?

 

The main idea is to write almost no code for visual aspect, all pure GUI stuff is defined in JSON files.

 

The library is shiped with two themes (feathers and kenney) with many ready to use GUI components (themes will be enhanced/enriched in future versions)

 

EZGUI approach is to compose the GUIs from json definitions. it will not provide rich API to create GUI programmatically (it's still possible to create the gui elements programmatically but not recommended) .
instead, you'll have some functions to load themes, compose the UI, bind events, and animate/tween the GUI elements.
 

Additionally, we think to provide composite GUI components for most common game use cases, those can be : levels screen component, Hight score with stars component, Social share component ...etc (not decided yet but I think you see the idea)

 

Later we are also thinking to make a visual GUI designer, but this will be a separate project

 

 

EZGUI web site is available here : http://ezgui.ezelia.com/

And github repository is here : https://github.com/Ezelia/EZGUI

 

 

Feel free to give me your feedbacks / suggestions  and report issues if you use it

 

 

Edit

 

Added an integration example of EZGUI with Phaser breakout game : http://ezgui.ezelia.com/examples/breakout/

[MichaelD]

This is awesome GUI is much needed, I write my own and its a tedious job...

 

Do you provide some template for extending the GUI? Also do you accept pull-requests for new components?

 

Thanks!

[mwatt]

This is a very good idea.  I'm sure I'll look into this at some point.

[yahiko]

Interesting, I would have some use of it in my current project.

[qdrj]

Thanks a lot! It will come in handy.

 

But I would like to see more components e.g. Slider and NumericStepper.

[Ezelia]

Hi,

Thank you all for your feedbacks

 

@MichaelD : all contributions are apretiated and welcome, the code lack documentation right now, but if you understand it and want to contribute feel free to submit PRs.
The most complex code is done by GUIObject and GUISprite, GUIObject setup base event stuff and GUISprite extend it and add all visual aspect, states, and generic GUI features.

All other components extend GUISprite (or a subclass of it) .
if you want to have an idea of how it's done take a look at the implemented components, they are quite simple, the simplest ones are Button, Label and Window

the code is written in TypeScript.

 

 

@qdrj : actualy a slider component is already present, I just forgot to make an example for it.

here is a usage example :

var guiCfg = {	id: 'mainWindow',	component: 'Window',	header: { position: { x: 0, y: 0 }, height: 40, text: 'Header' },	draggable: true,	position: { x: 0, y: 0 },	width: 500,	height: 500,	layout: [1, 3],	children: [	  {		  id: 'slider1',		  component: 'Slider',		  slide: { width: 30, height: 40 },		  position: 'center',		  text: 'Checkbox',		  width: 200,		  height: 40	  }	]}

The above configuration define a draggable window with a header

and a horizontal slider child.  (if you want vertical just use the same configuration but make height grater than width )

 

when loaded the slider is accessible throught

EZGUI.components.slider1

and you can get/set the value with

EZGUI.components.slider1.value

Value is a float number between 0 and 1.

 

a numericStepper can be implemented by extending the Slider, I will add it in next updates

 

 

 

 

 

 

 

 

 

 

 

[yahiko]

Ezelia, I hope you will still be around in the next weeks if I got in troubles in using your framework

[Ezelia]

@yahiko : if you encounter any issues feel free to open issues in the github repo, I'll try to resolve them ASAP or help you in your code

I also need people who use the framework in real world so they can tell me what good, what's not and what can be enhanced

[Ezelia]

Just added some documentation to the repo wiki page : https://github.com/Ezelia/EZGUI/wiki

 

far from being complete but those are the basics to understand how themes and gui work.

 

will update it in the coming days

[playtwice]

I was actually looking for something like this, phaser needs a good gui library. I'll probably look into it in the coming weeks.

[bali33]

Thanks to share this GUI solution with the community ! I was looking for something like this - I will definitely try it very soon.

[Ezelia]

@playtwice @bali33 thank you !  let me know when you test it.

 

btw I added a lot of new examples to help you get started : https://github.com/Ezelia/EZGUI/tree/master/examples

 

numbered examples demonstrate the usage of a single GUI component.

 

named examples are more complex

 

I'm aware that current Wiki documentation is still not enought, I hope that those example will compensate, the time I write more documentation.

 

PS : the example named "test" is not a good start, it's just a test file I use to debug issues

[totor]

Nice lib, if it has templates for common games use cases and localization, it will be a killer!

[Ezelia]

@totor this is exactly what we are planing to do .
if you are thinking about a specific template please let me know so I add it to our roadmap.

[Ezelia]

I implemented the first game kit yesterday
It's the simplest one (the main game screen), next one will be the levels screen.

 

just to give you an idea of what a kit is.

it's mainly a composite component, dedicated to one usage, and simplified.
 

here is an exemple to illustrate how it works

 

the definition of MainScreen kit is as follow

var guiCfg = {    id: 'mainScreen',    component: 'MainScreen',    width: 600,    height: 550,    logo: '../../assets/img/myGameLogo.png',    buttons: [        { event: 'play', text: 'Play', width: 300, height: 80 },        { event: 'options', text: 'Options', width: 300, height: 80 },    ]}

here we define a MainScreen with a custom logo and two buttons

note the "event" property of the buttons.

this will provide easy access to the click event of each button, so when you create the GUI component you can listen to "play" and "options" events like this :

guiContainer = EZGUI.create(guiCfg , 'kenney');guiContainer.on('play', function (event, btn) {    console.log('clicked', btn.Id, btn.text);    });guiContainer.on('options', function (event, btn) {    console.log('clicked', btn.Id, btn.text);});

and the final result will look like this http://ezgui.ezelia.com/examples/kits/MainScreen-Pixi.html

 

 

want custom background image ?

 

just specify it in the GUI definition

var guiCfg = {    id: 'mainScreen',    component: 'MainScreen',    width: 600,    height: 550,    //our custom background image    image: '../../assets/img/panel-650x400.png',    logo: '../../assets/img/myGameLogo.png',    buttons: [        { event: 'play', text: 'Play', width: 300, height: 80 },        { event: 'options', text: 'Options', width: 300, height: 80 },    ]}

and the result will look like this http://ezgui.ezelia.com/examples/kits/MainScreen2-Pixi.html

 

 

and this is only a foretaste of some cool features we want to implement

[nkholski]

Is there any way to use the GUI as an overlay while the game is set on pause (keeping the GUI alive with pauseUpdate)? Example?

[Ezelia]

@nkholski each GUI element lives in a separate Container, and is not impacted by the game state, so you can show/hide GUI elements or manipulate them as you like when the game is paused.

 

if you look at this example : http://ezgui.ezelia.com/examples/game/phaser.html or this one http://ezgui.ezelia.com/examples/kits/MainScreen-Phaser.html

 

the GUI works just fine, and the game.paused is true (because no game is running actually)

[nkholski]

Thanks! A GUI plugin is a great idea, and EZGUI seems really nice. I will try it out asap.

[Ezelia]

found time to make a very quick integration example

here is the breakout game from Phaser examples with EZGUI integrated : http://ezgui.ezelia.com/examples/breakout/

 

I will write a dedicated tutorial to this example when I find some time.
the source code of the game is almost untouched.
the GUI stuff is separated to gui data in breakout-gui-data.js

and gui event handling in breakout-gui.js

[nkholski]

Thanks, and great that the GUI can work as an overlay in all states but what I meant was if the game was paused so that the update-function was not called at all. In the new example the paddle still moves when the dialog is visible.

 

I found this to illustrate: https://dl.dropboxusercontent.com/u/257829727/pointdata/index.html

It is paused with "p" and unpaused with "u". Would it be possible for EZGUI to display an dialog to unpause the game?

 

This would be extremely useful for pause menus with settings or an inventory menu etc without the player getting killed by monsters while in the menus.

 

If you open the console while in your example with the "oh no"-dialog open and execute "setTimeout(function(){game.paused=true;}, 5000)" and go back to the game, the dialog will get unresponsive after 5 secs (the game is paused automatically when going to the console why the setTimeout is a good way to demonstrate the point). 

[Ezelia]

EZGUI do not rely on phaser update function if this is your question

 

I modified the breakout example so the update function is ignored when the continue dialog shows, you can check it again using the same link.

GUI components are rendered by the internal PIXI render loop which remain active even if phaser update function is not called.

 

so yes, all EZGUI features remain available when the game is paused.

[ZoomBox]

This looks awesome and will save much time.

[1ipt0n]

hi, ezgui is great but it's doesn't work when i scale game in phaser . my init:

init: function () {        this.input.maxPointers = 5;        this.stage.disableVisibilityChange = true;        this.scale.scaleMode = Phaser.ScaleManager.USER_SCALE;        var  hscale = window.innerWidth/game.width;        var  vscale = window.innerHeight/game.height;        if(hscale<vscale)            vscale = hscale        else            hscale=vscale        this.scale.setUserScale(hscale,vscale,0,0);        this.scale.pageAlignHorizontally = true;        this.scale.pageAlignVertically = true;        this.scale.forceOrientation(true, false);        this.scale.refresh();    },

display is ok but input events are broken even if I create giu inside create function (after scaling)

[Ezelia]

Have you tried to destroy/recreate the GUI after rescale ?

EZGUI don't handle specific engine features (like rescaling) ... I'll maybe support it in future versions if it don't break things.

 

if you want to try destroy/recreate solution please use the latest EZGUI build from girhub repository (https://github.com/Ezelia/EZGUI/tree/master/dist), there was a bug in destroy method in last published version.

[1ipt0n]

hi, 

thank You for Your response.

 

I'm creating GUI after rescaling. the newest build doesn't help

 

all gui is rescalec and displayed ok, but touch event is working only on the upper part. 

 

like in this image clicks working only in red box: