Tech/UI Designer

Introduction

Studio: Rubber Ducky Studio

Personal Role: Technical Designer (primarily UI)

Team Size: 17 members

Development Time: January 2021 - April 2021

Description: Defend the nobility of a grim and hostile land in this darkly fantastical game built to teach real network security protocols! Use your ability to see an Agent's secret information and your own intuition to spot the hidden enemies, and configure defenses around the map to destroy them before they threaten your noble charges.

Overview and Media

Final Presentation Demo

Agents of the Crown was made as part of the Florida Interactive Entertainment Academy's Gamelab program, where students team up with subject matter experts in various fields to produce games for a cause. My team, Rubber Ducky Studio, paired up with the United States Air Force Cybersecurity division to produce Agents as a tool to teach new recruits the basics of network security.

As the team's technical designer, I was in charge of building the systems that allowed the player to interact with the world. This included creating the heads up display, setting up the camera controls, and developing a console interface that lets the player issue commands, receive feedback, and obtain critical information.

Building the User Interface

I worked closely with a UI artist to acquire art that matched the theme of our game while remaining functional. One of the first pieces of art created was for what would become the Console.

The art style of this first piece was spot on, but it would need some adjustment to work in game. If the scroll was always at full size, it would take up too much room on the screen. There was also the matter of needing to record the player's text inputs as they were typed in realtime.

Scroll Animation

I made multiple modifications to create the final version of the console scroll.

The original image was broken up into three separate pieces.
Animating the pieces allowed the console to have an inactive and active state.
A text input box was added to the scroll foot, which would output the text onto the scroll body.

Pause Button and Events

The UI also needed to provide feedback for important gameplay actions, such as taking damage and pausing the game. We knew early on that letting the player pause the game at any time to think was important to the design, so it was made a priority to implement.

I made the pause button easily freeze and unfreeze the game and display changes to the button by using Unity events. An event on the pause manager object controlled the button's state, meaning that not only can the player click the button to toggle its state, but outside actions could pause the game and be reflected on the button icon, with no need to call any UI directly.

This technique was used several times to make easy-to-implement UI. Nobody had to call on the UI scripts to modify the elements on screen, they simply had to modify the related values and the event would modify the UI automatically. For example, the health bar updates when the health manager receives a modify health call.

Interfacing with the Game

While I assembled the UI and related systems, the team's programmers were hard at work putting together the gameplay systems that made everything functional. One of the key points we needed to implement based on our discussions with the Air Force contacts was to place firewalls on the map and interact with them.

A command system was made to do exactly that, but it needed to link with the console to work properly. I cooperated with the programmers to design the console script as an API, to take player inputs, output results to the console log, and execute the commands in game.

I typed 'ip access-list standard 1' to start configuring firewall 1.
I type 'deny 111.213.222.14' to make it block the source IP seen on the left.
I type 'show access-list 1' to display what conditions are set on the firewall now.

A way to display all of the information to identify potential threats and block them was also needed. The results of that are shown on the left side of the above image. All of the relevant data was stored as a packet on the walking agents.

I designed a script to pass that information to the display UI when an agent was clicked on. Through iteration, I developed a lock feature to prevent focus from being lost if the player clicked away, added a scroll bar in case of overflow text, and set the display to clear if the tracked agent was removed from the map.

Agent Destination Tracker

Another useful value included in the packet was the agent's immediate destination. I used this to create a spatial element that showed where the agent was headed to next, updated automatically as the agent's destination changed, and disappeared when the agent left the map.

Final Thoughts

As a technical designer, I see myself as the intersecting point between art, programming, and pure design. UI Development was an excellent way to bring those myriad disciplines together and create the interface that links the player to the game.

I developed a number of skills largely pertaining to UI by working on this project:

Writing code as an API to easily communicate with other programmers.
Using events to better encapsulate code.
Utilizing Unity's UI suite to create complex UI elements, and ensure they scale properly across multiple resolutions.
Communicating with artists to ensure that art assets meet style and technical requirements, and occasionally modifying them personally to accomplish goals.

The overall reception to Agents of the Crown was very positive. The U.S. Air Force Cybersecurity Division loved the final product, and plan on developing it into a tool for teaching new recruits.