Phaser home
Log inCreate a game

← Expansion packsWorld

Phaser AE

Screen-space layer

Free packv3.0.0-32DWorld

The part of the game that never moves with the camera. Scores, hearts, menus, fades and dialogs sit in logical screen pixels over the world, and an underlay puts frames and highlights behind the game's pieces without darkening them.

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

Released October 14, 2026 · updated October 19, 2026

Screen-space layer: 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

screen

function screen(opts: ScreenOptions = {}): Pack<{ screen: ScreenApi }>

The screen-space world pack: logical pixels, origin top-left, never moves with the camera. Within a layer, z then spawn order. Its underlay is drawn inside the 2D world's stack, over the backdrop and under the pieces; every other layer draws over the whole world, after lighting and post.

Types

ScreenApi

interface ScreenApi

game.screen.

  • readonly layers: ReadonlyArray<LayerName> — The layer names, back to front: underlay (under the world's pieces), then the layers over the world.
  • readonly width: number — Logical width in pixels, from the screen policy.
  • readonly height: number — Logical height in pixels, from the screen policy.
  • vw(f: number): number — A screen x a fraction across: 0 the left edge, 1 the right. vw(0.5) centres a HUD element whatever the screen policy resolved to.
  • vh(f: number): number — A screen y a fraction down: 0 the top, 1 the bottom.
  • readonly cssScale: number — CSS pixels per LOGICAL pixel, live. 1 headless, and wherever the two coincide. A logical pixel is whatever the fit made it: a pixel-art page authored at 270 logical units on a 928px canvas has a cssScale of 3.44, so 10-unit HUD text lands as 34 real pixels.
  • px(n: number): number — REAL display pixels, in logical units — px(10) is the size that renders as ten CSS pixels whatever the fit did. A HUD that scales with the game is the right default and looks deliberate on any display. This is for the times it is not: a corner readout that should stay the same size as the window grows, or a label ported from somewhere that measured in real pixels.

ScreenOptions

interface ScreenOptions

Manifest options.

  • layers?: LayerName[] — The layers drawn OVER the world, back to front. Default ['hud', 'overlay']. The underlay is always there, under them; listing it first changes nothing.
  • underlayAbove?: LayerName — The 2D world layer the underlay sits directly above, and so below every world layer after it. Default: the 2D world's first layer, its backdrop. Name a later one to lift it: above the tiles, under the units. It must be a layer of a 2D world; without one the underlay is simply the bottom screen layer.