Phaser home
Log inCreate a game

← Expansion packsFX

Phaser AE

Sprite shaders

Free packv3.0.0-32DFX

A shader of your own on one sprite, run over the sprite and a margin around it so the effect can reach past the outline: flames rising off the hero's head, a glow in the pickup's own shape, arcs crackling round a sword. Eight recipes come ready, and each shader is a handle you can ease, show and hide on the game clock.

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

Released October 14, 2026 · updated October 20, 2026

Sprite shaders: 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.spriteShaders.add(sprite, def) draws a sprite through a definition: a name, a WGSL snippet, up to sixteen params, up to four colours and a pad, the margin the snippet may draw into. The snippet runs for every pixel of the padded quad. It reads the sprite through srcAt and alphaAt, probes for its outline with edgeAt and takes a soft silhouette with blurAt, and leaves the sprite's whole new look, margin included, in color. The sprite keeps its sorted place and follows its own position, rotation, mirroring, tint, alpha and parent; a mirrored sprite still has its flames rising and its shine travelling the right way on screen.

The handle makes the shader part of play. set changes params and colours live, checked before anything changes; tween eases them on the game clock, pausing with the game and taking over a running tween without a jump; show and hide fade between the effect and the plain sprite. Hidden and settled, the sprite goes back to the renderer's own sprite path and costs nothing. A snippet that reads fade fades itself, which is why the burning recipe shrinks its flames to nothing rather than turning them grey.

Definitions are checked before they draw. checkSpriteShader names the problem in one sentence with no GPU, so a tool or a model that writes a shader can test it first, and add refuses a snippet the WebGL2 translator cannot take, so what you see on WebGPU is what every player sees. Headless, in a replay or a test, every value and tween runs and nothing is drawn.

Features

  • Eight recipes — glow, burning, frozen, electric, embers, hologram, gold and damage, in SPRITE_SHADER_RECIPES, to add as they are or copy and change.
  • Room past the outline — a pad for every side, as a fraction of the sprite's size or in world units, so flames get room above and none below.
  • Silhouette helpers — srcAt, alphaAt, edgeAt and blurAt read the sprite and never a neighbouring atlas frame.
  • Noise built in — the same hash, value noise and four-octave fbm as backdrops.
  • Live params and colours — up to sixteen and four, set at add or later, and checked by name.
  • Tweens and fades on the game clock — they pause with the game and slow with its time scale.
  • Keeps the sprite's place — sort order, position, rotation, mirroring, tint, alpha and parent.
  • Checked up front — checkSpriteShader before drawing, and failure(name) for a device's compile error.
  • Same picture on both backends — WebGPU, and WebGL2 through the translator.

Good for

  • Power-ups — a hero bursting into flame or wrapped in electric arcs while the power lasts.
  • Boss states — an enraged glow, a frozen phase, and a damage pulse that eases in and out rather than strobing.
  • Key items and pickups — a breathing aura in the item's own shape, or a gold shine sweeping across it.
  • Deaths and exits — a sprite that burns away into rising embers as you tween its amount.
  • Sci-fi characters — a projected hologram with drifting scanlines and a slow bright sweep.
  • Tools and generated content — a shader a tool or a model wrote, checked before it reaches the screen.

Make it yours

Add a recipe as it is, override its params and colours when you add it, tween them in play, or copy its code and change it. A shader of your own is a few lines of WGSL with named params and colours, and its pad can be one number for every side or set side by side.

Two very different uses: every hit on the player tweens the damage recipe's hit param up and back down, so the flash eases in and out rather than blinking; a boss gets frozen for one phase, shown over a second as the ice forms and hidden again when it thaws, handing the sprite back to the plain path.

A quick look

Fire on the hero, tuned live, eased down and faded out:

import { SPRITE_SHADER_RECIPES } from '@phaser-ae/sprite-shaders';

const fire = game.spriteShaders.add(hero, SPRITE_SHADER_RECIPES.burning, { params: { height: 0.6 } });
fire.set({ params: { heat: 1.4 }, colors: { flame: '#ff6a00' } });   // live; throws on an unknown name
await fire.tween({ height: 0.3 }, { duration: 1.2, ease: 'easeOutCubic' });
await fire.hide({ duration: 0.6 });   // back to the plain sprite, which then costs nothing

Works with

  • render-auto — or render-webgpu or render-webgl2: the renderer's hand-off keeps the sprite in its sorted place.
  • effects-2d — eleven built-in looks that suit many sprites; a sprite carries one or the other, the one set last.
  • post — for a look over the whole frame.
  • backdrops — for a full-screen or overlay shader.
  • mesh-shaders — the same idea on a 3D object.

Good to know

  • A sprite with a shader leaves the batch: one draw call of its own over its padded quad, and edgeAt and blurAt read 25 texels each. Right for a few heroes, bosses and pickups, wrong for a crowd.
  • On WebGPU the first frame or two draw the plain sprite while a new snippet compiles, so the game never stalls on it.
  • While a shader is on, the sprite's deform, texture tiling and sprite-cutout threshold are not applied; its blend mode is.
  • Sizes and radii are world units, not screen pixels: use fractions of size for an effect that scales with the sprite.
  • It is 2D only.

More FX packs

Show all →