Overview and Usage

The core functionality of this project was to create the final version for my final project. Since I really enjoyed creating a game for MP3, I chose to create a new game: Boba Run (similar to Cookie Run and Google's dino run game pictured below). Play Boba Run here!

Cookie Run Game

Google's Dino Run Game

Boba Run Game

The code can be found in this github repository called "boba-run". The repo can be cloned to your own device -- note, you will need to install libraries, run a local development server, bundle the code, and deploy the app on your own device.

Development Process

New Github Repo

1. Create New Repo.

To start, I created a new public Github repository called "boba-run" to host the project. Then, I cloned the new repo to my computer using my terminal.

Code copied from FP1

2. Copy over code from FP1.

Once my new "boba-run" repository was cloned to my computer, I copied over all my code from my FP1 prototype (from cookie-run-prototype repo) into my new repo.

Game Sketch in p5.js Web Editor

3. Edit Game Sketch in p5 Web Editor.

I then went back to the p5 Web Editor to make edits to my game based on feedback from the class demo. Here are some of the implementations I made to add to my prototype version:

added background game music
added a way to let users change game characters
added a ceiling to prevent the character sprite from jumping off screen
added collectable boba (like coins in PacMan) to add to the game score
added animation to the character sprites to make them non-static

Game Final Ver

4. Build and Deploy Game.

Once I was happy with how my game looked and worked, I moved my code over to my repo folder and built and deployed my site using the dev toolchain.

Issue Deep-Dive

Issue: Sprite Animation

One issue that I ran into was that I wanted animate my game sprites as they were showing only as static images in the game. I had set the sprite image to a url path to a gif image file. In the p5 web editor, they were animated, but once my game was deployed, the sprites were static.

Static Sprite :(

By doing a search online, I found a github issues page that explained why gifs do not show as animated. This has something to do with the frame rate that the canvas is drawn, which makes animated gif files only display as static images that do not move.

A workaround around this issue was to use the sprite animation function, specifically the Sprite Sheets with Multiple Animations page. I took each frame from my gif file and positioned them next to each other in a single image to create a sprite sheet (pictured). I then uploaded the sprite sheet into the web editor to see the animation changes in real time. Once loaded, I used the addAnis function to encode animation names as keys and sprite sheet atlases as values.

Sprite Sheet

At first, I had a bit of difficulty getting the proportions and spacings of the sprites in the sprite sheet to make the animations show smoothly without being cut off as I was unfamiliar with the animation function. The documentation mentioned using same-size frames for the animation and putting them in order from left to right. Once I did this, my character sprite animations turned out perfectly without me needing to manually specify the position of every consequent frame.

Functioning Game with Animated Character Sprites

Ideas & Future Work

From my project proposal, I was able to accomplish some of my stretch goals including:

Implementing background music for the game
Allow users to change game characters
Increase game difficulty as time passes (as the duration of the game increases, the speed of the obstacles subsequently increase as well)

An unanticipated setback was the amount of time I used to implement the sprites (specifically getting the animations to work). Due to time constraints, I was unable to accomplish getting Firebase implemented to keep track of user high scores for my game. This is something I would like to continue to work on if I were to have more time working on my project.

Here are some additional ideas and features I would like to add to my game in the future!

Get firebase implemented to effectively allow users to login and store their high scores
Add more variety in the game characters
Right now, I only have 2 so it would be fun to add a whole library of characters to pick from.
Have a way to for users to choose the game difficulty through pressing a key on the keyboard
Implement a way for the game to work on mobile devices through tap mechanism
Allow users to mute/unmute the background music
The sound is currently defaulted to autoplay, so I tried out my game in different browsers and it worked in Safari, but not Chrome.
There's a Chrome autoplay policy, which prevents the music from playing until the user has interacted with the domain.
Add in a more 'endless' component by allowing the user to collect and item and add a life

Kudos

Kudos to these helpful online resources! And special thanks to Hannah, Raina, and other peers as well :)