Inspiration：
We start our project when Halloween is around the corner so we decided to make a novel video game using the theme of Halloween. We searched a lot of already-existed video games and decided to combine two of them as a wholly new one which is Halloween Adventure as presented now as our group project. We originally drew our inspiration from Flappy Bird and Jetpack joyride, but since the two both used the mouse (pressed/drag) to control the object , we eventually decided to input microphone to make it different and more interesting.
Concept:
Then it come to the setting and sub-theme of our project, since we want to make the video unique as our own, I thought about the Quidditch game played by the characters in harry potter film. As all of us three group members are freshmen co2024, we engage in our university life and the course just like we are playing Quidditch, since quidditch is a positive competition, we should think about how to fly high, but also how to fly stably and overcome all the obstacles on the way to survive. And the use of microphone is meant to help the users relieve their stress whenever they feel stressful.
Effects:
Basically, we set two modes in our game, the easy mode and a more difficult one. In the easy mode, you just have to control harry with sound-making and making sure not to touch on the blocks, you pass a block and you got one score. In the hard mode we set random bonus which will change your scores. As your voice reaches a certain height, a ghost will rise up from the bottom of the screen which serves as a surprise.
User-testing:
We did get lots of useful feedback in our user-testing process.
①Rudi reminded us that the playing method of shouting is not that close related to letting harry fly with the broom so we add a special effect of the rising flying from the bottom of the screen.
②Also, some users found that there’s something wrong with our check function which make it much too difficult for the players to get scores and move on.
③Another point is that we initially have a moving golden snitch on the first page, which they found distracting hence we make it still as a decoration.
④Lastly, some of our classmates found out that the background of our game is not that dynamic because it’s not moving at all in the process. So we use another three backgrounds to change the settings with the sequence function.
Basic structure:
Working process:
Step 1. Preliminary conception. We want to use a microphone to input the sound and use sound to control the figure. We want this to be a game.
Step 2. Building the basic model of the game. We draw a ball first. Then we use a class to store this.rec to create black blocks and another array this.hei to define the height of each “passage” for balls to pass. Also we use the random function to randomize the height of each passage.
This is the original design sketch:
Step 3. Sound input. We refer to the p5.js library and some videos on YouTube. We use “var mic” and then “new p5.AudioIn()” to create a sound input. Then use “mic.getLevel ” to get the level of the sound.
Step 4. Add judgment. Judgement mainly include the start button, whether the ball crashes on the blocks or bonus and restart button. If the ball crashes on the blocks, the game will end.
These are the original start and end page:
Step 5. Beautification. We use procreate to draw some cute figures ourselves and find some background pictures to replace the original black blocks, balls and white background.
These are the beautified scene:
Step 6. Debugging and optimization. We overcame some challenges.
Challenge
According to our plan at first, we want to decide the height of Harry by using the exact volume level, which means the higher the volume is, the higher Harry will fly accordingly. However, although we try to make a stable sound, there still exists slight change of the volume, which makes Harry continues shaking up and down. Due to the instability, we decide to use a new and fixed form to change the height. As a result, the flying of Harry becomes much more stable and user-friendly.
Here is the code we use:
Since the basic model of Harry was a ball, the game was easy to play. However, when we changed the ball model into the picture of Harry, we should use a rectangle to tangent to the general shape of the picture. Thus it became quite difficult to play. So we have to make the standards lower. We used a smaller rectangle to represent the shape of Harry.
As our concept tells, we would like to make a game that can relieve stress by shouting or screaming. Actually at the beginning we added some screaming part. For example, the user has to shout to begin the game. However, when we did the user-testing, we found out that most of the users were too shy to do so. Also Professor Rudi thought screaming is not related to the theme of the adventure of Harry Potter. So we just deleted some and only added a function that when the user’s sound volume reached a certain level, there would fly out a cute ghost. Here is the picture:
Dynamic and interactive elements are quite important to our project. However, it seemed that we somehow lack these and the background was too dull without any changes. So we added four backgrounds. As the user is playing, the background will change according to time by using the function of sequence. Here is the code:
What I did in this project:
I was responsible for creating the overall framework of the game. I used mathematical algorithms to generate blocks, judge whether there is a collision, etc. into mathematical expressions, and express them in code. I was also mainly responsible for the coding and optimization part.
My learning outcome:
I know how to use mathematical models to construct judgment expressions expressed by code. Learn how to input audio using a microphone, class as well. And I also get some knowledge about sequence and understand its meaning.
Leave a Reply