Date 04/03/2019
Title Pop the Balloons! (Click to view on IMA nas)
Introduction I drew my inspiration for this project from a PC game I used to play on my dad’s laptop when I was around 4 years old, which is called “MozPong” (click to view on YouTube). I wanted to make something similar, where player uses a controller to keep the ball from falling to the ground. To make it more interesting, I added the balloons, which player can pop with the ball to score. Once the ball falls out of the screen, the score goes back to zero.
Concepts Involved Obviously, gravity is a very important physical element here. Nevertheless, the core feature of this project is the collision between the ball and the controller. It is a little bit different from what we learnt about collision in class, because the controller is not an ordinary object – its movement depends on mouse position, so does the velocity. Instead of the regular update method, I used two variables – current mouse position and previous mouse position – to keep track of mouse movement and implement it on the controller while also having a this.vel variable for it at the same time. Besides, repulsion happens between every two balloons, so that they dynamically maintain a balanced distribution all over the canvas.
In terms of the sine function that we newly learnt, I utilized it to make the balloons “inhale and exhale” (alternately increase and decrease in size), and make the fireworks effect when a balloon blows up. To be more specific, I used sine and cosine function to calculate the initial position of the firework particles around where the balloon previously was.
dat.GUI Thanks to dat.GUI, I added a debug mode to the project. It’s a boolean variable, and if you tick the box at the top right corner, you can see what all the velocity vectors are actually like – their magnitude and direction – including that of the controller, which is also the key point in this project of how to control the strength of each hit at the ball. The larger the velocity of the controller, the harder the ball is hit.
Some other features that I implemented using GUI are changing theme color and modifying the amount of balloons on screen. Being able to adjust the number of balloons basically means if you think the game is a little hard and you can’t seem to hit the balloons, you can increase the chance of hitting them by increasing the number of them.
Aesthetics I mapped the color of the balloons to their position, so that all the colors looked harmonious together. I added a little triangle at the bottom of each balloon so that they looked more like balloons. For the fireworks, they start out in the same color as the popped balloon, but as they fall they get redder-ish / yellower-ish. The appearance of the controller echos that of the ball. I added a half-transparent layer on top of the actual object, so that even if the player changes their color to black, which is the background color, they’re still visible.
Presentation Also, I wanted to defend myself that this game is far less hard to play than it looked during presentation! Because of some weird setting of my laptop, when things were projected on the screen, the canvas got larger but objects remained small. I think it was because I used pixels to scale them. Below is a video clip of me playing with it – not hard at all, right? You can try it yourself 🙂