Phaser home
Log inCreate a game

← Expansion packsLook

Phaser AE

Nine-slice and three-slice artwork

Free packv3.0.0-22DLook

Scalable illustrated UI built from native sprite pieces: load atlas frames or image regions, protect their corners or end caps, and resize panels without repainting a single texture.

This is a Free pack. Every phaser.io account can use it in their games.

Released October 14, 2026 · updated October 19, 2026

Nine-slice and three-slice artwork: a screenshot of its demo
A note about these graphics

Expansion packs don't come with graphics. This screenshot is one way of drawing what the pack does, made for its demo: none of the sprites, tiles or backgrounds in it are in the pack.

That's by design. A pack is a game's logic, mechanics and effects, and it works with whatever art you give it. Some packs draw effects, backdrops or 3D scenes of their own, but none carries a game's sprites.

So the look is yours. Make the art on phaser.io, bring your own, or let your agent draw it in code: the same pack can look like anything.

The pack

nineSlice

function nineSlice(): Pack<{ nineSlice: NineSliceApi }>

Native retained sprite composition for scalable UI art, in screen or world layers.

Functions

parseAtlas

function parseAtlas(data: unknown, url: string): Map<string, Omit<SliceSource, keyof SliceOptions>>

Parse frame rectangles only; TexturePacker does not inherently specify nine-slice margins.

sliceLayout

function sliceLayout(s: SliceSource, width: number, height: number, borderScale = 1): SliceRect[]

Deterministic layout, including uniformly compressed caps when the target is too small.

validateSource

function validateSource(s: SliceSource): void

Reject invalid dimensions, crops, slice margins and resolution.

Constants

sourceRect

const sourceRect = (s: SliceSource): SliceRect=> …

Resolve the source crop or whole-image bounds.

Types

NineSliceApi

interface NineSliceApi

Native scalable-art service.

  • load(source: SliceSource): Promise<SliceTexture> — Prepare and cache an image or crop.
  • loadAtlas(url: string): Promise<SliceAtlas> — TexturePacker multiatlas textures[] or frames array/hash + meta.image.
  • create(spec: SliceSpec): SliceHandle — Spawn a resizable scene-owned group.

SliceAtlas

interface SliceAtlas

Named source frames decoded from a TexturePacker JSON file.

  • readonly names: readonly string[] — Available unique frame names.
  • load(name: string, options: SliceOptions): Promise<SliceTexture> — Prepare one named atlas frame with authored slice margins.

SliceHandle

interface SliceHandle

Scene-owned group of native sprite pieces.

  • readonly pieces: readonly Handle[] — The retained sprite pieces.
  • readonly disposed: boolean — Whether the group has been released.
  • set(patch: Partial<Omit<SliceSpec, 'texture' | 'id'>>): void — Resize/reposition without new textures or atlas uploads.
  • dispose(): void — Release all pieces. Idempotent.

SliceMode

type SliceMode = 'nine' | 'horizontal' | 'vertical'

Nine pieces, three horizontal pieces, or three vertical pieces.

SliceOptions

interface SliceOptions

How a source rectangle is divided into protected and stretchable regions.

  • slices: readonly [number, number, number, number] — Protected left, top, right, bottom source-pixel margins. Unused margins must be zero.
  • mode?: SliceMode — Default nine.
  • fill?: boolean — Omit the centre tile of an open nine-slice frame. Default true.
  • resolution?: number — Atlas resolution relative to source pixels. Default 1.

SliceRect

interface SliceRect

Source and layout rectangles use top-left coordinates. Created objects use centre coordinates.

  • x: number — Left edge.
  • y: number — Top edge.
  • width: number — Horizontal extent.
  • height: number — Vertical extent.

SliceSource

interface SliceSource extends SliceOptions

Image and optional atlas crop prepared for scalable rendering.

  • url: string — Image URL, including CORS-enabled CDN URLs.
  • width: number — Source image dimensions, before cropping.
  • height: number — Source image height in pixels.
  • frame?: SliceRect — Optional subrectangle within the image, e.g. a TexturePacker frame.

SliceSpec

interface SliceSpec

Retained slice group initial presentation.

  • texture: SliceTexture — Art prepared by this game.
  • x: number — Centre in world/screen coordinates.
  • y: number — Centre y coordinate.
  • width: number — Target width.
  • height: number — Target height.
  • borderScale?: number — Nine-slice corner scale. Three-slice caps scale uniformly from the cross-axis size. Default 1.
  • id?: string — Human-readable group prefix.
  • layer?: string — Render layer; defaults to the world layer.
  • z?: number — Draw order within the layer. Default 0.
  • alpha?: number — Group opacity, 0..1. Default 1.
  • tint?: string — Multiplicative CSS tint. Default white.
  • visible?: boolean — Draw the group. Default true.

SliceTexture

interface SliceTexture

Prepared art can be reused by any number of panels in the game that loaded it.

  • readonly source: SliceSource — Immutable source metadata.
  • readonly frames: readonly number[] — Row-major atlas indices; -1 denotes an omitted piece.