GUI Methodologies

[eldernos]

So, I'm working on some basic game design using Phaser and I'm starting to want to throw in a GUI and was wondering two things:

 

1)  What is the projected method of implementing a UI WITHIN the framework?  DOM over the canvas?  SVG rendering inside a canvas overlay?  

 

2)  If I were to want to use a DOM overlay, what methodology for allowing the passthrough of click events would be best?  Does anyone have experience with that?  Difficulty: IE compabitible.

 

Thanks a lot.  Love the project.  Best one I've seen by a mile.

[Ezelia]

I usually use DOM for games GUI, unfortunately if you want to wrap your game in coccoonjs or other solutions like this, it'll not work.

I use jquery-ui with custom skins

[rich]

I've spent a long time enhancing the Input classes in Phaser 1.0 to allow me to make UI items easily. I've added things like sprite rollover/out events, sprite dragging, snapping even pointer velocity so you can easily code gesture recognition. I did this because the current client game I'm working on (in Phaser) has UI stuff all over the place, and it's just useful of course So for me I would do the UI within the game itself.

 

However in the current 'live' version it may be better to use DOM. You could then feed those events down into the game quite easily (there are some standard public event handlers which you can redirect the event to, and it will pick it up as if it was a normal event). I wouldn't bother with SVG though.

[Bizzi]

The best solution is to make the UI over HTML/DOM.

Why?

Its easier to manage this. For example you can add Click/touch events and other - Simplies with jQuery.

If you add the User Interface over Phaser with the canvas drawing, you have a little Problems: You must exactly define the click positions and other.

If the UI designed over HTML/CSS you have additional features:

You can use Mediaquerys to define special Elements or Sizes for smaller devices. Here i have an Idea to make a little Plugin for Touch devices for override the keyboard features - Like native apps:

https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRWWZiFnkCSGWAIAP4usFRWEx-Qazo9vBNIoCnfoUR0W1_0ekP_CQ

I make small UI Examples for Preview.

[alex_h]

I was wondering about something similar the other day. In the canvas based game for mobile that I am working on at the moment I'm planning to add a simple high-score table, which will require an input field for the user to enter their name. My first thought was that I should use a DOM element for this in order to have it automatically open the on screen keyboard and so on. But then I could have quite a job getting the positioning and scale of the field to behave as intended since my game resizes to full screen. If I were to render the input field in canvas like everything else then of course positioning and scale are handled automatically. But then everything else about the input field becomes a potential world of pain, things like flashing carat, selection highlight, etc.

 

Can anyone advise as to how they normally handle input text fields?

 

Cheers!

Alex

[Bizzi]

You can handle input fields with some methods, for example:

<input id="score_name" name="score_name" value="" placeholder="Your Name" /><script type="text/javascript">var score_name = document.getElementById('score_name');// Bind event for "Key press"score_name.addEventListener('keypress', function(event) {	var code = event.keyCode || event.which;        // if you press "Enter"	if(code == 13) {		alert('Name: ' + this.value);	}}, false);</script>

[austin]

@Ezelia CocoonJS has a webview that's transparently overlayed on the screen to render DOM elements. See: http://wiki.ludei.com/cocoonjs:extensions:basic:webview

 

Since Clay.io's API is currently DOM based, we use it (primarily for our Construct 2 plugin) and it works well enough.

[Bizzi]

Otherwise you can use jQuery - Its a really simple JS Lib, here you can make awesome effects and other.

[austin]

I wouldn't really recommend jQuery - it's kind of overkill for game UI. One of the things jQuery has always been a life-saver for has been browser compatibility, but that isn't as much of an issue in the browsers that support canvas.

 

There are things in Vanilla JS like querySelectorAll to replace some of the ease-of-development features of jQuery (notably selecting by class name). For any of the effects like fading in and out, you're better off using CSS transitions.

[Ezelia]

@Ezelia CocoonJS has a webview that's transparently overlayed on the screen to render DOM elements. See: http://wiki.ludei.com/cocoonjs:extensions:basic:webview

 

Since Clay.io's API is currently DOM based, we use it (primarily for our Construct 2 plugin) and it works well enough.

was not aware about that oO , I tried some time ago to wrap two games in coccoonJS and for both all UI stuff was broken !

maybe it was an old version ...

[Todi]

Hello guys!

 

So, what you guys think about the creation of the GUI in GIMP/PS and make all things together with javascript classes, for events, etc?

 

Thanks!

[vorrin]

Hi Rich! 

 

I've been toying with Phaser for a few days, and I intend to use it for some contract work I'm just starting. The framework seems tight (especially using Typescript with it), thanks for that  

 

As you mention UI here, would you maybe have any good example to look at, of a game with elements that can both be dragged, and double clicked?

 

As the 'onDragStart' call happens immediately when clicking on an element, double-clicking something gives me two calls to that, and especially 'onDragStop' that kind of mess with the system (elements are draggable in certain other containers, and double-clicking them, or dropping them somewhere have pretty different reactions). 

 

Would you just try and solve this with a set of timeouts (ie. if the drag stopped within 200ms of starting, ignore the that specific callback etc), or are there better ways I'm missing?

 

I'm currently trying that attempt but weird things seem to be happening with times, though that's probably just me being sloppy or tired,. but yes, if you have any suggestion on the right way to deal with this issue, that would be nice. 

[vorrin]

Oh, in the meantime I realised you can add an extra argument to the callbacks for mouse events, which contains a Pointer object with msSinceLastClick, that already helps a bit

[stormwarestudios]

In keeping in-line with performance in mind (and thus wanting to avoid using the DOM at all) I implemented the Zebra library in my game engine.

[oler]

Can someone provide examples of jquery dom over canvas please???? I am curently using it and having truoble getting a simple alert box up...

 

where would you use 

$(document).on("click", ".alert", function(e) { .....

in the instance that you have seperate files to manage seperate states?

 

ie ::

indexjs  lib   jquery.min.js   bootbox.jssrc   Boot.js   Preload.js   Lobby.js      <-----------------------------------------need to use jquery here   Game.js

 where where would you use:

$(document).on("click", ".alert", function(e) { .....  in  Lobby.js  ?? would it be in the create: function(){}   

???  

 

cause it not working for me.

 

Someone please help. Thank you.

[Ningenbitto]

Then, as you have tried, what do you think better? DOM or something else? I am also in the process of creating a GUI for a game but I'm trying to decide which would be the best way without losing the performance of the game.

 

So far I have combined phaser objects and DOM and has not given me any problems.

 

regards

[Aikar]

I'm new to all this, but been doing a lot of research and found EZ-GUI. Maybe it'll suit your needs?

[corey]

In keeping in-line with performance in mind (and thus wanting to avoid using the DOM at all) I implemented the Zebra library in my game engine.

 

You may have moved in a completely different direction by now, but do you have any code examples of what phaser+zebra would look like?