Perquisites

Familiarity with:

• UMG system
• Nine slicing

Setup

To spawn the Nine Slicer widget you need to:

1. Open a widget blueprint blueprint in Designer mode
2. Navigate to Window → Nine Slicer and press to open the Nine Slicer tab
3. Dock the newly spawned tab to your preferred location

Preview an image’s margins

To visualise the margins of a selected image, make sure:

1. Make sure you have an Image selected (not more than 1)
2. The image’s Brush DrawAs property should be set to Box or Border

The Nine Slicer widget should now display a copy of your current selection.

On top there will be 4 lines and 4 dots displaying the current values of the margin settings.

Edit an image’s margins

When you have an image in the Nine Slicer preview, you can simply drag any of the dots to adjust the margin’s values directly.

The adjustments only apply to your currently selected image.

Shortcut buttons

To simplify the workflow at the top of the nine slicer widget you have the following buttons

• 3 color presets - this quickly changes the visualiser draw color
• Reset - sets the image’s margins to 0, 0, 0, 0
• Settings - Open the plugin’s editor preferences

Plugin settings

Here you can:

• Custom visualiser color - set any custom color for the visualiser draw color
• Margin precision - When adjusting the margins visually it allows you limit the amount of decimals. Setting this to 0 will disable clamping
• Handle size - Changes the draw size of the draggable handle that adjusts the margins

Undo & redo support

Visual edits and resets applied to the margin property are registered as Unreal actions.

Therefore they support both undo & redo commands. You can use them either via the keyboard shortcuts (CTRL+Z & CTRL+Y) or via the Edit menu.