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.

What it does

You show a background with a style and its settings, and it fills the screen behind the sprites. The patterns are worked out per pixel: where the pixel sits on a lattice, a ring, a spiral or a noise field. So there are no textures to load, and the cost is one full-screen pass whatever the pattern. The colour is always a rainbow over the surface, set by a base hue, a hue cycle per second and a brightness.

What makes it more than wallpaper is that it shares state with the trippatron pack. Every burst and every trip.impact call pushes the surface outward from where it happened, with up to eight shared impulses in flight at once. With audio composed and trip.listen() called, the level of the mix drives the wobble, brightness and hue, and the waveform can be drawn as an oscilloscope trace. handle.wake sends a wave packet along a segment of the world, so sampling a drag every tenth of a second leaves a trail of ripples; up to 24 wake segments are held at once.

It runs its own pass rather than joining the backdrop stack, because one surface needs far more data (the settings, the impulses, a 32-sample waveform and the wake segments) than a stacked backdrop's sixteen params. Settings are checked before anything changes, so a bad value throws and the old background stays.

Features

  • Twenty styles — grid, rings, plasma, tunnel, raster, hex, triangles, diamonds, dots, checker, circuit, contours, interference, starfield, aurora, nebula, scanlines, waves, spiral and kaleidoscope; tripBackdropStyles lists them for a picker.
  • Impact ripples — explosions and impacts from trippatron displace the surface; reaction scales them or turns them off.
  • Audio response — audioGain sets how much the mix moves the wobble, brightness and hue.
  • A live waveform — waveform: true draws the signal as a trace across the middle.
  • Drag wakes — handle.wake spreads a water-like wave along a drag or from a point, with its own strength, width, speed and duration.
  • Live settings — spacing, line width, warp, rounding, speed (backwards too), hue, cycle and brightness, changed with set.
  • Checked input — out-of-range numbers are clamped, and non-finite ones throw before anything is replaced.
  • WebGPU and WebGL2 — one full-screen pass on either.

Good for

  • Twin-stick arena shooters — a neon grid that warps with every explosion, in the style of Geometry Wars.
  • Light shows and psychedelic shooters — hue cycling and kaleidoscopes in the style of Llamatron and Trip-a-Tron.
  • Music visualisers and rhythm games — a surface that pulses to the mix and traces its waveform.
  • Touch toys and menus — a background that ripples behind the player's finger.
  • Tunnel and tube shooters — the tunnel and spiral styles for a sense of depth.

Make it yours

Every setting is live. A calm menu is starfield or aurora with a slow cycle, low brightness and reaction at 0, so bursts played over the menu do not shake it. A frantic arena is grid with fine spacing, some rounding so the cells bulge, warp raised and reaction at 2, with audioGain and waveform on for the music. Changing style mid-game is one set, as a level changes or a boss enters.

A quick look

A grid that bulges at an impact, then turns into a kaleidoscope that pulses to the music:

const bg = game.tripBackdrop.show({ style: 'grid', spacing: 36, rounding: 0.6, warp: 15, brightness: 0.5 });
game.trip.impact({ x: 200, y: 180, strength: 40 });     // the grid bulges out from here
bg.set({ style: 'kaleidoscope', cycle: 0.2 });          // live
game.trip.listen();                                      // with audio composed: pulse to the mix
bg.set({ waveform: true, audioGain: 2 });

Works with

  • trippatron — required: its bursts and impacts move the surface, and it holds the shared audio state.
  • post-trippatron — distorts the sprites with the arena; lower the reaction on one of the two so an impact does not double up.
  • audio — real music for the surface to react to.
  • backdrops — calm skies and stacked, fading parallax layers instead.

Good to know

  • One opaque background at a time: it hides any backdrop beneath it, and showing a new one replaces the old.
  • The ripples are a formula over time, not a fluid simulation: eight shared impulses and 24 wakes at most, the oldest recycled.
  • It does not distort sprites; that is post-trippatron.
  • There are no colour params: the colour is always a rainbow set by hue, cycle and brightness.
  • Changing scene removes it, so show it again in the next scene; before audio unlocks, the audio analysis is silence.

More Backdrop packs

Show all →