Is DIV-overlay a good way for persistent showing the HUD game elements?

Questions
1

I’m looking for the best way to showing HUD elements for the game (lives, bullets, level, xp, etc).
As for BJS GUI - I don’t use it. It has over 500kb size I think that’s too much for simple UIs. For UI elements I use DIV-element on top of my BJS canvas. For menus that’s perfect but what about HUD elements? I’m pretty nervous about compositing overload when using full screen sized DIV-element over my rendering canvas.
What do you think? Is it a bad practise to show div-overlay over the canvas during the whole game play time in tearms of browser performance not just for short-time menus?

2

I don’t have hard numbers but I feel like it wouldn’t affect performance that much :thinking: @sebavan @RaananW might have more concrete experience to share (Seb is OOF right now so he may take a while to respond)

A div-less and BJS GUI-less alternative could also be Utility Layers ( Rendering Utility Layers | Babylon.js Documentation (babylonjs.com)) or Layer Masks ( Layer Masks and Multi-Cam Textures | Babylon.js Documentation (babylonjs.com)), but these involve more manual work.

1 Like
3

I’m doing something like this in my game:

  • Game/canvas is underlying the whole website
  • Have a regular site menu/view structure on it
  • When the game starts, mostly hide those and bring in the game ui that is made with html/css (using Vue.js)
    • Here I just use css absolute positioning to put things like the inventory button or chat box to a correct place.

It kind of also depends on what you are building, but I think it works nicely. You can scale the UI with css breakpoints quite easily for mobile/tablet views or big screens. The performance should not be a problem if your game generally doesn’t lag and you are not updating all of the ui constantly. Therefore I recommend using Vue/React/Other web framework, since they have nice/performant change detection methods.

3 Likes
4

I suppose it’s a matter of approach. Both option are viable. As for a HUD element (that is mostly a part of gameplay), I’d (personally) rather choose the option of the more integrated GUI (the BJS GUI).
You can limit the load in a number of ways and aside from the weight, the constant call to the css/external to resize the div also has an impact on the overall performance/UX. As I say, a matter of choice. I believe each dev will have its own recipe here.

5

Adding a bit to the wonderful answers you have received so far -

The only downside for using a div element is the fact that your browser should support the div overlay for XR scenarios. If it does, there is no reason not to use it :slight_smile:

6

And also you can read official doc with pros and cons about different approaches GUI | Babylon.js Documentation

1 Like