UI

Rubén Sardón Roldán

DESIGN

free html templates

Project overview

Hello there!
I'm Rubén Sardón and I have been one of the 6 designers at Jellybit who worked on Alita Unbreakable Warrior. As a designer, my tasks involved designing, documenting, prototyping, producing and testing. My focus was the User Interface.

Software

Mobirise

Unity 2018

- Prototyping

Mobirise

Visual Studio 2017

- C# Sripting

Mobirise

Google Docs

- Documenting
- Designing UMLs

Concept Discovery

The first task as a designer: playing some RPGs.
My broad playing experience allowed me the advantage of having tons of references I could pick ideas from but there were also some new games I had the chance to discover. Torchlight for example, which I didn’t really enjoy, but it had a great intuitive and clean UI designed for a gameplay that was closer to the game we were aiming for. So, I had to forget about the complex grindy RPGs I loved and stick to our 20min re-playable gameplay.
For this milestone I proposed all 3 sets of different attributes Alita’s combat would be based on and made also a proposal of a slightly complex passive tree design based on Path of Exile.

Schedule

February 17th

Concept Discovery 

Here we go.

March 3rd

Vertical Slice 1 – Prototyping and First Steps 

I was placed in Scrum Alita this milestone and was responsible for managing Alita’s movement and the camera’s follow.
For the prototype, we worked on Unity to showcase the basic systems designed. Alita moved using a navigation mesh and was able to attack enemies. She had life, experience, area attacks skills with different collider meshes and different effects.  
Once the prototype was ready, together with David Valdívia we replicated Alita in our engine.

March 17th

Vertical Slice 2 – First HUD 

After having a raw Alita that could move and attack, I moved to the UI scrum to oversee the production of de stats and passive tree I previously designed. I started implementing a “focus life bar” to know the enemy’s life, a simple HUD with Key Bindings (Inventory and Skill Tree) and a skill bar that showed skill cooldowns.

April 7th

Alpha 1 – 3D World Canvas 

The 3D World Canvas was added to the engine and the first Items could now be dropped, picked and managed in the inventory. The UI sprites were upgraded, and some parts of the HUD had to be reimplemented.

April 25th

Alpha 2 – Floating Labels & Main Menu 

The game now starts at a Main Menu where volume settings could be edit. Attacking and Leveling Up spawned a floating text over the attacked unit showing how much damage Alita was dealing and how much this number changed depending on gear and passive tree nodes allocated.

May 5th

Alpha 3 – Joining Systems 

This milestone focused on finishing joining each UI assets with its listeners.

May 19

Beta – Testing and Polishing 

Finished UI details such as the enemy life bar showing through a black bar the damage dealt to the enemy. We even had a public play testing session.

June 6th

Gold – UI Q&A 

No more asset production or fixing. Just making sure everything worked on all scenes correctly.

Challenges

-

Task Dependencies

UI elements ALL have dependencies. Reciprocal task interdependence required continuous information flow and meetings (so many meetings...). Plus, the UI assets had to work regardless of any other system not doing so. In order to test the features worked correctly I made a virtual Alita through scripting and only had to change which Alita the UI asset had to monitor.

-

Limited Resources

Not only did we just have 4 months to develop a finished game, but we didn't even have the engine we needed; the programmer worked on developing the engine as the game was being produced. This didn't only mean a packed schedule but also we had to work hand to hand with our programmers to reach the milestones. Working together with Julià Mauri to figure out how we would plan the UI production helped us both understand each other and work efficiently as a Team. 

-

Growing Complexity

Our tasks kept getting more and more complex as the engine slowly allowed them. The systems we had working needed to be patched countless times. Having so many systems everywhere in production makes it easy for something to stop working anywhere.

ASSETS PRODUCED

UI 2D

Life & Exp bars
Panel Buttons
Inventory Panel
Item & Skill Tooltip
Debug Window
Skill Cooldowns
Main Menu settings
Remaining enemies/chests panel
Boss Focus Life Bar

UI 3D

Enemy 3D Lifebar
Floating Texts
Item Drop & Pick with 3D Canvas

Post Mortem

Making this game now in perspective has been an amazing journey. Day to day we had to make sure our assets kept working given they depended on other assets. Working together with Julià Mauri made all the difference. For most engine UI Game object Components, I already knew before they were available how they were going to work. I had previously explained every detail I was looking for designing the UI and we had discussed all the ways it could have been implemented. Having this relationship with the programmer in charge of the Engine’s UI allowed us to work fast and efficiently.

Having an in-production engine to work with didn’t make it easy to work. The engine crashing and having to wait around 5min and wait for the engine to load was very frequent and for sure tested everyone’s patience. The more we had to work together, the better the engine worked and the better we worked. At the start we almost had no task conflicts and as the game got bigger, the disagreements and clashes became more frequent. Having survived several crunches together to make ends meet made us feel closer to our colleagues. This proximity and knowing about each other helped with conflict management as we were able to communicate with a more informal approach.

Alita Unbreakable Warrior