Ezelia

EZGUI : The missing GUI Library for Pixi and Phaser

Recommended Posts

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)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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 :

 

Share this post


Link to post
Share on other sites

Hey, thank you for all your work :D

 

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)

Share this post


Link to post
Share on other sites

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)
 

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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 ?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.