Phaser home
Log inCreate a game

← Expansion packsWorld

Phaser AE

Top-down world

Free packv3.0.0-52DWorld

The world for games seen from above. Within a layer, objects draw back to front by their feet, so whatever stands lower on screen is in front, and a hero walks behind a tree and in front of a fence without a line of sorting code.

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

Released October 14, 2026 · updated October 20, 2026

Top-down world: 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

topdown

function topdown(opts: TopdownOptions = {}): Pack<{ world: World2dApi }>

The top-down world pack: within a layer, things sort by their FEET (y + half the scaled height + z), so the player walks behind the tree. Installs the 2D camera; registers the world with the kernel.

Types

TopdownOptions

interface TopdownOptions

Manifest options.

  • layers?: LayerName[] — Draw layers, back to front. Default ['floor', 'world', 'fx'].
  • wrap?: Wrap — A toroidal world of this size (world units): positions, drawing, camera, queries and collision all wrap. Game code never wraps a coordinate. Default none.

World2dApi

interface World2dApi

game.world for either 2D world kind.

  • readonly kind: 'topdown' | 'side' — Which 2D world this is.
  • readonly layers: ReadonlyArray<LayerName> — The layer names, back to front. Spawning into any other name throws.
  • toWorld(sx: number, sy: number): { x: number; y: number } — Screen (logical pixels) to world, through the camera.
  • toScreen(wx: number, wy: number): { x: number; y: number } — World to screen (logical pixels), through the camera.
  • readonly wrap: Wrap | null — The wrap size, or null. Read it for spawning at the edges; never wrap a coordinate yourself.
  • readonly view: { x: number; y: number; w: number; h: number; cx: number; cy: number } — What the camera is looking at right now, in world units. Derived every read, so it is never a frame behind.
  • vw(f: number): number — The world x a fraction across the view: 0 the left edge, 1 the right. Camera-aware, so vw(0.5) is always the middle of the screen.
  • vh(f: number): number — The world y a fraction down the view: 0 the top, 1 the bottom.