✍ FP1: Final Project -- Prototype Ver.
Overview and Usage
The core functionality of this project was to create the prototype 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).
Boba Run Game Prototype
Play the game here. The code can be found in this github repository called "cookie-run-prototype". 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 "cookie-run-prototype" to host the project.
Then, I cloned the new repository to my computer using my terminal.
Firebase Setup
2. Setup Firebase.
After my new repo was created and cloned, I setup firebase as I would hopefully be using this to store user high scores for my game.
Firebase Dev Server
3. Setup Dev Server.
Once my firebase project was setup, I added Cloud Firestore database to my project (to store information in the database). Then,
to make sure it was working, I opened up the dev server.
Firebase Auth
4. Setup Firebase Auth.
Something that I wanted to implement was allow users to login with their Google accounts (or also play and store their scores anonymously), so I had to implement Auth.
Firebase Auth Working Successfully!
5. Firebase Auth in Local Server.
To make sure the Firebase authentication was working successfully, I opened my local server to check.
The local server showed the chitchat messages, which meant it was working successfully!
Game Sketch on p5.js Web Editor
6. Create Game Sketch on Web Editor.
Since my firebase authentication and database was working, I then moved on to coding my game. To do this, I opened a new sketch on the p5.js Web Editor to start on my game.
I used the Web Editor as it has an embedded canvas so I could quickly iterate on my sketch and see changes
without needing to refresh the page.
To code my cookie-run game, I started basic by using sprites to act as the 'game player' and 'obstacles'.
Game in Local Dev Server
7. Open Game in Local Dev Server.
Once I was happy with how my game looked and worked, I moved my code over to my repo folder and ran my game site using the local server.
Issue Deep-Dive
Issue: Layout and Centering
One issue that I ran into was that I wanted my game screen to be centered on the page, but it was only stuck to the top left corner of the page.
Game Screen was not centered on page
By doing a search online, I found flexbox is a good way to center body content on a page using css as it allows collections of items to be laid out in one direction or another. Specifically for my game screen, I wanted it to be centered in the center of the page, which I was able to use flexbox to do.
Functioning Game with Game Screen in Center
Project Scope
Now that I have completed my prototype, I feel like my project scope may need to be narrowed down as I do not know if I have enough time to successfully implement Firebase within the time frame of the rest of the quarter. Although I had set up Firebase, I have not yet linked my game to Firebase, so I am not sure if I can accomplish this task by the time the final is due - firebase to store high scores and user authentication may be one feature I need to remove from my anticipated final project due to timing constraints. However, I may be able to add additional features of increasing game difficulty, changing game characters, and adding background music to enhance the experience of my game.
Time Management
The amount of time I spent building my prototype was much more than my initial plan.
This is because I spent a lot of my time figuring out how Firebase worked (this was one anticipated roadblock as I had to read through their
documentation and look through the in-class activity again). Additionally, since I did not use the p5.play library for MP3,
I had to look through their documentation to understand how to use sprites for my game.
One unanticipated roadblock was the complicity involved in using vite as a build tool versus what we had used with rollup for MP3.
I tried out using vite at first, but found rollup to be easier to work with as I had used it previously for MP3.
Implementation Plan
For my final version, I feel like I am slightly simplifying my implementation plan for my game now that I have completed my prototype. For my implementation plan for the final version, I plan to shift away from Firebase and focus more on implementing game features from my stretch goals (increasing level difficulty, adding sound, new characters, etc.). Given the time left until the final version is due, if I have time I will attempt to make Firebase work to score users' high scores. This has changed because I want to manage my time effectively to ensure I make something I am happy with as well as ensure I can make something within my coding capabilities.
Ideas & Future Work
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
- Have a way to for users to choose the game difficulty through pressing a key on the keyboard
Kudos
Kudos to these helpful online resources! And special thanks to Hannah, Raina, and other peers as well :)