Phaser home
Log inCreate a game

← Expansion packsLook

Phaser AE

Vector Lines

Free packv3.0.0-62DLook

A line engine, not a draw-a-line call: masses of independent segments in one instanced draw, crisp at any scale, with the additive phosphor halo of a vector monitor. Ships, rocks, trails, star fields, text and HUDs all ride the same draw, and any outline can shatter in one call.

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

Released October 14, 2026 · updated October 20, 2026

Vector Lines: 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

One instance is one segment: two endpoints, a width, a colour at each end, a dash and a glow. The GPU expands it into a capsule and shades it with a signed-distance function, so a thousand independent lines are one draw call, antialiased at any size or rotation, with no textures and no resolution to run out of.

Retained shapes are what make it fast. A shape is a set of segments under one transform; its segment data is packed once and re-packed only when a shape is added, removed or edited. Each frame only the transform table uploads, so a hundred asteroids turning and flying cost a few hundred bytes. Immediate calls, seg, poly, arc, fill, disc and text, push per-frame lines into the same draw for aim lines, radar sweeps and debug overlays.

The details that usually go wrong are handled. Adjacent segments are cut on the angle bisector they share, so every pixel of an outline is painted once and a translucent outline does not bead at its corners. The halo is a separate pass over the finished line art, blurred at half resolution, so glows have no seams at the joints. Beam dwell makes the ends of strokes burn brighter and fatter by how sharply the line turns, as a real display's beam does.

Features

  • One instanced draw — width, two-colour gradient, dash, glow, beam dwell and depth on every segment.
  • Retained shapes — live x, y, rot, scale, alpha, glow, visible, pivot and wrap; restyle and setPoints change the look or the outline without rebuilding anything else.
  • Multi-part shapes — named parts with their own outline, style, face and offset, turning together under one transform.
  • Solid faces — flat, two-stop, multi-stop and radial fills that turn and fade with their outline, and fill and disc for translucent faces drawn once.
  • Colour ramps — a colour graded along a whole path, or 'rainbow', turned with rampShift for a colour cycle.
  • Screen wrap — ghost copies so a shape straddling an edge shows on both sides, and can be hit on either.
  • Shatter — shatter() breaks an outline into drifting, spinning, fading pieces; revive() brings it back whole.
  • Trails, star fields and bursts — tapering ribbons, drifting or warping star fields with streaks, and line-art particles in seven outlines.
  • Picking — contains, hit and hitAll test a point in each shape's own space, by its fill, its stroke or both.
  • Shape factories — rect, circle, star, capsule, ringSections, generatePolygon for irregular rocks and more, each built about its own origin.
  • HUD lines — screen: true draws immediate lines in screen pixels, halo included.
  • Replays — setRng seeds bursts and shatters so a replay matches.

Good for

  • Vector arcade shooters — rocks, ships and saucers that spin, wrap and shatter, in the style of Asteroids.
  • Neon arena and twin-stick games — glowing outlines, rainbow ramps, trails and bursts on every kill.
  • Lander and artillery games — a terrain line whose craters are blown with setPoints.
  • Space games — drifting parallax stars, or a warp tunnel flown into the screen.
  • Wireframe and tube shooters, in the style of Battlezone or Tempest, with the projection done by the vector packs and the lines drawn here.
  • HUDs and overlays — radar sweeps, aim lines, reticles, touch joysticks and debug drawing.
  • Physics toys — clean outlines of every body as it moves.

Make it yours

Every line takes a style: color and color2, alpha, width (under 1 is a hairline), glow, dash, dwell, z and screen. A shape adds its transform, fill, ramp, pivot, wrap and parts. Bursts set their count, outlines, speed, spread, spin, drag, gravity, shrink and colours; star fields their mode, layers, focal length, bend, spin and streaks; trails their length, widths, alphas and colours. The manifest options are glow (a multiplier over every halo), glowSize (how far halos reach, 16 px by default) and enabled.

Two very different games come from it. A monochrome arcade shooter: thin white outlines with a soft glow, rocks from generatePolygon that wrap at the screen edges and shatter when shot, and a drifting star field behind. A neon arena game: thick outlines graded with rainbow ramps that cycle with rampShift, translucent radial faces, ribbons behind every ship, multi-coloured bursts, and a reticle drawn in screen pixels over the top.

A quick look

A wrapping rock that spins and shatters, a rainbow star, and a warp field:

import { shapes } from '@phaser-ae/vector-2d';
const rock = game.vector.shape(shapes.generatePolygon(40, 10, 0.4), { x: 200, y: 150, glow: 1, wrap: { w: 800, h: 600 } });
rock.rot += 0.02;                                                  // live: only its transform uploads
game.vector.shape(shapes.star(5, 40, 18), { ramp: 'rainbow', glow: 1 });
game.vector.starfield({ mode: 'warp', streak: 0.05 });
if (rock.contains(shot.x, shot.y)) rock.shatter({ speed: 120, life: 1.2 });

Works with

  • core-vector — includes this pack with the vector font, art, hit tests, motion and maths: a whole vector game in one pack.
  • vector-font — the stroked display face that text() draws.
  • vector-art — named line-art shapes loaded from a file onto this layer.
  • vector-hit and vector-motion — collision against outlines and strokes, and thrust, gravity and screen wrap.
  • vector-wire, vector-tube and vector-terrain — wireframes, tube playfields and landscapes as line geometry.
  • vector-3d — line art in a 3D world, with real depth, instead.

Good to know

  • The layer draws in world space through the camera; screen: true is for immediate lines only, not retained shapes.
  • World vectors draw after the world's sprites and are never lit by 2D lighting; post effects do process them.
  • shatter is one-way: the shape removes itself when its last piece dies, and wrap ghosts are not drawn while it breaks. revive() brings it back whole.
  • Arcs take radians, a radial fill on a concave outline is only as smooth as its own vertices, and an irregular silhouette should be generated once at spawn, not every frame, or it shimmers.
  • Shapes, trails and star fields belong to the scene that made them and go when it ends.

More Look packs

Show all →