HCI Lab 2: Roll a Ball in Unity
- quentinaudy
- 9 janv. 2023
- 4 min de lecture
In this second lab, we created a new game in Unity. We already discovered this game engine in September when we created a platformer game. Here in this article, I will present you the development of a Roll a Ball game.
Summary
Create the environment
The first step here is to create the project, and to make the global structure of the environment. As we have already done many projects on Unity, the setup at the beginning was extremely fast. I used a Unity version that already had the right modules installed (including the one that allows deployment on Android, which we will use in a future lab).
Now that our scene is ready, we must create the platform, the ball and the collectibles. This part is really simple. First, I created the plane:

Then, we must have the walls. I just created a cube that I distorted, and duplicated in order to have four walls around:

For the player, it will be a sphere. I also created materials with simple colours, in order to have various textures for the game:

Finally, the last elements are the collectibles that we will have to collect in order to increase or decrease our score. Here, I just created some cubes with red and green colors. In order to have the same properties, I created one red cube, one green cube and transform them into prefabs. I was able to duplicate them, and to avoid redundancy while creating them.

All the environment was now set up. After that, the goal was to create the interactions, the playable part by creating some scripts, and adding properties to the objects.
Scripts and Gameplay
Now, if we want to play the game, we have to manage the inputs, the controls, the camera and the interactions with the collectibles.
In the package Manager, I first imported the Input System Package. Thanks to that, I can add the Player Input module to the ball: it will allow it to understand the inputs I will send (which keys I am pressing, or on what I will click).

I also added a Rigidbody to my ball, in order to subject it to gravity.

The last thing to do to be able to play with the ball is to create a script: I made the PlayerController.cs one:

And that's it ! With our keyboard, we can now move the ball. However, we have some troubles to resolve and improvements to do. First, we want the camera to move and follow the ball. The first idea would be to put the main camera as a child of the ball, but it will not work very well because the camera will roll and rotate following the ball. To resolve that, I computed a script for the camera to follow correctly the ball:

Finally, for the gameplay to be funnier, we have to compute the interactions with the collectibles. It will here consist of two part: making them move, and making them disappear when a collision occurs.
The animations of the collectibles are done with these two scripts (rotation and oscillation):


For the collisions, I created two tags: it will allow us to create events according to the nature of the object. For example, if the collectible is green, I give a "green" tag that will give one point to the player if there is a collision. If the collectible is red, I gave a "red" tag that will remove one point to the player.
To make the collectible disappear while being touched by the ball, I added some lines to the PlayerController.cs script.

It didn't work very well at this moment: I forgot to untick "gravity", to tick "is Kinematic" and to tick "is Triggered" to the collectibles. And after that, everything worked well. I had a fun Roll a Ball game !

Canva and Score Counter
Yes, the game is fun ! But if there isn't any score, any goal, this game is useless. In this part, we created a score text where we gain one point if we collect a green collectible, and we lose one point if we collect a red collectible.
For that purpose, I added an UI, so this is a canva where we can put a text on. I used Text Mesh Pro.

If I want to change the score, I need to change the PlayerController.cs script and create a ScoreManager.cs script.

This code (ScoreManager.cs) is composed of one function to increase the score, and one function to decrease the score. And we changed the PlayerController.cs like that:

In this part, if the ball collides with a green tagged object, we use the AddPoint function in the ScoreManager.cs script. If the ball collides with a red tagged object, we use the RemovePoint function. The text in the canvas changes automatically thanks to that.
Finally, in the ScoreManager.cs document, I added two lines to make a victory text if we reach the maximal score:

Finally, I just had to build the app to be able to play:

And here it is, we have our Roll a Ball game !
For the bonus, I did some changes to have a nicer version. If you want to see both in a video, go at the end of this article.
Bonus: Mario Version
One of the goal here, for this article, was to improve the game by making it more original. I decided to put a theme to this game: Mario. There were not many changes, but the result is way better.
First I changed some textures: instead of having just colors, I downloaded textures for the ball (Mario), for the ground (bricks) and for the walls:
The result is great here, but the collectibles are not convincing. So I decided to download some 3D models: the green cubes will be transformed into mushrooms and red cubes into goombas. I just had to replace the prefab, and change the tags in order to make the script work.
Finally, I tried to add the classic Mario Bros song for the game. And that's it, we have our final Roll a Mario Ball.
To conclude this article, here is a demonstration with the original game, and the improved one.









Commentaires