Phaser AE

Playfield shapes and edges

Pro packv3.0.0-32DArcade

What the edges of a playfield do, and what shape its space has. Wrapping screens, bouncing walls, gravity wells, a web of lanes, depth planes, rooms with doors and turning shield rings are each a small object with a clear rule.

This is a Pro pack. Upgrade to Phaser Pro to use it in your games.See Phaser Pro →

Released October 14, 2026 · updated October 20, 2026

Playfield shapes and edges: 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

In many arcade games the boundary is not a wall but a rule: one screen wraps, another bounces two sides and scores on the other two, another is a ring of shields round a cannon. Getting those rules right is fiddly, and remakes often get them half right. The wrap arena is the clearest case. Wrapping the position is the easy part; the arena also gives the shortest delta between two points across the seam, so an enemy does not chase the player the long way round, an overlap test that wraps, and the ghost positions at which to draw an object while it straddles an edge, so it never vanishes from one side before it appears on the other.

The bounded arena gives each edge its own rule: block, bounce with a restitution, wrap, kill or ignore. It applies the rule to a mover and reports each contact with the edge, the rule and the speed of impact, which is what gates the bump sound. A kill is reported and never acted on, because only your game knows whether it means a lost life, a point or a respawn.

The other shapes cover the rest of the genre. Gravity wells pull with an inverse-square force quoted as a pull at a distance you can reason about, and can repel. The web grid is a flat polar lattice of rings and spokes with neighbours, nearest node and pathfinding along its strands. The depth field places points on layered planes with scale and fading brightness, and says whether two things share a plane, so depth becomes a rule rather than a look. The room graph joins rooms with locked, drillable, one-way and hidden doors, routes only through what is passable and lays itself out for a map screen. Barrier rings turn, take damage per section and grow back, and a stack of them is open at an angle only where a gap lines up through every ring.

Features

  • Wrap arena — wrapping, the shortest delta and distance across the seam, wrapped overlap, ghost positions for drawing, and a spawn point clear of listed objects.
  • Bounded arena — block, bounce, wrap, kill or ignore per edge, with restitution, impact speeds and an inset copy for inner walls.
  • Gravity wells — inverse-square pull or push with a range and a swallow radius; applyWells applies several.
  • Web grid — rings and spokes round a hub, with neighbours, the nearest node, paths and the strands to draw.
  • Depth field — planes with a projection to screen position, scale and brightness, and a same-plane test.
  • Room graph — tagged rooms, doors that lock, open by drilling, run one way or stay hidden until used, routing and a map layout.
  • Barrier rings — sections that turn, take hits, regenerate, and show where the gaps line up through a stack.

Good for

  • Wrapping space shooters in the style of Asteroids, where chases, collisions and drawing must all respect the seam.
  • Bat-and-ball games in the style of Pong, with two bouncing edges and two that score.
  • Boundary-bounce shooters where the ship and shots rebound off an arena wall and an inner box.
  • Fortress shooters in the style of Star Castle, with turning rings of shields round a cannon.
  • Planet and black-hole arenas, with wells that bend the ship and the shots.
  • Depth-plane shooters, where a mine can only be hit from its own plane.
  • Maze and escape games built from rooms, with keys, one-way doors, secret doors and a route out.

Make it yours

Each shape takes its own plain options. A wrap arena or a bounded arena is a rectangle; the bounded one takes one rule for every edge or one per edge, and restitution. A well takes a position, a strength at a quoted distance, a range and a radius. A web grid takes its rings, spokes, radius, inner radius and rotation. A depth field takes the number of planes, the point they converge on, and how much scale and brightness each plane loses. A barrier takes its sections, hits per section, spin, regrowth time and radius, and a stack takes one barrier per ring.

Two materially different playfields: a bat-and-ball court where the top and bottom bounce with full restitution and the left and right kill to score; and a fortress level with two counter-rotating rings of twelve sections, each section taking two hits and growing back after eight seconds, where the cannon fires only while a gap lines up with the player.

A quick look

Two counter-rotating shield rings, hit by a shot and tested for a clear line:

const castle = game.arena.createBarrierStack([
  { sections: 12, health: 2, spin: 0.6, regen: 8, radius: 120 },   // outermost first
  { sections: 12, health: 2, spin: -0.9, regen: 8, radius: 90 },
]);
castle.update(dt);
const { ring, result } = castle.hitAt(Math.atan2(shot.y - cy, shot.x - cx));   // 'damaged', 'destroyed' or 'none'
if (castle.open(angleToPlayer)) fireTheCannon();

Works with

  • actors — the movement chips that drive what moves inside the arena.
  • arena-layout — for seeded top-down rooms of walls and obstacles, with a flow field to move round them.
  • levelgen — for generated dungeons, which the room graph does not make.
  • vector-tube — for a tube playfield with a rim and a depth axis, rather than the flat web.

Good to know

  • The wrap arena wraps positions and gives you the wrapped delta and overlap, but collision against your own shapes is still your game's query.
  • A kill edge is reported, never acted on; your game decides what it means.
  • The room graph lays rooms out on a grid for a map; it does not generate dungeons.
  • The web grid is flat, a lattice you move about inside; it is not a tube with depth.

More Arcade packs

Show all →