Phaser home
Log inCreate a game

← Expansion packsPost

Phaser AE

Psychedelic screen distortion

Pro packv3.0.0-42DPost

A psychedelic distortion over the whole 2D arena: shockwaves from every explosion, shimmer, curved glass, a melting screen, a colour split and a rainbow wash, all live. Thirteen recipes give you a look in one line, and the screen can move to the game's own soundtrack.

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

Psychedelic screen distortion: 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

game.tripPost.show(config) installs one distortion pass for the scene. It runs after the world is drawn, so the backdrop, sprites and particles all bend together, and before any regular post effects and the HUD, so the score stays readable. Both renderers sample a copy of the scene's colour rather than the frame being drawn. The call returns a handle to set new values or remove it; a second show replaces the first.

The ripples come from the trippatron pack's impact field, the same one its procedural backgrounds use. A burst or an impact there sends a radial wave through the arena, up to eight at once, and reaction scales how hard this pass answers it. Sound works the same way: with the audio pack composed, the trippatron pack can follow the master mix, or a game can feed it a level and a waveform itself, and audioGain sets how far that drives the shimmer, melt and colour split.

The rest is a handful of dials: shimmer and melt in world units, bend for curved glass, chroma for the colour split, rainbow and cycle for the colour wash, speed (negative runs it backwards) and an overall amount, where 0 bypasses it. compare leaves the left half of the screen untouched, for judging a look while you tune it.

Features

  • Impact shockwaves — overlapping radial waves from explosions, up to eight at once, shared with the procedural backgrounds.
  • Shimmer and melt — horizontal shimmer and slow, uneven downward waves.
  • Curved glass — rounded curvature that compresses the edges of the picture.
  • Colour split and rainbow wash — red and blue edges pulled apart, and a travelling colour wash that cycles.
  • Thirteen recipes — tripPostPresets: clean, gentle, heat, water, glass, melt, prism, rainbow, impact, dream, unstable, undertow and arcade, each with a label and a description.
  • Sound response — the mix, or levels you feed it, drives shimmer, melt and split.
  • Live and checked — every option changes through set; values are kept to their ranges, and one that is not a finite number throws.
  • Split comparison — compare shows the untreated and distorted halves side by side.

Good for

  • Psychedelic arena and tube shooters — the screen bending with every kill, in the style of Tempest 2000.
  • Music-driven games and visualisers — distortion that rises and falls with the soundtrack.
  • Explosions with weight — the shockwave recipe stays calm until an impact, then bends the sprites around it.
  • Water, heat and dream levels — the underwater, heat haze and dream drift recipes.
  • Glitch moments — the unstable signal recipe, for a damaged display.

Make it yours

Start from a recipe and override what you like: a recipe resets every distortion setting but keeps amount and compare, so show({ ...tripPostPresets.water, amount: 0.7 }) is a softer underwater sway. Every option is live through set, so a level can move from one look to another as play goes on.

Two very different uses: a readable shooter runs the gentle recipe with a low reaction, so explosions ripple the arena without hiding the enemies; a light-show level runs arcade, listens to the music, and lets curved glass, colour and melt pulse with every beat.

A quick look

import { tripPostPresets } from '@phaser-ae/post-trippatron';

const distortion = game.tripPost.show({ ...tripPostPresets.water, amount: 0.7 });
distortion.set({ bend: 0.2, melt: 15, rainbow: 0.3 });
game.trip.burst({ x: 320, y: 240, count: 3000 });   // a burst whose impact ripples the screen
distortion.remove();

Works with

  • trippatron — required; its bursts and impacts make the ripples, and it carries the sound response.
  • backdrop-trippatron — the procedural backgrounds on the same impact field.
  • audio — for following the game's real mix.
  • post-bloom — and other regular post effects, which run after this pass.
  • post-looks — its plain wave or colour split, when you need a sway or a split without impacts.

Good to know

  • One effect at a time: show replaces the current one and keeps no stack of earlier settings.
  • It displaces and recolours the current frame; it keeps no past frames, so it is not a trail, a feedback effect or a fluid simulation. Extreme displacement clamps at the image edge.
  • With a trippatron backdrop distorting too, the two compound: lower one reaction when that is not wanted.
  • Impacts are world-space only, so a burst on a HUD score should pass impact: false.
  • It is 2D only.

More Post packs

Show all →