NinePatchImage

Displays an image or sprite with stretchable and scalable regions.

component NinePatchImage

The regions 1, 3, 7 and 9 are scaled according to their aspect ratio. Regions 2 and 8 are stretched horizontally. Regions 4 and 6 are stretched vertically. Region 5 is stretched in both dimensions.

Example

import { NinePatchImage } from ui

export var main = NinePatchImage(
    "my_nine_patch.png",
    fixed_left: 4,
    fixed_right: 4,
    fixed_top: 4,
    fixed_bottom: 4,
)

Supported File Formats

• PNG
• JPEG
• WEBP (we highly recommend using this format for large images, because it loads significantly faster and produces smaller files)
• SVG (limited to static features of SVG 1.2 Tiny)
• TIFF

Constructor

constructor(_ path: String, frame: Int = 0, frame_count: Int = 1, fixed_left: Float = 0, fixed_right: Float = 0, fixed_top: Float = 0, fixed_bottom: Float = 0)

_ path: String

An image file path relative to the main file.

frame: Int = 0

Selects which frame in a sprite is displayed.

frame_count: Int = 1

The number of frames, if the image is a sprite.

fixed_left: Float = 0

The width of the fixed left border (Width of regions 1, 4 & 7)

fixed_right: Float = 0

The width of the fixed right border (Width of regions 3, 6 & 9)

fixed_top: Float = 0

The height of the fixed top border (Height of regions 1, 2 & 3)

fixed_bottom: Float = 0

The height of the fixed bottom border (Height of regions 7, 8 & 9)

Layout Behavior

Always stretches into the available area.

Known Issues

Large sprites rendered blurry

Images are uploaded to the GPU as-is. When an image exceeds the GPU's maximum texture size, the GPU stores a downscaled version of it, which is then upscaled again when rendering. This causes the image to appear blurry (low-res).

The maximum texture size depends on the platform and cannot be controlled by Kontakt. On desktop systems it is usually around 16000×16000 pixels, sometimes 32000×32000. Most images never get this big, but sprites might do, because all frames are stacked along one dimension.

To avoid the issue, keep images below 16000 pixels per dimension, ideally even below 8000.