Table of Contents

Panel Sprite ("9 patch") object

Panel sprite is an object where a texture is split into 9 pieces or slices and each slice is scaled separately. This can be helpful where you would need the object to keep it's proportions even after it is scaled. For example it can be helpful in making frame of an interface, as tiles (land, water, etc..) in top down games, as platforms in platformer games, used in health bars, etc…

The 9 patch sprite (“9 patch”) object currently doesn't support points, custom hitboxes, animations

How does it work?

Here you can see a representation of how a 9 patch sprite's texture is split and scaled.

The texture is split into 9 segments, 1 to 9. Each of those segments will be scaled separately. You can see that segments 1, 3, 7, 9 keep their size and do not get scaled, while segments 2, 8 get scaled only horizontally, 4, 6 get scaled only vertically and segment 5 getting scaled both horizontally and vertically.

How a 9 patch sprite is scaled compared to a normal sprite

While the normal sprite object's texture is scaled as a single segment, the 9 patch sprite object's texture is scaled as different segments, keeping their proportion and also keeping the texture's quality.

Using a Panel sprite

To use the Panel Sprite, create a new object from the Objects panel/list on the right. Once you've created the object, you can set the size of the margins for each border around the object. Margins are the top, the left, the right, and the bottom lines that separate each segment.

Here is an image of how the margins work:

If the top margin is set to 100, the margin would be 100 pixels from the top and if the bottom margin is set to 100, the margin would be 100 pixels from the bottom.

Steps to Create a Panel Sprite

  • 1. From the Objects Editor list that is located on the right side of the Scene Editor, click on the plus button to create a new sprite.

  • 2. Select the Panel Sprite option from the list that pops up.

  • 3. Define your object's properties/parameters.

If you enable

The segments (2, 4, 5, 6, 8 from earlier) will be repeated instead of stretching them

Like seen here:

Events for 9 patch object

Conditions

Check the height

Let's you compare the height of the panel sprite with a number or a value

Check the width

Let's you compare the width of the panel sprite with a number or a value

Compare the opacity

Let's you compare the width of the panel sprite with a number or a value (0 to 255 only)

Actions

Modify the height

Let's you change the height of the panel sprite to a number or a value

Modify the width

Let's you change the width of the panel sprite to a number or a value

Change the image (texture) of the panel sprite

Let's you change the image of the panel sprite to another image.

Please note: To use this action, the image must already be part of the project resources and listed in the resources tab. If the image is in a subfolder, the path needs to be built using the Filesystem delimiter expressions. As an example, if you are changing to “Image2.png” which is in a subfolder of “images”, the path must be listed as “Images” + FileSystem::PathDelimiter() + “Image2.png”

Change the tint of the panel sprite

Let's you change the tint of the panel sprite to a RGB (Red, Green, Blue) value

Change the opacity of the panel sprite

Let's you change the opacity of the panel sprite to a number or a value (0 to 255 only)