Hi,
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?
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.
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
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).
thanks!