Nine-Slice UI Brushes

Nine-slicing lets a UI texture resize without distorting its corners.

In Unreal / UMG, set the brush:

• Draw As: Box

• Margin: normalized left, right, top, bottom slice values

Those margins tell UE how much of the source texture to protect from stretching.

#How Margins Translate

For a texture:

Width  = 512

Height = 133

If the brush margin is:

Left   = 0.07

Right  = 0.07

Top    = 0.18

Bottom = 0.18

UE protects:

Left protected area   = 512 * 0.07 = 36 px

Right protected area  = 512 * 0.07 = 36 px

Top protected area    = 133 * 0.18 = 24 px

Bottom protected area = 133 * 0.18 = 24 px

That divides the texture into:

          Left        Stretch Center        Right

        36 px                              36 px

     +----------+----------------------+----------+

Top  | corner   | top edge stretches   | corner   | 24 px

     +----------+----------------------+----------+

     | left     | center stretches     | right    |

     | edge     | both directions      | edge     |

     +----------+----------------------+----------+

Bot  | corner   | bottom edge stretches| corner   | 24 px

     +----------+----------------------+----------+

                                            24 px

Behavior:

• Corners do not stretch.

• Top and bottom edges stretch horizontally.

• Left and right edges stretch vertically.

• Center stretches both horizontally and vertically.

#Chamfer Rule

For chamfered buttons, the diagonal cut must fit inside the protected corner area.

If the upper-right chamfer is around 24 px, the protected top/right slice needs to be at least about 24 px.

That is why these are good starting values for a 512 x 133 asymmetric button:

Left   = 0.07

Right  = 0.07

Top    = 0.18

Bottom = 0.18

They preserve roughly:

Left/right = 36 px

Top/bottom = 24 px

Enough room to keep the chamfer intact while the long center edges stretch cleanly.

#Tuning

If the chamfer distorts, increase the relevant margins.

Try:

Left   = 0.08

Right  = 0.08

Top    = 0.20

Bottom = 0.20

That protects roughly:

Left/right = 41 px

Top/bottom = 27 px

If the button cannot shrink enough or the center stretch area feels too small, reduce the margins.

Rule of thumb:

Margin size should be slightly larger than the corner/chamfer art you want preserved.