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.mp4

Prioritizing

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.mp4

The 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.mp4

A 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.mp4

The 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.

Google Sites

Report abuse