NineSlice - LiruJ/GuiCookie GitHub Wiki

Overview

Specifies how an image should be cut up for drawing by defining 4 "slices".

Stretch Mask

NineSlices accept an optional bitmask known as the "StretchMask", this tells the NineSlice which sections are stretched and which are tiled. Corners cannot be stretched. By default, nothing is stretched. Where 0 is tiled and 1 is stretched, in the following order from left to right:

  1. Left
  2. Bottom
  3. Right
  4. Top
  5. Centre

Note that any preceding 0s can be omitted. For example; the following will only stretch the centre:

<SliceFrame NineSlice="Thirds, 1"/>

Creation

There are multiple ways of creating a NineSlice depending on the requirements of the graphic.

Raw

<SliceFrame NineSlice="0.5, 0.6, 0.33, 0.66"/>
<SliceFrame NineSlice="0.5, 0.6, 0.33, 0.66, 10100"/>

Allows for custom slices to be provided in the following order:

  1. Left
  2. Right
  3. Top
  4. Bottom

Where each value is a number from 0 to 1, where 0 is the left/top and 1 is the right/bottom.

Thirds

Equal spacing between each section, where the image is split into 9 squares of the exact same size.

Equal to

<SliceFrame NineSlice="0.33, 0.66, 0.33, 0.66"/>

However, using the Thirds keyword is preferred as the division is performed at runtime so is more accurate.

VSlice

Does not have any left or right edges or corners, useful for vertical sliders and other elements that are only scaled vertically. The top and bottom edges are stretched across the width of the element.

Equal to

<SliceFrame NineSlice="0, 1, 0.33, 0.66, 01010"/>

HSlice

Does not have any top or bottom edges or corners, useful for horizontal slides and other elements that are only scaled horizontally. The left and right edges are stretched across the height of the element.

Equal to

<SliceFrame NineSlice="0.33, 0.66, 0, 1, 10100"/>
⚠️ **GitHub.com Fallback** ⚠️