Phaser home
Log inCreate a game

← Expansion packsLook

Phaser AE

Glossy UI skin

Free packv3.0.0-22DLookUpdated

A glossy pill with a dark outline, an inset highlight and glints, under a fat white stroked caption: the all-round mobile game button, for every widget in a game.

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

Released October 18, 2026 · updated October 21, 2026

Glossy 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 = 'glossy' 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 pill outlined in its colour's darkest shade, with a rounded highlight inset across its top, strong glints and a lip it presses down into. Its caption is Titan One in white, stroked and extruded in the same dark shade, so it reads on any colour. It is style data, not images, and one button style fits every height.

Features

  • The glossy pill — a dark outline in the button's own hue, an inset pill highlight and a 6 px lip at the 64 px design height.
  • Glints — bright streaks and dots across the highlight.
  • Fat captions — Titan One in white, stroked and extruded in the button's ink.
  • A button per colour — default, good, warn, bad, flat and ten named colours, with a matching speech box.

Good for

  • Arcade games with a bright, shiny front end.
  • Puzzle games that want classic glossy mobile buttons.
  • Action games that want bold, readable buttons on their pause and result screens.
  • Any casual game that wants the familiar glossy mobile look without a strong theme.

Make it yours

The options are color (blue by default), surface for the windows (a deep blue), accent, radius ('pill'), depth (6), roles, extra colors and designHeight; the material has no trim. Keep blue pills on deep blue windows for an arcade game, or make red buttons with orange accents and 16 px corners for a harder-edged action game.

A quick look

// manifest: … typography, ui, ui-skins, ui-skin-glossy
game.ui.theme = 'glossy';
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: 'glossy', color: 'pink', name: 'pink-glossy' });     // 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.
  • Titan One 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-2 (2026-10-21)

  • Changed: the skin loads the catalog's re-baked copy of its font, Titan One. Its text looks the same.

More Look packs

Show all →