Phaser home
Log inCreate a game

← Expansion packsLook

Phaser AE

Candy UI skin

Free packv3.0.0-32DLookUpdated

Pill buttons with a white rim, a jelly highlight, a passing shine and a lip they press into, under chunky white captions: the candy look for every widget in a game. It is the look the `ui` pack starts with, and this pack adds its display face, its colour options and its material.

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

Released October 18, 2026 · updated October 21, 2026

Candy UI skin: 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.

What it does

Set game.ui.theme = 'candy' and every widget wears it: buttons in every colour, round icon buttons, windows, title bars, sliders, toggles, progress bars, checkboxes, radios, text fields and lists. Each button is worked out from one colour into a face, a darker lip and an ink for its caption's stroke, with hover, pressed and grey disabled looks. The ui pack's built-in styles are already this skin in the engine's bold sans; composing the pack brings the Luckiest Guy captions and lets you recolour and reshape it. It is style data, not images, and one button style fits every height.

Features

  • The candy button — a pill, a white rim, a jelly highlight, a shine every five seconds and a 7 px lip at the 64 px design height.
  • Poster captions — Luckiest Guy in white, stroked and extruded in the button's own ink.
  • A button per colour — default, good, warn, bad, flat and ten named colours.
  • Shining fills — slider and progress fills carry the shine too, and dialogues wear the skin.

Good for

  • Bright casual and puzzle games that want a sugary, rounded look.
  • Rewards and level-complete screens, where the passing shine draws the eye to the next button.
  • Kids' games, with big, readable pills that press down into their lips.
  • Games built on the engine's default look, keeping it while adding the display face and colour options.

Make it yours

The options are color (yellow by default), surface for the windows (a purple), accent, trim for the rim (white), radius ('pill'), depth (7; 0 makes flat buttons), roles, extra colors and designHeight. Keep the yellow pills on purple windows for a cheerful puzzle game, or make pink buttons with a gold rim (trim: '#ffd21f'), 14 px corners and a mint colour for a special-offer button.

A quick look

// manifest: … typography, ui, ui-skins, ui-skin-candy
game.ui.theme = 'candy';
game.ui.button({ text: 'PLAY', style: 'good', icon: 'play', onClick: start });   // sized to its caption and icon
game.ui.button({ h: 72, icon: 'settings', style: 'icon' });                     // the round icon button
game.skins.use({ material: 'candy', color: 'pink', name: 'pink-candy' });     // another colour, live

Works with

Good to know

  • The options recolour and reshape the look but do not change it; for another, compose another skin.
  • Luckiest Guy comes from the CDN when the skin is first chosen, and covers Latin, Greek and Cyrillic.
  • The caption stroke and extrusion redraw the text: fine on buttons, wasteful on a label rewritten every frame.

Changes

3.0.0-3 (2026-10-21)

  • Fixed: the skin's font, Luckiest Guy, loads a re-baked copy with fewer specks at sharp corners and where strokes cross, which showed in large titles and buttons.

More Look packs

Show all →