Over the last few months, I have been racking my brain trying to find a way to convey my personality to someone viewing my website for the first time. While experimenting with the Godot game engine, I kept coming back to the idea of making an interactive “About Me” section.

Inspiration

Multiple choice quiz games are so ingrained in my mind, so I had no one standout example that I pulled from. Most quiz games share a couple of key components: questions, answers, points, and a timer. 

Holding attention is critical these days, so I made sure to keep the quiz brief. I limited it to 10 questions with a tracker to show the player how many questions are left in the quiz.

In addition to the basic quiz elements, I also took inspiration from the use of character dialog boxes in visual novels and RPGs. I wanted the character of Mozz to deliver the questions to the player in a humorous way.

The pencil hits the paper

Like most projects, I started with some sketches to get my ideas out quickly.

I keep a living roadmap for my projects

I like to lay out my ideas in a Google Doc so I can have a road map of objectives to work towards and cross off as I go along. As I work on a project, I add and remove things. Below are my initial raw thoughts going into the project.

START MUTED
Welcome to MazzarellaDesign.Com
Explain.
Unmute for the full experience
This experience is about 2 minutes long
Title Screen
Have mozz ball talking on it, maybe? Small on top with random text in a box
Start the quiz
About me section
Skip to portfolio (lame)

Mozz ball talks to you

First question
Make Timer function
Stop the player from answering before the question is asked.

Make the quiz part function

Add talking to the separate audio bus
Animate the face growing, shrinking, and rotating to the audio
Have text scroll in

End Screen
Show total score
Proceed to portfolio
Swipe Left

Version control using GitHub

For this project and all of my game projects, I use GitHub to track all the updates I make. I want to make sure that I have ample backups and working branches in case of any accidents! It’s also satisfying to see all the changes the project has undergone during its development. (I am guilty of sometimes writing “various changes” in my commits, but I try not to make it a habit!)

Mockups and in-game testing

I am still learning how to use the Godot engine. This was the first project I created that uses a bunch of UI elements. I watched many YouTube tutorials and slowly learned how things worked. I basically ended up learning, prototyping, and creating the final UI all in Godot!

Title screen trouble

During initial testing, my idea was to have the landing page of my website be the game itself (on desktop only). The site visitor could play the game or skip to my portfolio. While it worked, it raised several usability concerns. Instead, I embedded the quiz in an Iframe on my landing page. These led to two very different title screen designs.

I also originally had a pause feature that could be used to “quit” back to my portfolio screen at anytime. But now it’s possible to do that by clicking away. So in the end, the feature got axed.