The Wazana UI was good. But not good enough for you guys! 😍
In this article, I am going to explain how the former User Interface of the strategy game Wazana.io was working and how the new one is now structured. Of course, I will tell you why I decided to improve it and how I did it. At this point, it is worth remembering that Wazana is based on the web 3D engine BABYLONJS. And as we will speak about game UI, we will refer a lot to BABYLONJS GUI extension. Let’s go!
So basically the former UI was a bit blurred: since I only had 3D assets of the game object (meaning buildings and units for every 3 class in the game), the former UI was using these 3D objects to let you choose what you would want to build. And this was counter-intuitive. Indeed, normally UI is made of 2D assets and content but as I didn’t have plans or images of my buildings and units in 2D, I was forced to use the 3D objects. The pain point was that it was really hard to make them look good for several reasons:
- First, when you deal with objects in the scene, you don’t have the notion of absolute positioning and top/left on the screen in pixels. Indeed we are working in a 3D world where the only landmark is the 3D point {x:0, y:0, z:0}: the centre of your scene. So I had to determine where was the max left of the screen by myself whatever the screen. The trick was to use the picker of BABYONJS which tells you what is visible at a specific position on the screen. So I decided to pick the scene at the left border of the screen and move the plane containing the assets from centre to left until it gets hit by the picker. Once it was hit, it meant that it had reached the maximum left of the screen.
- Secondly, you can see on the left screenshot that the 3D assets don’t feel exactly straight. Indeed depending on the asset position, the rotation from your point of view is different like it would be in the real world. That is why I choose a view from the top which makes it easier to deal with rotation. You can see the shape very well but the positioning is still not perfect and the space between the object is not always regular.
- Then the thing that bothered me the most was the fact that text was blurred. As you can see below, this was not pixel perfect and sometimes depending on colours it could get a bit hard to read. That is the experience I really didn’t want for the players. It was blurred because the GUI was not applied on the screen but on a plane (the plane I position to the left of the screen) which is in the scene. And there is no solution for that issue except getting rid of the 3D objects and use something else in 2D so that I could use BABYLONJS GUI on the screen.
So the question was: How could I move from 3D assets to 2D assets?
The answer might be obvious for you but it took some time for me to realize that a simple screenshot should do it! Indeed my goal was to take a screenshot of the 3D asset and put that screenshot in the GUI on the screen. It seems easy, doesn’t it? However, there are still some issues to clarify:
- As the game Wazana.io uses a lot of colours and about 30 different assets for the 3 classes in the game, it would have been impossible to make all the screenshot manually (plus imagine you make some updates on the asset…). Fortunately, BABYLONJS also provides a feature that allows you to take screenshots from the scene so I just had to use it correctly and I would have all the 2D images of the assets that I need.
- Where would I take the screenshot? I could do it anywhere actually but it shouldn’t be in the current game or the user won’t understand why there are assets he hasn’t build on its game. So I decided to put them below the game’s ground to make sure the player would not see them (even if the assets were destroyed just after the screenshot has been made). Then I made an offset of the camera for every new asset to be screenshotted so that the background would not be the same.
Finally, we have the result we wanted. A better-looking User Interface which is more readable. No more blur effect, no more position and rotation problem and no more hardcore calculation to make a 3D plane follow the screen size. In addition, we didn’t have to make a lot of screenshots ourselves as they are made during game preparation.
Go try it!
If you have suggestions on how I could have managed it or what could make the UI of Wazana.io even better, send me your comment! I will be happy to discuss it with you. 🤗
