Phaser home
Log inCreate a game

← Expansion packsBackdrop

Phaser AE

Reactive psychedelic backgrounds

Pro packv3.0.0-32DBackdrop

A neon background that reacts to the game: the grid bulges where an explosion lands, the colours pulse with the music, and a dragged finger leaves a wake like water. There are twenty styles, one call shows one, and every setting is live.

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

Released October 14, 2026 · updated October 19, 2026

Reactive psychedelic backgrounds: 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

backdropTrippatron

function backdropTrippatron(): Pack<{ tripBackdrop: TripBackdropApi }>

Install twenty impact-reactive geometric, organic and space-themed raster surfaces as game.tripBackdrop. Requires trippatron composed first (its impact ring and audio state). Draws its own opaque trippatron.backdrop pass after backdrops and before sprites.

Helpers

tripBackdropStyles

const tripBackdropStyles: readonly TripBackdropStyle[]

Available procedural surfaces, in stable shader order.

Types

TripBackdropApi

interface TripBackdropApi

The pack's single bounded procedural background layer.

  • show(config?: TripBackdropConfig): TripBackdropHandle — Replace the background from one object (validated before anything is replaced). Scene-scoped: leaving the scene removes it.
  • clear(): void — Remove the background.

TripBackdropConfig

interface TripBackdropConfig

Live background settings. Distances are world units and hue is measured in turns. Non-finite numbers throw; the ranges below are clamped. The docs page says what spacing and lineWidth mean for each style.

  • style?: TripBackdropStyle — The surface, one of tripBackdropStyles. Default 'grid'.
  • spacing?: number — The pattern's scale, 2..1000: cell size for the lattices, ring or line pitch, star sector size. Default 36.
  • lineWidth?: number — Line half-width, 0.1..30, for the line styles; star size for 'starfield'; plasma, checker, aurora and nebula ignore it. Default 1.2.
  • warp?: number — Ambient wobble of the whole surface, 0..500. Default 8.
  • speed?: number — Animation speed, -20..20; negative runs backwards. Default 1.
  • hue?: number — Base hue, turns. Default 0.55.
  • cycle?: number — Hue cycles per second, -10..10. Default 0.07.
  • brightness?: number — Light intensity, 0..3. Default 0.55.
  • rounding?: number — Rounded bulge of the lattice cells, 0..1. Default 0.
  • audioGain?: number — Response to trip.audio / trip.listen amplitude (wobble, brightness, hue), 0..10. Default 1.
  • waveform?: boolean — Draw the supplied audio waveform as an oscilloscope trace across the middle. Default false.
  • reaction?: number — Multiplier on the shared impact displacement, 0..10; 0 keeps the ambient motion without explosion waves. Default 1.

TripBackdropHandle

interface TripBackdropHandle

The current backdrop controller. Replacing a backdrop retires its previous controller.

  • set(config: TripBackdropConfig): void — Patch the settings live; the merged result is validated first, so a refused patch changes nothing. Inert once replaced or removed.
  • wake(config: TripWakeConfig): void — Emit a background-only wake; 24 fixed shader segments, oldest recycled.
  • remove(): void — Remove this background. Idempotent.

TripBackdropStyle

type TripBackdropStyle = 'grid' | 'rings' | 'plasma' | 'tunnel' | 'raster' | 'hex' | 'triangles' | 'diamonds' | 'dots' | 'checker' | 'circuit' | 'contours' | 'interference' | 'starfield' | 'aurora' | 'nebula' | 'scanlines' | 'waves' | 'spiral' | 'kaleidoscope'

Procedural raster backgrounds; all rendered on a fullscreen 2D plane.

TripWakeConfig

interface TripWakeConfig

A water-like wave emitted along a world-space drag segment.

  • x: number — End position in world units.
  • y: number — End position in world units.
  • fromX?: number — Start position; defaults to x for a point ripple.
  • fromY?: number — Start position; defaults to y for a point ripple.
  • strength?: number — Displacement in world units, -100..100; negative pulls. Default 14.
  • width?: number — Wave packet width in world units, 2..300. Default 28.
  • speed?: number — Outward travel in world units/sec, 0..1000. Default 90.
  • duration?: number — Seconds until completely settled, 0.05..10. Default 2.5.