Josh Farnaby - UI Designer
Coat
Summary
As a part of our second year group module Journeyman, we were tasked with making a vertical slice of a game. This game had to be themed around our take on a sequel to the indie game Tunic. As a team, we decided to go with a dark and gothic inspired sequel named Coat with the main protagonist being a owl instead of Tunic's fox.
Roles
UI Designer and Block Out UI Artist.
Team Size
19
Project Type
University module.
Software
Unreal Engine 5, Microsoft Office Suite, Microsoft Visio and Adobe Photoshop.
Duration
22 January 2024
7 May 2024
-
Skills
Team communication, UI design, UI animation, block out UI art, UI art implementation and UI visual scripting.
Main Responsibilities
Challenges
- The first big challenge of this project was trying to keep everything organized while working with a team of 19 people with stuff like communication.
The next challenge I faced would be working on more detailed UI art for the first time.
One final challenge I would face would be in keeping my small UI team organized with tasks as well as doing my own tasks alongside this.
Development Part 1
- I first started by researching Tunic and what made its UI good, finding that its UI used shading for a 3D effect. I then began coming up with some ideas for game concepts including a Si-Fi focused style Tunic, with the player venturing deep into the depths of an ancient ruin.
Once in teams, I started contacted each team member and invited them into a Discord group so that we could start communicating, helping to combat the issue of communicating in a large team. In our first in-person we decided on a gothic Tunic, with a faster combat like what Bloodborne was to Dark Souls.
To continue, I worked with my design lead and one of the level designers to put together an asset list, focusing on the design sections. In addition, I made a couple sketches of different UI with the main idea being to take what Tunic well and sharpen it while also making it flow more efficiently.
Development Part 2
- Furthermore, I made digital layouts of the sketches in Photoshop. I did this sooner in production to allow our UI programmer to be able to develop the core functionality sooner.
To continue, I began working on an in-engine blockout of the UI layouts using Unreal Engine 5’s widget system. This was also when I started working more closely with my UI programmer, taking the form of communicating over what they needed from the blockout to make implementation easier.
Development Part 3
- In addition, I began working on the user flow diagram to plot out a path through the UI. To reduce the number of clicks, I turned the options menu into a 1-page menu.
To continue, I began making some blockout UI art to be used by our UI artist as a basis. To make this easier, I first sketched the art on paper before creating it in Photoshop. I then made a spreadsheet to keep track of what asset had been made at any given point.
Furthermore, I animated a few UI elements to aid in game feel and to make the UI feel smoother. During the final polish stage, I worked to polish some functionality of the UI with my UI programmer. This taking the form of bug fixing common UI's controller navigation. In a change of pace, I ended up designing one of the puzzles with the aid of my team lead, concluding the project.
Reflection
Most Proud of:
One part I was proud was my ability to learn on the fly when it came to making the UI art blockouts as well as picking up common UI plugin in Unreal Engine 5.
Another part I was proud of was the overall feel of the UI in general. In particular I'm proud of my UI animations, especially the main menu startup animation, as seen above.
One final part I'm proud of is the organizational documentation I made in the form of the asset lists I made across the project as well a making the Discord to help facilitate team communication.
Any Important Skills?
UI design,
UI animation,
UI art implementation,
Team communication,
UI visual scripting and
Block out UI art.
Any Changes?
The first improvement I would make would be to make the lock on animation loop a little better my having the animation end exactly where it started.
Another improvement I would make would be to fix a bug whereby the "New Game" button had to be moved higher up than the rest for navigation to work. I would do this to allow for better consistency across those main menu buttons.
One last improvement would be to make it so the the "Continue" button would be able to load up a previously created save I instead of doing the same thing as the"New Game" button to make it function the way people would initially think it would function.
Final Product
Credits
The game Tunic was developed by The Tunic Team and published by Finji.
The video was edited our team lead and design lead