Sphere + Health Bar

My two cents. I went with HTML/CSS for my game, here’s what that looks like (health bars specifically)

why CSS? Because customization is a lot easier, and because you can modify CSS without having to re-compile the application, which makes the job of editing your UI styles a lot easier. Plus, there’s a bunch of nice things that come with CSS out of the box, it’s just a lot less pain down the road.

Doing UI in GL has it’s own appeal though, I found that the hard way when after days of performance analysis I found out that my HTML/CSS minimap with 100s of icons was slowing everything down by a huge amount, I re-wrote that part in GL, now it’s blazing fast. For illustration - GL implementation of the minimap took about 40 hours total, whereas HTML version took about 2 hours.

One thing to watch out for with HTML/CSS overlay - it’s not part of your world, it’s drawn on top of it, so you have to live with the fact that no tree, bird or anything else can overlay your UI. I’ve embraced it, and it’s not been an issue for me. But you mileage may vary.

3 Likes