How do you guys build your UI?

[MeMyMo]

Basically what the title says.

I'm having a hard time thinking how you can build a simple UI with some dynamic text/buttons/scrollable fields, etc.

 

A group with sprites? Outside of Phaser with HTML/CSS?

[MikeW]

I like using alpha to show what is selected and doing it with sprites - all in phaser code then

[Loonride]

Our latest game, Loon Ride, uses HTML elements to create menus and the UI. We first overlay the canvas with a container for the elements. We place elements in this container using jQuery, and empty the container on a state change. In the CSS, we only use scalable units (%, vw, vh, rem) so that the UI scales with the game. Check the game out here: https://loonride.com/about/loonride.

[bruno_]

I use plain html, css and js for menus and information in game. Only the game itself is phaser.

[mattstyles]

The DOM is superb for rendering big blocks of text, which means it is pretty darn-good at layout and when CSS came along it meant that all sorts of layouts and UI suddenly became possible and easier than existing methods, however, the DOM is a big ole beast so some ops can be a little slow.

Canvas is superb at rendering stuff really really fast but terrible for layout concerning multiple components.

A UI is usually largely static but involves multiple components that all respect each others position, this is almost the exact use-case that the DOM was created for and it is the exact use-case it mostly fulfils in browsers nowadays.

The DOM might not be fast enough to bounce around 100000 sprites but it is easily fast enough to respond to user actions and update itself, plus, this is the key use-case for the web so there are many many frameworks/libraries/modules out there to help you, not so for UI in canvas.

I'd almost always recommend UI in DOM and the rest of the game in canvas, let those pieces do what they are good at rather than banging square peg into round hole. Let Phaser handle game state, keyboard input, sound, fast rendering and let the DOM handle a dumb UI layer that is responsible for laying itself out (you get this for free with DOM structure and CSS) and pinging events when users do stuff to the rest of your game code.

Just to put this in perspective, the DOM and JS are so good at layout and UI that many native applications use a web-based approach in certain areas. Apps like Amazon on your phone uses web for content (for multiple reasons though) and many games (pretty sure some of the later Sim City series) use a web layer for their UI as DOM is great for layout and JS is great for responding to events.

[spinnerbox]

I use the Phaser API to create GUI of the game inside the canvas. Outside HTML5 tags suffice.

You can add to the canvas what is basically in the Game Objects section. For example I create a Phaser group of game objects and Phaser group of menu objects and I place buttons, menus etc into the menu objects group and all other stuff into the game objects group.

Phaser uses  Scenegraph. No object can be in two groups at the same time. You can add, buttons, text, sprites, images, animations, sounds etc...

Use GameObjectFactory to add these objects on the scene. But beware, they must belong to a group, otherwise they will be invisible.

P.S. Phaser has no support for scene transitions, so I made my own scene transition by fading all objects in the game objects group and in the menu group. I used Phaser.Tween. It has onComplete event and you can do stuff when the fading animation ends, for example, switch to other scene and save the game state.

[spencerTL]

It's worth mentioning: http://slick-ui.com/

If for whatever reason you don't want to use the DOM, it works well.  It may not have everything you want, though.

[mickeyren]

@Loonride wondering what you used to port your game to Android? Also wondering why only Android and not IOS too?