Falling Bird
My final project is an educational game surrounding air pollution. I wanted to bring more awareness towards it because it is one of the less talked about environmental issues.
I took inspiration from a high school competition surrounding the pollution of our oceans. The program hosting the competition is a foundation called Bow Seat, an Ocean Awareness Program. I took their concept and mission for communicating through art for the oceans, I wanted to do the same for our air. Moreover, I took inspiration from the widely popular fun game flappy bird. I wanted to draw people into the game not one for the concept, but the aesthetic as well.
Figure 1 The Bow Seat Foundation logo
Figure 2 An image of the popular game, Flappy Bird, in progress
The graphics for my game came out to be the image that can be seen below in the demo. I made an initial sketch for my game. I made an option for the user to choose one of the five given cities, New York, Paris, Delhi, Shanghai, and Tokyo. The goal of the game so far is to save twenty birds in thirty seconds. Afterward, whether the player wins or loses, they are given a fact surrounding air pollution.
I created the game’s background using a program called Inkscape. I learned it was a great program to design vector art that fit into the aesthetic I had in mind.
Figure 3 My initial sketch for my game
Based on Figure 3, my game is split into five scenes. The first scene is the title scene; introduces the game to the player. The second scene is called cities. This is where the player chooses one of five cities. The third scene is where the player gets to play the game. The player is to catch twenty birds in thirty seconds. Afterward, the player reaches the end of the game. This scene is split into two based on whether the player wins or loses. Regardless of whether the player wins or loses, a fun fact is displayed for them to read and sound effects will play. Each scene was easily made using p5.Scene Manager. It made the process of creating the game much easier compared to the initial way I approached coding the game manually.
As proceeded to code my game into fruition, I realized, I did not include instructions on how to play, creating the Title and Cities scene (Video 1). My initial plan was to include it under each individual city sketch, but I realized it would be easier to show it once, so I included the instructions as an additional scene (Video 2).
Moreover, in Video 2, getting to the end, I was able to add a scoreboard, timer, and the moving truck used to catch the birds as they fall. The birds that went across the screen are from the title screen were eventually removed and left the truck movement on the title screen.
First and foremost, I tried working under one city to make coding easier. Once, I was able to get it working for one, I can get it working for the rest. With this in mind, the next step was adding the birds, the air pollutants, and collision recognition were next on the list. This was my greatest challenge, especially since some parts of the p5.play library and examples did not have many helpful examples. The air pollutants I drew in Procreate and named them based on some of the components forming air pollution. The bird animation I found on Google was perfect because of its pixelated design and fit the aesthetic of the game. Initially, I made a for loop to create a group of birds but did not know how to go about checking to see if there was an overlap between the bird and the pollutants and the bird and the truck. Here, my professor helped in writing this part of the code. A group was created in the form of an array and the sprite was added to the array. This way, the array can be used in a for loop and each bird can be individually checked.
If the bird and air pollutants overlapped each other, then the bird y-position increased and its velocity in the y-direction depended on the JSON API data added for each city.
An example of the JSON API can be seen below.
Figure 4 & 5 JSON API
The following videos demonstrate the progress of my work based on my concept and sketch.
The velocity was set to a variable using the map function, so it convert the AQI of the city. Afterward, the next step was the end of the game. I had to display whether the player either won or lost based on their score once the time was up. Displaying the fun fact was a bit of a challenge than I anticipated. The fun facts were stored in an array, and I used a variable, index, and set it to a random integer, but since it was under draw or a function under draw it was collected and modified continuously. I attempted at adding a boolean to prevent it from continuing, but to no prevail.
In order to get a stable number, I added a variable to store the number of birds collected. Based on that number, it was divided by 2.75; this allowed for the facts to be displayed.
My last problem was the play again and try again option. As a player, you can successfully click on it, but to transition backward, the previous scene would go onto the next. To solve this dilemma, I have to ‘reset’ the game, so at the end, the score, and time had to be reset to the original numbers, and the group had to be cleared and sprites’ visibility from true to false and vice versa.
In the end, the game finally came out smooth and nice. Enjoy the demo of the game at the bottom of this page, right before the references.
Video 1: Shows the initial title and city scene
Video 2: Shows the title, instruction, and cities scene.
Video 3: The group of pollutants and birds were added, but new problems arose, such as the fun fact section, and the previous scene playing in the next.
Video 4: The game fully functions, but the play again button fails to go through.
Video 5: Shows the play again/try again button working, but the air pollutants are not visible while playing again. Also, the number of birds saved is displayed here to help keep track.
FALLING BIRD DEMO
Sketch Link: https://editor.p5js.org/aatlove/full/GdH0QIqIO
References
“Ambient (Outdoor) Air Pollution.” World Health Organization, World Health Organization, https://www.who.int/news-room/fact-sheets/detail/ambient-(outdoor)-air-quality-and-health.
Pedercini , Paolo. p5.Play. https://molleindustria.github.io/p5.play/.
Purohit, Bhumi. “10 Facts about Air Pollution.” Smart Air, 15 Dec. 2020, https://smartairfilters.com/en/blog/10-facts-about-air-pollution/.
Veteanu, Marian. p5.SceneManager.https://github.com/mveteanu/p5.SceneManager
The World Air Quality Index project. “Chất Lượng Không Khí Trên Toàn Thế Giới: AirNet Sensor Network.” Aqicn.org, https://aqicn.org/api/.
Images:
Final Sketches:
