I’m using the sprite.js script for the GUI.
Every time I pause the game with the pause button the different elements of the GUI are differently reordered.
I am doing something wrong?
Here the prototype:
Do you have a link to the project itself? At a rough guess, do all your sprites have the same Z-depth?
here is the link:
https://playcanvas.com/project/446645/overview/hockey-xhixhinabo-p2js
I’ve put numbers in the depth fields but it doesn’t work either.
You probably have to simply put elements on different Z distance from the camera. Or if they are on the same, then you can set drawOrder on their meshes, to specifically set drawing order for them.
The sprite script uses the depth script attribute for sorting. If it doesn’t work anymore it probably needs to be updated to set a drawOrder on the mesh instance that is created in the script.
Will the planned UI components that you are going to release soon address this issue?
What would be the best way to make the menus of the game? Menus with images, buttons and texts.
I don’t think that assigning manually the z-orders is a good practice. Things change all the time while developing a game.
New 2D stuff is going to render old sprites and font libs deprecated. New 2D stuff will be used mainly for UI indeed, and will have images and text. Other logic is up to developer to implement for now.
There is no release ETA on 2D stuff.
Have you considered using DOM for UI? In some cases it might provide better results.
DOM would have the disadvantage of a fixed resolution. Right?
Our games are usually iframed and/or scaled.
Responsive Design - is very powerful and arguably much easier path to do UI scaleable to any screen resolution, aspect ratio and orientation.
Devs in web been doing UI to support from any mobiles to big desktops for years now, using media queries in CSS3 - is the way to go.
2 Likes
I’d like to continue working on my prototype.
A while ago you said that UI components were planned. Are they ready to use?
They are still work in progress. The 2D API that is in working will not provide UI elements, but only basis for 2D rendering, that then has to be used to implement bespoke UI elements.
HTML + CSS is still best and easier option and does the good job for this task.
I tried with HTML + CSS but it was extremely difficult to make it responsive to make it work on different resolutions.
HTML5 and CSS3 are built to be responsive. All websites today are built with it and they are responsive.
do you know any example of a game with a responsive css GUI?
Any website with responsive design, regardless if it is a game or not - is an example.
https://tanx.io/ - uses HTML5 + CSS3
I tried on my phone and everything is quite messy on tanx.io
thanks anyways
I’ll keep on looking from time to time and I’ll check these 2d components once they are ready.
Game it self, UI looks completely fine on phones and is responsive. Profile pages are not yet adapted to phone sizes.
Basically, it is such a common practice and solved thing, it is trivial and today is essential skill of any front-end web developer. There are tons of tutorials and info on the web which is easily google’able.
Not sure what you mean by ‘messy’ but you can see how HTML5 + CSS can be used to make the UI responsive to different resolutions. Even if you don’t like the UI design in tanx.io, you can always do something different.
Another example that is using a HTML UI is the car demo: https://playcanv.as/p/RqJJ9oU9/?overlay=false
Edit: Your project is no longer public, there is probably an easy way to change the depth order dynamically based on it’s Z position or something just to keep your prototype going.
1 Like
