EZGUI : The missing GUI Library for Pixi and Phaser

[Ezelia]

This is wired :/

EZGUI use native Phaser events, it should work if Phaser events work.

 

can you please show me your GUI definition ?

 

there is also couple of things to check

 

if you don't scale, is the gui working ?

is the close button in your example working ?

 

is it possible to create a simple phaser code with two interactive sprites, one in the top, other in the bottom, then scale and test if phaser events trigger correctly ? (the goal here is to exclude the possibility of phaser bug)

[1ipt0n]

Yes. If I remove scaling GUI works.

 

my json:

var levelSelectScreenJSON = {	id: 'levelSelectScreen',	component: 'Window',	header: { position: { x: 0, y: 0 }, height: 40, text: 'Select Level' },	padding: 4,	position: { x: 20, y: 100 },	width: 430,	height: 200,	layout: [1, 10],	children: [		{			id: 'levelsList',			component: 'List',			dragX:false,			padding: 4,			position: {x:0, y:0},			width: 420,			height: 120,			layout: [5, 2],			children: [				{ id: 'lvl1', text: '1', userData: 'level1', component: 'Button', position: 'center', width: 50, height: 50},				{ id: 'lvl2', text: '2', userData: 'level2', component: 'Button', position: 'center', width: 50, height: 50 },				{ id: 'lvl3', text: '3', userData: 'level3', component: 'Button', position: 'center', width: 50, height: 50 },				{ id: 'lvl4', text: '4', userData: 'level4', component: 'Button', position: 'center', width: 50, height: 50 },				{ id: 'lvl5', text: '5', userData: 'level5', component: 'Button', position: 'center', width: 50, height: 50 },				{ id: 'lvl6', text: '6', userData: 'level6', component: 'Button', position: 'center', width: 50, height: 50 },				{ id: 'lvl7', text: '7', userData: 'level7', component: 'Button', position: 'center', width: 50, height: 50 },				{ id: 'lvl8', text: '8', userData: 'level8', component: 'Button', position: 'center', width: 50, height: 50 },				{ id: 'lvl9', text: '9', userData: 'level9', component: 'Button', position: 'center', width: 50, height: 50 },				{ id: 'lvl10', text: '10', userData: 'level10', component: 'Button', position: 'center', width: 50, height: 50 },			]		}, null, null, null,null,null,null, null,		{		 id: 'levelBack',		 text: 'Close',		 userData: 'level back',		 component: 'Button',		 position: 'left',		 width: 50, 		 height: 30,		 font: {size:14}		}, null	]}

You can test it on:

...link removed...

 

working level buttons are 1,2 and 5.

 

"close" button is not working becouse I didn't attach any event to it

[Ezelia]

got it

 

here is a quick and dirty patch.  I'll make a cleaner version in the next EZGUI update (maybe tonight).

 

 

Add the following code to your script (make sure it'll be executed after ezgui.js)

function isMasked(x, y, obj) {            var parent = obj.parent;            if (parent == null)                return false;            if (!parent.worldTransform || !parent.guiMask)                return isMasked(x, y, parent);							var wratio = Phaser.GAMES[0].scale.width/Phaser.GAMES[0].width;			var hratio = Phaser.GAMES[0].scale.height/Phaser.GAMES[0].height;								            var tx = (parent.worldTransform.tx + parent.guiMask.x) * wratio;            var ty = (parent.worldTransform.ty + parent.guiMask.y) * hratio;			            var w = parent.guiMask.width * wratio;            var h = parent.guiMask.height * hratio;            if (x < tx || y < ty || x > tx + w || y > ty + h)                return true;            return isMasked(x, y, parent);        }EZGUI.utils.isMasked = isMasked;

let me know if it fixe all the scaling issues

nice game btw   let me know when you publish it.

 

I'll add some projects using EZGUI to the showcase in the official page and project wiki.

[1ipt0n]

This is great! 

Thank You very much

 

I will definitely tell You when it's finished .

[Ezelia]

fix published, you can now use the latest dev version and remove the workaround   (https://github.com/Ezelia/EZGUI/tree/master/dist)

[1ipt0n]

thx

[sanafa]

Hey Ezlia, thanks for this awesome framework, it works great.

 

I want to ask a quick question: is there any support for TextFields? something like an Input component or something like that.

 

Thanks.

[Ezelia]

Hi sanafa,

thank you for you comment.

the input component is the one I'm working on now

it'll be added in the next update very soon.

just trying to figure out the best and cleanest approach to make it, so it support both desktop and mobile devices.

 

follow the developement repo on github since it's updated more frequently than the zip package.

[sanafa]

Cool, great news!

[Ezelia]

a first version of input control was pushed .
this is the live demo to see how it work : http://ezgui.ezelia.com/examples/07-input/1-simple.html

 

it's still not perfect but is usable on both desktop and mobiles.

 

let me know if it works fine for you, and feel free to open issue on Github or post here if you encounter any bug

[sanafa]

Hey Ezelia. Actually, it worked really good, thanks for the super fast response.

I think the only issue I've found is that I cannot leave the text property empty (or missing), because I get this error:

 

EZGUI.js:2368 Uncaught TypeError: Cannot read property 'position' of undefined

 

Thanks!

[Ezelia]

Good catch ! this is a bug in text property
 

I just pushed a fix update.

[seand88]

This looks great, thanks for this

[Ezelia]

Just pushed a new version to git repository.
this one mainly fix Phaser 2.4 compatibility.
since some Pixi classes and structures was removed in Phaser 2.4, this version allow you to use EZGUI with Phaser 2.4 by including a compatibility script.

compiled version and compatibility scripts are available here : https://github.com/Ezelia/EZGUI/tree/master/dist

also added two usage examples :

• https://github.com/Ezelia/EZGUI/blob/master/examples/Phaser/phaser-2.4.html
• https://github.com/Ezelia/EZGUI/blob/master/examples/game/phaser-2.4.html

 

[Tuan]

Thanks for nice jobs!

[Stan1904]

Hey, thank you for all your work

 

But i have some trouble:

When i want to load a theme, this error appear: JSON.parse: unexpected character at line 1 column 1 of the JSON data

It happens before the load is finish. I try everything.

 

I use your documentation code and it doesn't work on my game :s

can you help me? I use nodeJs and Phaser.

 

(sorry for my poor english)

[caragones]

[Ezelia]

Hi @caragones,

 

I have noticed similar case in a game where I used an HTML5 wrapper (similar behavior on both Cordova and Crosswalk).

For me it was only happening for GUIs taking the whole screen, the game performance itself was not affected ....
I thought that it's related to cordova behaviour : maybe limitting RAF calls when nothing change on the screen leading to fake FPSmeter drop  ?

and I stoped investigations there.

 

I don't think that EZGUI itself will cause performance drop because of coputation, because each EZGUI control is constructed once, and cached using Pixi bitmap cache. so the build code (which require CPU time is only executed once).

it can also be the fact that drawing a big texture (the cached bitmap) can degrade performance, but in this case it'll be more related to Pixi.
 

if you think it really degrade game performance, I'd like to investigate more. but I need more information.

have you tried Chrome profiler to see if some code is using lot of CPU time (also check heap allocations)
 

[caragones]

On desktops the performance is always 60 FPS.

 

If I put a Phaser button there is no difference but I have a problem when using an EZGUI button. I'm puzzled.

Is it possible that are there two layers? GUI and normal Phaser. Or that EZGUI use WebGL (it has a great drop on iOS).

 

What is the main difference between Phaser buttons an EZGUI ones (despite the great EZGUI features) when a button is rendereed?

[Ezelia]

There is no real difference between Phaser button and EZGUI button, both user sprite for rendering and eventmanager to catch events.

 

But for each component, EZGUI create a specific phaserGroup to isolate EZGUI specific complement from game components .... this is not supposed to reduce performance (it add a hierarchi level but will surely not lead to a drop of 30% !)

 

also EZGUI will use the current active renderer, if you use canvas2D it'll use canvas2D too.

 

I never tested on iOS devices, maybe there is some difference in behaviour ....

 

do you have any way to monitor CPU performance and memory allocations ?

[caragones]

I don't know if there is any way to debug JS on iOS. I only use Chrome dev tools on desktop. Sorry

 

What about the EZGUI inicialization process? Is something created?

[caragones]

Another question. It is suppossed that I must call anything before I use EZGUI?

I have no no other code that use or call EZGUI, only the func that I posted previously.

[Ezelia]

the initialization process only load EZGUI resources to make sure they are available for components.

then, for each component, there is a processing for JSON settings, then a creation of the component, and finaly the component is cached.

this processing, is only done once, then everything is handled by Pixi or Phaser .

 

the EZGUI component become a Phaser DisplayObject with specific interactions.

[caragones]

Do I have to configure something for EZGUI to use Phaser instead of PIXI?

I had to comment this line -> 'declare var Phaser: any;' in file EZGUI.d.ts

[Ezelia]

No, nothing to configure.
Phaser 2.x do not have its own rendering engine, it use Pixi renderer.

EZGUI detect if you are using Phaser and adapt automatically.