Today we will talk about the camera management, the UI development and some bonus at the end !
For now, the UI was used by drawing rectangles on the screen and I didn’t touch about the camera. These two approach are problematics for one reason : all the phones don’t have the same size nor the same resolution which means… My current display properly works for ONE kind of screen size which is an issue when you see all the Android devices on the market… Let’s solve this !
Forcing the camera ratio
First of all, I will force the camera ratio so everything will be properly layed out on all devices. After some research I found out that the Rect component of the Camera can be programatically modified. In simple terms it means that I can dictate what will be the ratio of my camera. How can I do this ? Well to sum it up :
- Compute the ratio I want A (in this case 16/9 because I want the game to be played in landscape mode)
- Compute the current ratio B (you can get it with Screen.width/Screen.height)
- Compute the scale B/A
- Apply this scale as the height of the Camera.Rect while keeping the width at 1
- Modify the Camera.Rect position to display the scene properly
Annnnd that’s it, the game will look properly display on every device ! (Of course we may encouter some unwanted borders when the screen is not 16/9 but it’s better than not seeing the game anyway).
As you can see the shape of the Pause button changed too. It is because it now uses the dynamic UI provided by Unity. Let’s explore this together !
Dynamic UI
One of the problems with the tutorial’s method is that any UI element I want to use has to be recalculated. I expect this approach to have many issues (the main one being too many scripts…). So once again I looked around in the Unity documentation to find out how can I solve this problem. Found out that the rect method was not the right approach since Unity developped a fully functionnal UI System. You can even use a canvas scaler component to manage the resize !
So you just have to configure the UI Scale mode as well as the Screen Match mode to have your canvas properly resized !
Now it gets really simple and easy and… You can edit directly in the editor ! All you have to do is create a UI Canvas that will contain all the other canvas. I decided to go for this canvas hierarchy
Then in order to run the interaction between the different canvas, I played with the alpha values, the interactable property and the block raycast property (so an invisible menu won’t block click for a visible menu).
It’s a very simple menu but at least it does the job for now, I will work on the appearance later. For now I need to work on some bonus things.
Bonus Time !
First of all, I limited the ball speed AND deactivated the collision when the ball is behind the player (no more suicide games…). One of the key features of the game is to use bonuses to disturb your opponents, it’s time to do it !
The bonus will appear randomly in the middle of the screen and will be launched at in a random direction. When you grab the bonus, your shield will change color. The bonus has a finite amount of time so use it as soon as possible, if your shield become white again then you loose the bonus. To use the bonus, just touch the ball !
Here are the bonuses:
- Faster ball: the ball will go faster for 2 seconds
- Invisible ball: the ball will become invisible to both player for 2 seconds
- Teleportation: the ball will instantly teleport to a random position on the ennemy side. (GIFCam doesn’t like green stuff for unknown reasons but I leave it since it clearly shows the ball path before/after teleportation)
Since I am not an expert in graphics, I took some sprites from the internet to represent the bonuses for now.
The balance is not good, I should really think of a way to make the bonus distribution equal. There is also the fact that the AI ignores the bonuses and their effects (it is not confused when the ball is invisible…).
To sum it up !
What I learned ?
- Using the UI System of Unity
- When you add bonuses you will get a difficulty balance issue
- I need my own sprites….
- GIFCam doesn’t like green stuff…
What are the next steps ?
- Use my own sprites (time to learn GIMP…)
- Make a polygon for the shields
- Balance the game now that the bonuses are implemented
- Find a way to follow the ball easily
See you next time !
Heri Andrianjafy 