Skill Material System
Description
For a project, I worked on UI concept and implementation. I had to create icons for the skills but with it come some constraints: the game will be on PC and Mobile. Because of that I had to optimize as many thing as possible.
my last year at Game Sup, we were challenge to make a custom DLC for the game Jedi Fallen Order. Each Level Designer was responsible to create a new level. We decide to link all the maps together to create a cohesive story. A dedicated team focused on the narrative part weaving all the levels into a seamless experience.
I was in charge of the first part of the last level of the DLC called "The Last Shard". In this level Cal discover a crystal that let him take mind control over an enemy.
Project Breakdown
2 Days
Created using Unreal Engine 5
Focusing on optimization
Tasks:
Concept
Documentation
Blockout
Design technics
Master Widgets
To prevent multiple elements from fulfilling the same functions, I created an empty master widget that contains all the widget's logic, and I use getter functions to retrieve the data like material.
I have overridden the getter functions in the child elements to link all the components together.
Automatic rescale
The icon doesn't stretch because it's automatically scaled.
I used this system several times in this project. I created a custom material function, and as an output, I can choose whether I want to only modify the texture’s overall scale, resize it to fit the U-axis or the V-axis, or have it adapt to the texture.
To do this, I performed a division to obtain the ratio between the screen and the texture, then resized the texture by manipulating the UVs.
Sprite Atlas + Distance Field + Blending
First, I use a sprite atlas to group all the icons into a single texture. This way, the engine only has to load one texture. I divide the texture into rows and columns. This system uses an enumeration, which makes it easy for anyone to implement.
SDF allows me to create an outline mask around the icon and define it dynamically. This also helps me reduce aliasing when resizing the element.
The blending option allows me to group 3 icons per slot. Thanks to this system, I was able to reduce the texture size to less than 280 KB for 16 different icons.
For the color, I applied a gradient in the engine that allows me to choose the color of the skills.
