NineSlice

A visual divided into 9 areas to create "nine-slice" textured scalable objects.

NineSlice is a technique used to create scalable UI elements and graphics while preserving their visual integrity. The texture is divided into 9 sections:

• 4 corners (remain at original size)
• 4 edges (scale in one direction only)
• 1 center (scales in both directions)

This allows creating buttons, panels, and frames that can scale to any size while keeping corners crisp and edges properly stretched or tiled.

Key features:

• Configurable slice distances from each edge
• Support for stretching, repeating, or mirroring the edges and center
• Automatic handling of texture frames and rotation
• Efficient rendering using only necessary quads

Common uses:

• UI panels and windows
• Scalable buttons
• Dialog boxes and tooltips
• Decorative frames
• Progress bars

// Create a scalable button
var button = new NineSlice();
button.texture = assets.texture('button');
button.slice(16); // 16 pixels from each edge
button.size(200, 60); // Scale to any size

// Different slicing for each edge
var panel = new NineSlice();
panel.texture = assets.texture('panel');
panel.slice(20, 30, 40, 30); // top, right, bottom, left

// Tiled edges instead of stretched
var frame = new NineSlice();
frame.texture = assets.texture('ornate-frame');
frame.slice(32);
frame.edgeRendering = REPEAT;
frame.innerRendering = NONE; // Transparent center

Instance Members #

Distance from top border to cut slices at the top

Distance from right border to cut slices on the right

Distance from bottom border to cut slices at the bottom

Distance from left border to cut slices on the left

How to render the center section.

• STRETCH: Scales the center to fill the area (default)
• REPEAT: Tiles the center texture
• MIRROR: Tiles with mirroring for seamless patterns
• NONE: No center rendering (transparent middle)

How to render the edge sections (top, right, bottom, left).

• STRETCH: Scales edges to fill the area (default)
• REPEAT: Tiles the edge textures
• MIRROR: Tiles with mirroring for seamless patterns
• NONE: No edge rendering

The texture to use for this NineSlice object

Whether the texture frame is rotated 90 degrees. Used internally when working with texture atlases that pack rotated frames for optimal space usage.

Optional texture tile to use instead of a full texture. Useful when working with texture atlases where the nine-slice image is packed with other graphics.

The tint color applied to all sections of the nine-slice. Use Color.WHITE for no tinting.

Set distance from borders to cut slices. This is equivalent to slice(value, value, value, value)

Set rendering mode for both inner and edge sections.

Updates the nine-slice geometry based on current size and slice settings. Called automatically when size, slices, or rendering modes change.

Private Members #

Metadata #