Phaser 3 — 3-Slice UI Sprite Technique

Overview

Many game UI assets (bars, buttons, banners) are delivered as 3-slice images: left cap + stretchable middle + right cap. The correct way to use them in Phaser 3 depends on the target display size relative to the source cap sizes.

When to Use

• UI asset filename contains 3Slides, BigBar, SmallBar, or similar
• Image visually has distinct end caps and a repeatable middle section
• You need to render the asset at an arbitrary width without distorting the end caps

Core Problem: setCrop + setDisplaySize Conflict

setDisplaySize(w, h) internally calculates scale from the full texture dimensions: