Jump to content

How do you guys build your UI?


Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 year later...

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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...