.png)
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:
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.
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.
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.
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.
9 Slice Objects are invaluable for maintaining the visual integrity of scalable graphics in your games and applications. With hyperPad, converting and customizing these objects is straightforward, allowing you to create polished and professional-looking interfaces and elements. Explore the power of 9 Slice Objects today and enhance your game development projects with hyperPad!
Be the first to hear about new blogs, updates and fun events!
