9 Slice objects (sometimes referred as 9 Patch) are objects with user defined margins that divide an image into 9 sections and change the way the object scales.
9 Slice objects are often used when creating user interfaces, or other project elements that need to keep certain appearances when scaling.
Typically 3 things happen when you resize a 9 slice object:
- The corners get moved.
- The side areas get stretched.
- The part in the middle only gets scaled.
If you start with the graphic below, and try to scale it you can easily see the differences between a 9 Slice object and a regular graphic
Regular Graphic (no 9 Slice margins) scaled horizontally to 230%. Notice how the corners of the image are stretched and do not look square.
Convert the original graphic to a 9 Slice object, with 20% margins (red lines).
If you scale the 9 Slice object to the same 230% horizontally, you can see that the object corners maintain their shape.
Creating 9 Slice Objects
You can turn any graphic into a 9 Slice object. To do this, open the Asset Library then navigate to the Graphic you want turn into a 9 slice object.
When you find your graphic, touch and hold your finger on it until the Asset Menu menu appears. From the Asset Menu, select "Convert to 9-Slice".
Converting to 9 Slice will automatically create all the margins at 40% for you.
Modifying Default Margins
If you want to change the default margins, select "Preview" from the Asset Menu.
The "9-Slice Preview" visually shows the margin lines on your graphic, and has input fields with the margin position (as a percentage of your graphic).
To change the margin you can touch and move the white circles on each margin line, or enter the numbers manually. Notice, when dragging the margin lines, the manual input fields are automatically updated with the new position percentage.
Modifying Object Specific Margins
You can also change the margins for each specific 9 Slice object you add to your scene without affecting the original 9 slice Object.
To do this, simply tap the 9 Slice object on your canvas and from the Object Properties switch to the General Properties Tab (the first tab available).
In the General Properties Tab, you can see the 4 margins and change their positions manually.