Different UI approaches?

Sorry in advance if this has already been asked around the community before. I did have a brief look through the posts and couldn’t find one that could completely answer my question.

I have been messing around with some different UI approaches today for project. I built one using sprites with simple onClick events to handle buttons etc, this approach didn’t seem to bad. But I feel it might not be the best.
After looking around I found this project by @will that makes use of html+css to render the UI on top of the canvas. This method seems really nice but being new to the WebGL world I’m not sure what the “correct” or “best” approach would be.
Do I stick to sprites as I have done in other engines (Unity etc) or do I make use of web languages to build what I want?

Any tips/advice would be great :slight_smile: thanks!

1 Like

I guess there are 3 possibilities here:

Option 1: HTML and CSS
Use HTML and CSS. The browser already has awesome texture/image/shape rendering built into it! So why not use it? If you already have elite front end web development skillz, then this is an attractive option. However, if you’re quite new to HTML/CSS, there’s a lot to learn - and the learning curve can be quite steep.

HTML is great for achieving crisp, readable text, but unless you’re using SVG, it won’t scale proportionally to arbitrary resolutions. Instead, you have to employ responsive design to snap to different CSS rules depending on current window width/height.

Good example of using HTML and CSS: Call of Duty Gunsmith

Option 2: Font and Sprite scripts
We’ve created a couple of script on GitHub which implement:

  • Bitmap Fonts: This is a fixed resolution font which will scale to the overall resolution of your window. The workflow for creating the font files (.FNT + .JSON) is a little clunky, but it works and works well.
  • Sprites: images that will be drawn as textured quads over your PlayCanvas scene.

A nice thing about these scripts is that they have click/touch events built in to them.

These scripts are very useful and you could happily build a game UI with them.

Good example of using Font and Sprite scripts: Hungry Beast

Option 3: Planes and Textures
You could simply place screen aligned plane model components in front of the camera. This is a quick and easy way to get UI elements on-screen.

Good example of using Plane primitives: Flappy Bird


Hey @will,
thanks for the information.

I think it might be more beneficial if I go for the html / css approach for now. I haven’t used either language for a good few years now so it’s definitely about time I get up to date and start using some of the new features. Why not do it alongside some funky 3D stuff!

I do like the idea of the other 2 options, they seem like a safer, easier choice so I can have a plan b!


I prefer going with html+css, as they already have loads to offer. And cool thing about them, with small boilerplate, it is easy to do live reloading of assets, so you can edit html/css and see changes immediately without a need to refresh app.
Here is project example with some live reloading: https://playcanvas.com/project/354600/overview/htmlcss--live-updates (it uses legacy scripting system, but will be easy to take necessary parts out).

1 Like

Thanks for the example @max, I will go through and have a look into implementing this approach in my own project.

Have any of the recommendations changed here since the introduction of the built-in UI system?

I’d say right now the built-in UI system would be my first recommendation to a new project for a game like UI.

I would start exploring other options only if there are special requirements involved.

1 Like

This is an ancient zombie thread. Are you sure you didn’t find any newer one related to UI?
As @Leonidas mentioned, Playcanvas has since introduced powerfull features for 2D UI Screens. Please, refer to the user manual: