ScreenElement vs HTML UI

[muirch]

Hello, I'm new to Excalibur.js and now prototyping a game.
At the stage of planning the UI, I faced the problem of choosing a method to create it. On the one hand, Excalibur offers the option of creating an interface using ScreenElement, and on the other, using HTML with the caveat that HTML may be selected due to some performance reasons.

I want to implement the graphical interface of the inventory, virtual joystick (for mobile devices), skill activation buttons and other RPG-like things. What should I choose?

Are there any performance benchmarks for comparing HTML UI and ScreenElement?

Thank you.

[kamranayub]

Hi Muirch, thanks for asking! I don't think we have any performance benchmarks and I am not sure if that will be helpful--HTML will always be "faster" than rendering on Canvas because HTML is separate. By using HTML, you offload all of that to the browser and it shouldn't affect your game as much as implementing Canvas-based UI. For all of our games that require more than a simple UI, we tend to go with HTML. For some pieces of UI like icons, progress bars, or sprite-based UI, we use Screen Elements.

There is also the question of how much work it will be. To build your own Canvas UI library of elements will be quite a bit of work. Handling events, rendering text, grids, etc. all of that will be up to you. If you wanted, you could open source that library for others, so it might be worth the work (but that's up to you). For HTML, you get so much out-of-the-box with event handling and CSS styling/layout that it will be much faster to prototype with.

If it were me, I'd start with HTML for dialogs or complex UIs (menus, inventory, etc.) especially for the "static" elements of the screen (things that don't need to move with game actors) because it'll just be faster.

For things like the virtual joystick, there is an HTML version or you could build your own with ScreenElement. For "action bars" or more static sprite-based UI, screen elements can work well (like health gauges or bars or things). In the future, you could invest the time to build the rest of the HTML UIs into your game with Screen Elements if you wanted.