Information

Swordfish Space Systems
Development Time: 1 Month
IDE: Visual Studio 2013
Inspired By: Titanfall 2 UI, Cowboy Bebop
Tutorials/Sources: 3D Buzz
Art Assets created by: @amandasaenz & me
Overall Goal: Implement a TitanFall 2 Titan UI
Description: I will be building an interface to my own titan. I was inspired by the Titanfall 2 in game Titan UI. The background of the UI will be from Cowboy Bebop. The Swordfish II was the beginning of the Swordfish Space Systems. An astro and software engineering team then waited years later to create a new titan called, SwordFish Titan II.
The interface will incorporate 3D objects (created in Maya) , Pivots, Panels, Anchors, C# Scripting, AudioSources (soundclips) , and relying heavily on Unity's animation system. It will be in 3D and the attempt will be to make it as close to the TitanFall 2 implemenation but in my own style. I assume that Respawn uses scaleform with as3 for their user interface programming but since I am not able to obtain the middleware, I will implement it in my own way.


Overview of Implementation:
Photoshop Art Asset Creation
Unity Animation System (Controlling via script and Inspector)
UX Design -> UI Implmentation
Unity C# Scripting for Photoshop layer manipulation
Pivots & Anchors
Manipulating 3D Objects and intertwining 2D animations
Balsamic Wire Frame tool
Syncing audioclips with UI modules for full immersion

UX Design

Concept WireFrame Iteration #1

First concept of the interface. A mix between the TitanFall 2 and Cowboy Bebop's Swordfish II. The wireframe was crated in Balsamic Mockups.

Concept WireFrame Iteration #2

The concept is a pilot entering a titan esque machine / gundam type. The joysticks and machine dash at the bottom. The right/left hand red bars are the panels of the machine with wiring coming down to the panels. The four panels in front are mimicing the front end system/dash/monologue showing the world the pilot is traveling in.

UI Tour

The U.I. is built around 3D objects created in Maya.

Engineering

These are the individual UI modules built in photoshop as layers. They are then manipulated with C# within Unity.

UI Module TopRight in C#

The art is built in photoshop layer by layer then imported into Unity as single images. They are converted into Sprite2D and then added to the scene but to an empty gameobject inside a panel. This is because we will be performing 3D rotations to a unevenly scaled image. This will prevent the image being skewed while applying the C# manipulation.

UI Module BottomRight in C#

Making the interface feel alive and more so immersing the client.

UI Module BottomLeft in C# (CrossHairs)

The photoshop image was built into layers then later manipulated using C#. The button and test module's are controlled via C# script with Couroutines.

UI Module TopLeft in C#

More crosshairs manipulation.