I’ll be developing a game for desktop and mobile browsers.
The first thing I’m wondering about is how to best do UI. Is using HTML/CSS like shown on the PlayCanvas tutorial how everyone is doing it, or are there any UI frameworks? How do you I do different aspect ratios? I’m assuming the objects inside the WebGL part of the game can be scaled to different ratios/resolutions automatically.
Thinking about it, my UI probably won’t be too complicated - should I maybe just treat them as sprites/textured planes in WebGL? Could I import differently sized textures depending on device screen resolution? (Is there such thing as a texture atlas in PlayCanvas?)
I’m also wondering how to best handle the many different resolutions that come with targeting desktop, mobile and tablet in general. The 3D elements should be fine, but are there any best practices regarding UI image asset size? What resolution(s) would I typically develop for? Should I have different assets for different resolutions? Is SVG a viable option?
Thanks in advance for any answers! PlayCanvas looks really good, and I can’t wait to start using it!
Tobias
Here is our project: https://playcanv.as/p/6OZ3PwEy/, Just use HTML/CSS/JS for the UI.
With my personal experience, if you want to create 2D UI, HTML/CSS/JS is your friends, they are really handy if you are good at them.
Depending on complexity of UI you want (reference screens would be a good way to tell). I do recommend HTML + CSS actually. Pretty much any modern website today does it in responsive manner, meaning it will adapt to any resolution and aspect ratio you need.
Media queries in CSS allow you to make huge changes to UI depending on whatever rules you want to define.
Another cool thing - there is loads tutorials and generally information about the HTML + CSS out there, is such a must-have for web-dev, that you easily will find answers to any problems you might encounter learning it.
I’ve started experimenting with HTML/CSS UI and I have a follow-up question: How do I properly scale the UI with the canvas size?
My aspect ratio is fixed to 4:3, so I don’t need any layout changes, but I wonder what the best way is to ensure that the game UI looks the same when viewed in e.g. 640x480 or 2560x1920 (and fluently in everything inbetween) relative to the canvas game content.
You could simply on every canvas resize event, get it’s position and size using getBoundingClientRect and position your UI container element accordingly. Then make sure all UI is within it.
Ah, no, my question was more along the line of “How do I scale things via CSS” - I want to keep my UI perfectly in sync with the WebGL content on different resolutions.
Top grey bar background, dark gray background, plane and cube are WebGL. Buttons, text and SVG are HTML/CSS. The top grey bar would obviously be done with HTML/CSS later on, this is just to check how well synchronized it stays. If you resize it, you see that it stays synchronized.