Phaser home
Log inCreate a game

← Expansion packsLook

Phaser AE

Block UI skin

Free packv3.0.0-22DLookUpdated

Flat colour on a solid lip, no outline and no gloss: the modern flat 3D button, for every widget in a game. It presses down like a key and reads on any colour.

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

Released October 18, 2026 · updated October 21, 2026

Block 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 = 'block' and every widget the ui pack draws wears it: buttons in every colour, round icon buttons, windows and title bars, sliders, toggles, progress bars, checkboxes, radios, text fields and lists. A button is a clean face with a slight gradient, on a darker lip in its own hue, under a caption with a hard shadow in the lip's colour. The caption is white, or the colour's dark ink on a pale face, so a pastel button stays legible. It is style data, not images, and one button style fits every height.

Features

  • The flat 3D key — a 7 px lip at the 64 px design height and 10 px corners, with no outline and no gloss.
  • Readable on any colour — white captions on strong colours, dark ones on pale colours.
  • Passion One captions — a bold display face with a hard drop shadow.
  • A button per colour — default, good, warn, bad, flat and ten named colours, with a matching speech box.

Good for

  • Hyper-casual games, where the interface should get out of the way.
  • Modern minimal puzzle games with flat art.
  • Pastel palettes, whose pale buttons need dark captions to read.
  • Clean settings and menu screens in any game that wants depth without decoration.

Make it yours

The options are color (teal by default), surface for the windows (a slate blue), accent, radius (10, or 'pill'), depth (7), roles, extra colors and designHeight; the material has no trim. Keep teal keys on slate windows for a puzzle game, or make pink pills with a mint colour added; with depth: 0 the buttons become fully flat and nudge down when pressed.

A quick look

// manifest: … typography, ui, ui-skins, ui-skin-block
game.ui.theme = 'block';
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: 'block', color: 'pink', name: 'pink-block' });     // 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.
  • Passion One comes from the CDN when the skin is first chosen, and covers Latin, Greek and Cyrillic.
  • Stroked labels and headings redraw the text behind itself: fine for titles, wasteful on a label rewritten every frame.

Changes

3.0.0-2 (2026-10-21)

  • Fixed: the skin's font, Passion One, 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 →