What is Nine-Patch?
A Nine-Patch is an image format that adds extra information on an image file, defining what parts of it should be scaled (and which are not) when the image is rendered in a larger or smaller size. This technique was introduced in the Android SDK and is very useful for creating UI components like buttons, panels, containers, etc.
Using this technique, you can define the background of multiples UI components like panels or buttons with the same image asset. You can also create large panels with a reduced image asset so is very useful for optimizing your project resources.
How does Nine-Patch work
You add the extra information on the image using an additional pixel square around of your original image.
The scalable area is defined by a vertical and a horizontal black line. This area can be stretched while the outside area will not be modified.
On the other hand, the fill area is also defined by a vertical and a horizontal black line and it specifies the text content area of your image.
Creating my Nine-Patch image
For creating nine-path images you can use the Draw9patch tool, included in the Android SDK. If you have the Android SDK installed on your system you can find it in the following path:
…android-sdk/tools/draw9patch
This tool can define scalable areas and fill areas and also shows you different stretch samples:
Sample code
In the following example you can find the NinePath technique implemented as a WaveEngine component. You can use it in your own games and, of course, you’re allowed to modify or extend them as you wish.
For this implementation we have created three components: NinePatchSprite, NinePatchSpriteAtlas and NinePatchRenderer. You can use them from WaveEditor:
You can download this sample in the following link.
This feature is still on development but we would like to add it to our WaveEngine Component library on a future release.
Note. I would like to thank my partner Victor Ferrer, who write the NinePatch components used in this sample.