Game asset - Icon compression
Description
My goal was to create an asset that I could use for a personal project; I wanted to optimize the system as much as possible and push my experimentation as far as I could. So I focused my research on four areas:
Sprite Atlas
Channel Packing (RGBA)
SDF
Automatic rescale
Project Breakdown
Created using Unreal Engine 5
Focusing on optimization and reusability
Design technics
Sprite Atlas
My first optimization step was to limit the number of asset calls. In fact, if everything is contained in a single texture, by manipulating the UVs I can slice up my texture as in this example, where I created a 3x4 grid, but I can adjust the grid as I want.
Once my texture is divided, I use an index to modify the UVs so that my index corresponds to the texture I want to display. Being able to change the icon based on an index allows me to update the icon in a widget using an enum, for example, which makes it easier for someone else to use as long as the texture and the list are consistent.
Channel Packing
I use Channel Packing to compress the texture. On each "case" there are 4 icons respectively on each Channel RGBA (Red, Green, Blue and Alpha). Blend Options on Photoshop let me use the RGB channels, but for the Alpha I had to create an Alpha Mask Channel and export all the texture as a .tga component to keep the Alpha mask.
I can import the .tga texture directly in Unreal Engine and use it on a User Interface Material.
SDF
Now everythings gonna be blurry but it's gonna be fine. To create SDF (Signed Distance Field), I made a gradient stroke around my icons. In Unreal Engine, I can step the gradient stroke to keep a certain quality in the asset and I can also use it to define an automatic et modular stroke in Material.
Automatic rescale
The icon doesn't stretch because it's automatically scaled.
I used this system several times in projects. 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.
