FP1: Final Project Prototype

Click here to view my game!

Overview and Usage

The core functionality of my project is to create a 2D endless runner using p5.play with a login flow that uses Firebase authentication. If you hit an obstacle then the game is over. Here is a link to the GitHub repository where the code for my game is hosted: https://github.com/yumingt/quatrun

Here is a gif of my prototype:

GIF of Firebase Google login flow before playing 2D endless runner game

Development Process

Here are the steps that outline my process for this project:

  1. Create Firebase project
  2. Add Firebase configuration into p5 code
  3. Debug various module and environment errors
  4. Style the login page with CSS. Here is a screenshot of my login page in an unfinished state before adding styles:
  5. Login screen with basic styles
  6. Deploy game on Github pages
  7. Do the writeup

Issue Deep-Dive

An issue that I encountered was that I encountered many errors saying that I could not use import or export statements because my Firebase modules were not defined.

I resolved this problem by using babel to translate my packages and modules into something that Node.js could understand which allowed my Firebase functionalities to work properly.

This fix taught me that I should always check to make sure that my packages and modules are compatible with my server environments.

Project Scope

Now that I have completed my prototype, my project scope has narrowed because I realized that I probably won't have time to complete my reach goals, so will be removing the coin collection feature. I also did not have time to implement the replay button since I wanted to tackle the biggesst unknown first which was Firebase. However, I believe I will still be able to complete my Firebase high score tracking feature and build a physical controller to use p5.serialserver. If I have time I will also implement smaller features such as adding a replay button and adding BGM.

Time Management

The amount of time I spent building my prototype took much longer than my initial plan. There were there many unanticipated setbacks where I would spend a day trying to fix a bug which would end up breaking my code and I would have to start over.

Implementation Plan:

My implementation plan for my final version was cut down in scope now that I have completed my prototype? This has changed because I realize that more unanticipated setbacks may occur which will lessen the time I will have to implement the features that I initially wanted to add.

Here is my updated plan:

  1. March 10th - Add high score tracking feature
  2. March 12th - Set up controller
  3. March 13th - Add BGM, sound effects, and replay button (if time)
  4. March 15th - Finish final version, work on portfolio
  5. March 17th - Finish FP2 final portfolio

Ideas and Future:

  • Add Firebase functionality to save high scores
  • Add replay button
  • Use p5.serialserver to connect game with a physical controller
  • Add sound effects and BGM
  • Kudos

    Thank you to Anderson J Shaw for helping me debug my code as always.