Once Upon a Flame
Overview
Once Upon a Flame is a 2D Puzzle Platformer developed in Unity where you play as a tiny elf. The player has a flame companion they must protect from the rain with their umbrella, while also solving spatial puzzles.
Gameplay Trailer
01 - Once Upon A Flame_Trailer.mp4Prioritizing
The first step in this project was to figure out what needed feedback in the game. We knew what our mechanics were and how the flame spirit was going to react to gameplay, so I could figure out what feedback I needed to create to ensure the player understood what was happening. The flame spirit only has a few features I could use to message what needed to happen.
Flame Elements
Flame Spirit Health
The flame spirit loses health when they're hit by water. To show its health to the player I have a couple of different feedback events happening.
Size
Because the flame is getting hit by water I have it shrinking as the health decreases.
Expression
The flame's face also reacts as it dies. At key health intervals his eyes go down and his mouth turns to a frown.
Combined
Light
These are small changes that might be missed, so to really sell the point I also have the light emitting from the flame change colors and fade.
HUD Feedback
Together the feedback is able to convey that the flame is losing health, but some of the small details can get a little hard to read with how small the flame spirit is. Also, if the flame is ever away from the player the player wouldn't have anything telling them the current state of the flame. To help mitigate these issues I added the flame to the HUD. It reacts the same way as the flame, except it doesn't shrink. That way it is always easy to understand the status of the flame.
Other Necessary Feedback
The flame spirit has more to show than just its health. The player needs to know what the AI is doing or wants so they can properly interact with them. In the story the flame can't speak, so we can't just have a dialogue appear. We needed something else to show the player what to do. What I came up with was to have thought bubbles appear from the flame that shows what they want/need/feel. Each thought bubble has a key event that makes it happen. Some thought bubbles go together, such as the flame might show that they want kindling and when they eat the kindling they show that they love the player with the heart thought.
Flame Spirit Thoughts Messaging/Feedback
Rain
When the flame gets hit by water a small thought bubble appears to let the player know the flame doesn't like water.
Love
When something happens the flame likes a thought bubble with a heart appears. It pops up when the flame is fed and intermittently while they're following the player.
Kindling
If the Flame is hungry, low health, or wants food a thought bubble appears showing kindling which restores them.
Burn
The flame can burn certain items when it has full health. To show when the flame is going to burn something it has a thought bubble with a burn icon.
Scared
There are a few times when the flame is scared of a bird and goes to hide. A thought bubble with a scared face appears when that happens. I chose to do a scared face instead of a bird because I wanted to lean into the flame's emotion more.
Menus
Before I could start the menus, I needed to know what menus would be needed for the project. The class requires us to have both a Main Menu and a Pause Menu. In our second semester, we added a journal collection mechanic, so the player needed to have a way to look at their collected journals. At that point, the Pause Menu was created so having it be a part of the pause menu would take more time than we had. Additionally, if we combined them things could feel cluttered and confusing. There are no other mechanics the player has that required a menu, so I developed 3 distinct menus for this project.
Main Menu
09 - OnceUponAFlame_MainMenu.mp4The game is set to be inside a storybook. The most logical choice for the Main Menu was to be the page of a storybook and have said book open. The transitions are then the page flips between the sub-menus and different scenes. To differentiate going between levels I have the page flip be endless flipping until the scene transitions. Whereas going to the options menu is a single page turn in the book.
Pause Menu
03 - OncceUponAFlame_PauseMenu.mp4A big aspect of this game is the umbrella mechanic. The player uses it to traverse through levels and protect the Flame Spirit. Because of that, I wanted to use it in the Pause Menu. I made the background of the menu the actual umbrella and I put the buttons along the center of it. To show which button is hovered there is a small raindrop animation to the left of it. I had initially thought to left align all the text, so the raindrops lined up, but that didn't fit with the umbrella background. It also felt weird that the text wasn't centered aligned with each other, since you don't always see the raindrops.
A big part of this menu is the animations for when you Pause and Unpause. To fit the theme of the umbrella the menu floats in as if riding a wind current. I spent a lot of time tweaking this animation so it was slow and steady, while not feeling like it was too slow. The unpause animation flips the menu over and blows it off-screen. With the pause animation being so slow and calm I wanted the unpause to almost oppose that. It flies off in the opposite corner from where it came in. This helps both animations feel balanced, as well as not too slow when transitioning to and from gameplay.
Journal Menu
04 - OnceUponAFlame_JournalMenu.mp4The Journal Menu was probably my favorite menu to make. The player can pick up to 12 journal pages in the levels. Some of the pages are impossible to miss others are optional. Our narrative designer wanted a way to show the player's backstory in-game and came up with the idea of the journal pages. In the game, these are supposed to be handwritten by the main character and are simply fluff. I wanted to make this page feel dynamic. The player should be able to view all that they've collected, see how many they're missing, and view the pages in more detail.
Related Blogs
HUD Transitions
April 2020
Darkness Mechanic
April 2020
Revamping Credits
April 2020
Looking Back
April 2020
Looking Back
This project had a lot happening outside of my UX & UI work that made things difficult. If I was to do things again I think I would advocate for a simpler AI system that didn't have so many nuanced interactions that needed to be messaged so we could really focus on one area of the Flame. Having the Kindling increase health and let the flame burn through things was a bit confusing even with the explicit thought bubbles since they were 2 separate interactions tied to a single mechanic.
In terms of the Feedback, I would have liked to utilize saturation to help with the health messaging more. Perhaps even impacting the world around it would make it less necessary to have a HUD indicator. For the Flame's HUD Indicator, I think it would have been better to have a secondary Camera on the Flame and display that in a circle to make it clear it's watching the Flame instead of creating a separate HUD display system. That would help connect it to what is actively happening to the Flame and I could even make it into an off-screen indication which would allow it to also act as a navigation aid. This also would simplify my scripts as I wouldn't need another system for the UI.
Overall since this was a student project looking back there's a lot I would want to change and improve, but I had a lot of fun designing something more whismical that required something different than just a health bar or cooldown meter.