Vector Shatter · Expansion packs · Phaser AE

Vector Shatter

Free packv3.0.0-32DVector

The outline coming apart: break any world-space polygon into drifting, spinning line fragments that dim as they die. Three calls, shatter once, advance each frame, draw each frame, and the whole state is an array your game owns.

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

Released October 14, 2026 · updated October 20, 2026

What it does

shatterPolygon turns a polygon into one fragment per edge, each with its own position, drift velocity, spin and life. updateFragments advances the set by a time step, ages it and returns the survivors, so your array is the whole state. fragmentSegments turns the live set into world-space segments for the line renderer, each carrying the alpha its remaining life has reached, so a dying shard dims rather than blinking out.

How the fragments are drawn, their colour, width and glow, is left to the game: the pack hands back geometry, not pixels. That makes it the tool for an outline that is not already a shape on the vector layer: a glyph, a procedural burst, geometry from another system. For a retained shape that already exists on the layer, vector-2d's own shape.shatter() re-parents the shape's segments with no new geometry and removes the shape when the last piece dies.

Features

One fragment per edge — every side of the outline becomes its own drifting, spinning shard.
A tunable burst — speed (60 units a second by default), life (0.8 seconds) and spin (up to 2 radians a second) for each shatter.
Fade built in — every segment carries an alpha that falls from 1 to 0 as its fragment dies.
Plain data — fragments are plain objects in an array you own, to append to, filter or drive however you like.
Reproducible — pass the kernel's seeded random source as rnd and the same burst happens twice.

Good for

Vector arcade shooters — rocks, ships and saucers breaking apart, in the style of Asteroids.
Shields and barriers — a section of a shield breaking off when it is hit.
Titles and text — a word built with the vector font shattering on a game-over screen.
Procedural effects — a burst of lines from an outline made for the occasion.

Make it yours

Each shatter takes its own speed, life and spin, so a small rock can burst fast and briefly while a mothership drifts apart slowly over seconds. Because the fragments are data, the game decides the rest: draw them thin and bright with a glow, colour them by their alpha, change their velocities to add a pull, or skip some entirely. One game appends each destroyed rock's shards to a single shared array and draws them all in one pass; another shatters the strokes of its title with a seeded rnd, so its attract mode breaks the same way every time.

Works with

vector-2d — draws the segments, and has its own shape.shatter() for shapes already on the layer.
vector-font — words and titles whose strokes can be shattered.
core-vector — includes this pack with the rest of the vector kit.

Good to know