Skip to main content

9-patch image

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

BitmapNode sample

    Import an image in Solution Explorer window. 
    drawing-4-1676956678.png


    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. 
    drawing-4-1676956701.png


    Drag the image from the Solution Explorer window in the Scene Tree window into Scene2D. 
    drawing-4-1676956729.png


    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. 
    drawing-4-1676956745.png


    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
      drawing-4-1676957037.png
        Changed X, Y values
        drawing-4-1676957014.png

         

          If (X < Left + Right) or (Y < Top + Bottom) where Left, Top, Right and Bottom are the 9-patch Stretchable Area, then the borders themselves will also start scaling down.
          drawing-4-1676956973.png


          Back to top