Role: UI Artist
Timeframe: 1+ years on the project
Software used: Adobe Illustrator, Photoshop (Concepts/Creation) | In-house UI Editor & Engine (Implementation)
Platforms: PlayStation 4 · Xbox One · PlayStation 5 · Xbox Series X/S · Google Stadia · PC
Project Status: Shipped + DLC Content

The livery editor is a spin-off environment from the garage that allows the player to personalise their vehicle's look through multiple layer options, paint styles and patterns along with wheel rims. In addition to this, the player can also apply various sponsors and decals to each side of the vehicle. These changes can be broken up into 4 different areas/stages. Patterns, Colour/Texture, Sponsors & Decals. Notification icons can be seen in various areas of this flow to indicate to the player there is new content unlocked that they haven't interacted with before.

The editor was designed to try and take up as little space on the screen as possible and put the focus on the changes being seen on the vehicle model itself. This UI is more 'hard-coded' to act a certain way for this feature when compared to the control the UI team had over other screens in the game using the in-house UI Editor. This meant there was a lot more time spent working alongside the code team to make this screen work how I envisioned.

The screen uses a tab-based system (similar to photo mode) which is displayed through the icons at the top left of the screen. Each icon represents the 4 areas mentioned earlier. The first tab consists of a simple list of the different patterns able to be applied, or not, to the current vehicle. The amount shown here changes based on the vehicle selected as well. Next up is the layers tab; the main part of the editor. This is where the player has options to edit various layers of this pattern with colour &/or textures along with the wheel colour. This is broken down into a couple of toggles. These then alter the options below them to show/hide tiles which open the colour or texture select. Upon selecting a texture most of the UI disappears and this is to symbolise that the player is now in edit mode where they can transform and scale this texture to their liking.

The last 2 tabs are somewhat similar to each other and where the player can select different sponsors and decals to apply to the vehicle. Even though these tabs have a similar purpose the layout differs slightly. This change is one to help show the player they are different types of 'decals' with different rules for placing them and also to accommodate the sizing of the 2d assets represented in the UI. With sponsors, this used the rectangular tiles seen on the previous tab to display the currently selected sponsor and open up the sponsor texture select. For normal decals, these tiles are shown as 3 squares. When navigated the viewport of the vehicle changes to help highlight the available area for use. Selecting one of these tiles brings up the decal selection where the player can purchase one for in-game currency. After a selection is made the screen again transitions into edit mode. Upon backing out of this area of the game the player can choose to save their livery, go back to editing or discard it.