Tutorial for 9-patch image

• 9-patch image

9-patch image

For full description of the 9-patch check 9-patch image chapter.

BitmapNode sample

1. Import an image in Solution Explorer window. 
   
   
   
   
   
2. To configure the image as a 9patch image, click on my_image from the Solution Explorer window and change in the Properties window Bitmap -> Bitmap Layout from Stretch to NinePatch. 4 additional properties are available Bitmap -> 9-patch Stretchable Area: Left, Top, Right and Bottom. These properties define the distance in pixel from the border. 
   
   
   
   
   
3. Drag the image from the Solution Explorer window in the Scene Tree window into Scene2D. 
   
   
   
   
   
4. In order to have sharp borders, click on my_image from the Scene Tree window, then click on BitmapBrushBlend and change in the Properties window Filter from BilinearFilter to NereastFilter. 
   
   
   
   
   
5. To resize a 9patch image, click on my_image from the Scene Tree window and change in the Properties window Layout -> Size X and Y values.
   
   
   • Default X, Y values