Design Process - Feedback

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, so I could figure out what feedback I needed to create.

Flame Spirit Health Feedback

Size

The flame spirit loses health when they're hit by water. To show its health to the player I have a couple different feedback events happening. Because the flame is getting hit by water I have it shrinking as the health decreases. 

Face

The flame's face also reacts as it dies. His eyes go downward and his mouth turns to a frown. 

Light

These are small changes that might be misses, so to really sell the point I also have the light emitting from the flame change colors and fade. 

Combined

HUD Feedback

Together the feedback is able to convey that the flame is loosing 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.

Feedback with HUD

Other Necessary Feedback

The flame spirit has more to show than just it's 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 actually 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 Feedback

Thought Bubbles - Rain

When the flame gets hit by water a small thought bubble appears to let the player know the flame doesn't like water.

Thought Bubbles - Love

When something happens that 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.

Thought Bubbles - Kindling

If the flame's hungry, low health, or just wants food a thought bubble appears showing kindling. 

Thought Bubbles - 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.

Thought Bubbles - Scared

There are a few times when the flame is scared from 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 show the flame's emotion more. 

 
 
 

Design Process - Menus

Menu Types

Before I could start the menus I needed to know what menus would be needed for the projected. 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 apart of the pause menu wouldn't work. Also if we combined the pause menu with a journal menu things would feel cluttered, and be confusing. The player would have a lot of different things going on in one menu which would feel overwhelming. There are no other mechanics the player has that required a menu, so I had 3 required menus to develop for the project.

Main Menu

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

A big aspect to this game is the umbrella mechanic. The player uses it to traverse through levels and also protect the Flame Spirit. Because of that I wanted to take the umbrella and 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 are 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 and it so it feels balanced.

Journal Menu

The journal menu was probably my most 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 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. 

 
  • LinkedIn - Black Circle
  • Twitter - Black Circle