Ezelia

EZGUI : The missing GUI Library for Pixi and Phaser

Recommended Posts

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

ezgui-app-optimized2.gif  ezgui-game-optimized2.gif

 

 

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/

Share this post


Link to post
Share on other sites

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 :)

 

 

 

 

 

 

 

 

 

 

 

Share this post


Link to post
Share on other sites

@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 ;)

Share this post


Link to post
Share on other sites

@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 :)

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

@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)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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). 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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:

post-14383-0-51218300-1431945361.png

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.