Menu Design
Integration
Style Guide Requirements
Strategy
For ease of use and scalability, all interactable menu elements use the same two widgets: Foreground & Background
Foreground handles: Focus Anim FX, SFX, Input Detection, Hitbox, UI Input Action Icon
Background handles: Background Colour, Focus Resize Calculation, Dropshadow
For each interactable item, all the artist needs to do is add the foreground and background widgets, connect their properties together, and then sandwich the specific art of the element between them.
All options that are not the same for every element (default size, whether the focus FX animates, which SFX plays on press, etc.) are held as custom properties which artists can change on a per-instance basis.
Art - Realism
Rainbow 6 Siege - Elite Skin Badges
Blender
Art - Vector
Rainbow 6 Siege - Operator Icons
XDefiant - Badges
When I was brought into the badge feature for XDefiant, it had already been delayed 2 seasons due to there not being a solution to solve the art demand of the feature in an efficient way.
The feature (a hidden achievement system which rewards “badges” that the player can display on their profile) would demand art for 60-100 new badges per season, so my first goal was to propose systems in which a series of photoshop treatments could be applied quickly to any vector art. I developed such systems for a variety of real-world collectable item styles, using the Nasa logo as a test.
In the end, it was decided that our badges would be upgradable stickers. The base art was made as vectors for scalability and future merchandising potential, to which a series of photoshop layers could be applied in less than 5 minutes per badge to denote rarity (gold, holographic, worn).
First Test Proposals
Sticker Rarity Processing
Vector Files
Animation Proposals
Final Art
Art - Pixel
Season’s Turning - Solo Indie Project
Design Direction
XDefiant Playercards
The Playercard feature for XDefiant spanned across four studios (San Francisco, Osaka, Sydney, and North Carolina). I was in charge of coordinating these four studios, documenting the progress of the cards, planning the card design, communicating that design with the studio in charge of making the cards, and facilitating a months long feedback loop to ensure the cards’ quality.
Grim Scythe Moodboard
Grim Scythe Final
Molten Moodboard
Molten Final
Papercraft Spring Moodboard
Papercraft Spring Final
Super Villain Moodboard
Super Villain Final
Shaders & Particle Generators
Colour Replacement Shader
This shader compares 2x16px greyscale texture against one of many 2x16px colour gradient textures in order to allow the player to customize the colours of their character, clothing, and any furniture they place.
The art for the character and furniture is drawn in greyscale. Then, the shader pinpoints the x location of a specific grey colour within the greyscale texture, and then replaces it with the colour found at the same position within the coloured gradient.
Reflection Shader
A 2D Top-Down Shader that reflects the rendered world of the game.
Usually, these types of shaders are used in side-scrolling games, where they occupy the bottom half of the screen. As the shader reflects the contents above it, a problem occurs when it reaches the top of the screen in a top-down game (there is no game rendered above the top of the screen). To work around this, I have the shader gradually transition between displaying the reflection, and displaying the game’s sky, based on its y position.
Additionally, the shader is built completely independent of any parent node. It can be placed anywhere in any scene and will behave the same. There is also a setting to allow the shader to always reflect, or only reflect when it’s raining, allowing for puddles in the game.
Weather Particles
Particle generators are used with a variety of settings to create all weather effects in the game:
Leaves and petals read from a flipbook animation texture.
Wind effects the direction of rain particles (added after this video, but I’m happy to demonstrate).
Snow is made by multiple generators dynamically moving off screen in the direction the player is facing, so that it will not run out if the players travels in a straight line, despite its slow fall speed.
Fog is generated in a ring around the player and moves slowly away from its generation position, giving the illusion that the player’s movement dispels it.
Data-Driven Dynamic Tooltips
All tooltips are one widget, which dynamically changes its contents and spacing given a single itemID. The itemID links to a series of connected json databases, which hold all information about the item. The tooltip generates instantly, and has no trouble adjusting for localization.
Style Variety
Thank You !
~ Krystal
