Using Mirrored 9-Sliced Images

In my previous post I’ve discussed the benefits of using 9 sliced images in Unity UI, including improved visual quality and optimized memory usage and disk space. 9 slicing is widely used in all kinds of games but there is an extra step you can take to further optimize this method.

Mirrored 9 Sliced Images

You may have already optimized your UI using 9 sliced images but you may further decrease disk and memory size by half (or event quarter in some cases) simply by using mirrored images. This technique also requires some collaboration from your graphic designer too as your UI should be compatible with it (by using mirrorable elements). You don’t need to make every element mirrorable it only works on mirrorable images.

Horizontable mirrorable image on the left transformed to middle and right one, saving half its size

Both horizontal and vertical mirrorable image, reduced to quarter size

But before starting, I must warn that this technique requires a somewhat weird workaround (a very simple one) to work due to a bug (I assume) in how Unity implemented their slicing in images. This process was necessary to use mirrored sprites on sliced images as of Unity 2021.3 version (it may or will be fixed in the future, hopefully).

Starting Simple (Horizontally Mirrored Images)

To keep things simple I will first show to implement horizontally mirrored sliced images and will then show double mirrored ones. Open your sprite’s import settings on Inspector window, set Mesh Type to Full Rect (like any other 9 sliced sprite), set Warp Mode to Per-Axis, U Axis to Mirror and V Axis to Repeat.

Import settings for horizontal mirrored sprite

This is where the workarounds start. Open up the sprite editor and start defining borders for slicing image. But instead of placing them at the visually correct place (right edge in my example), place them where they’ll be after being mirrored (at the center). The visuals below explain how they’ll be positioned.

Wrong slicing on the left side and right slicing on the right side

Next step is creating the material to support mirroring. Simply create a new material with the shader you would normally use in your UI (in our case this was UI/Unlit/Transparent) and set its tiling X to 2. Finally create a sliced image in your UI, set scale X of Rect Transform to 2 and assign the material you created to the Image’s material slot.

Horizontal Mirror material settings on left and GameObject settings on right

After applying all these workarounds you will hopefully have a horizontally mirrored 9 sliced image working.

Double Mirrored Images

Process for double (mirrored both horizontally and vertically) mirrored images are very similar and it only differs on specifying the borders and using Y scale on both Material and Rect Transform as 2 in addition to X. If you apply the settings on images below, you’ll have no trouble implementing it.

Import settings and sprite editor for double mirrored

Material and GameObject settings for double mirrored

Drawbacks

While this is very advantageous in every aspect technically, there are a few drawbacks that comes from using scales to manage mirroring. First off when using mirrored images with simple ones in the same parent, mirrored images behave differently because of their scales. If you’re using them with stretch anchors they go beyond their parents.

Most of the drawbacks are usually more like inconveniences that may lose you some time while designing the you. But it’s better to try and see for yourself if you like this method or not as it’s pretty quick and easy to try without investing much time.