Agent 8

Diegetic UI and UX

Let's grab attention.

Agent 8 was a three-week solo project with the goal of creating an immersive experience within the bounds of a main menu.

Inspired by film noir and my distracted daydream of jumping into a detective map while watching Brooklyn Nine-Nine, I got to the idea of Agent 8.

About Agent 8

Agent 8 is a solo three-week project of mine, where my main design pillar was "Feeling like a detective". Every design choice was made with the intent to support this pillar by placing and keeping the player immersed in my created detective film noir world and painting this picture.

Project Specs

Engine: Unity 2021.1.10

Duration: 3 weeks

Solo Student Project

Getting Started

Wireframing helps me think about how I want my players to approach the scene.

I start with the basics of giving myself a rule of thirds grid and a fibonacci spiral- which I decided to try and incorporate with the thread lines.

The magenta line shows how I wanted the players eye to move through the scene. I initially wanted to start at the title, but the final iteration will save the title for last.

So how'd we get here?

The final iteration looks different after early testing found buttons too spaced out, objects not being used to their full potential, and ideal animation movements found.

Here's some snap-shot insights into the intention behind my design choices.

Fibonacci Spiral

Thread lines always lead the eye back in, and match with that initial spiral where possible.

Grouping

Buttons are now grouped together, with the credits, options, and quit forming a triangle shape.

Using Motion

Attention is drawn through points of interest by the spotlight- which keeps to the principle of drawing the eye back in.

Highlights remain to make buttons more salient.

Rule of Thirds

Using the rule of thirds, I showcase the title, the play button, and the remaining button options to the player.

Hidden Leading Line

The lamp light source adds extra salience to the play button and creates a invisible line between Agent 8 and Play to lead the eye.

Particle Motion

The smoke motion leads the eye, starting at the cigar and moves up past the buttons, fading as it reaches the title.

Immersive Transitions

Excusing video lag, my goal was to create seamless, immersive transitions that allowed the player to stay in the game while navigating the menu.

What went well

An opportunity to learn

With developing Agent 8, I got to grow my skills within the Unity editor. This focus included tasks such as:

Developing over 30 animations and editing their curves to create smooth transitions
Creating events to trigger during animations to have accurately timed sound effects
Using grid snapping to create a city scape with 3D assets
Implementing 3D sound to create a realistic doppler effect during transitions
Iterating design and layout of elements based on testing

Overcoming my greatest risk

Going into this project my highest risk was the plan to go from looking at a map to transitioning that map into a 3D space. Since I wasn't sure if it would be possible the first thing I did in engine was white box some towers and begin playing with camera transitions and angles. Once I had the proof that it was feasible and within my scope, I began to block out the city using assets.

At first I started with a camera transition driven by code, but I quickly found that I had greater control over the feel of the camera through an animation- allowing me to later past the block out stage to speed it up, duck around the lamp, and slow down for the landing. After comparing the two transitions, I decided to go with camera movements for all transitions in the menu.

A sketch from early in development, from when I was first musing out my plan for how the buildings should first appear as a 2D map but transition to a city scape.

Making time for the little details

My perhaps most anticipated part of the project was the growing list of minor details that I hoped to add. These are the types of things that are easy to cut, but I believe help make a project go from good to great.

Random Ambience
- In addition to the constant ambience such as the hum of the light or the city cars, I was able to incorporate a random chance for 'noir' themed ambience to play. These sounds include things such as: a lighter being clicked, clinking glasses, a chair scraping, a pen writing, boots on wood, and a cocktail being stirred.
A Sequenced Outro
- Originally my block out for quit was the clipboard being drawn up, a quit confirmation, and a fade-out. The sequence of the confidential folder required extra animations, sound effects, asset creation, and additional camera work- followed by a sequence with the lights requiring similar tasks. It was a larger undertaking but the resulting outro was much more satisfying.