Narrative over a specific time within a specific space

In order to showcase a narrative over a specific time within a specific space I have created a story board for how fuel will work in the game and how it is represented to the player through the UI. The story board shows the general loop of the fuel mechanic, starting with the fuel being full and draining at different speeds depending on the players actions, and ending with the player’s fuel getting low and being refilled back to 100% after using a fuel cannister bought from the item shop. This is the basic loop that will repeat over and over again throughout the game. I decided to represent the fuel and health as circles in the UI as I felt it looked clean and had a little more personality than if they were just vertical bars. The circles also utilize Edward Tufte’s theory of colour as discussed in the first post. When full the circle will be green however as it drains it will slowly turn yellow, then to orange and then finally red at around the 25% mark. I will be using a colour gradient to ensure a smooth transition of colours rather than it just instantly changing colours once it reaches a certain point.