Phaser home
Log inCreate a game

← Expansion packsLogic

Phaser AE

Chained path notation

Free packv3.0.0-02DLogic

A route authored as data: a start point and a chain of segments, each picking up where the last left off. Enemy attack runs, patrol routes and racing lines live in a level file or a wave table instead of in code, and move at an even speed once baked.

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

Released October 19, 2026

Chained path notation: 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.

The pack

pathNotation

function pathNotation(): Pack<{ pathNotation: PathNotationApi }>

The path-notation pack: routes authored as chained segments in plain data, baked for even speed. Pure maths.

Classes

Path

class Path

A 2D path: curve segments chained into one constant-speed route, baked once.

const swoop = new Path({
  start: [400, 40],
  segments: [
    { cubic: [[300, 40], [220, 200], [120, 200]], ease: 'easeOutQuad' },
    { wave: { to: [-20, 120], amplitude: 18, cycles: 2 } },
  ],
});
const p = swoop.getPoint(0.5);          // halfway ALONG the route (by distance)
sprite.x = p.x; sprite.y = p.y;
sprite.rot = swoop.getAngle(0.5);       // facing its direction of travel

getPoint(t) is O(log samples) — a binary search over the baked table — so hundreds of followers per frame are cheap.

  • readonly length: number — Total geometric length of the path, in pixels.
  • constructor(data: PathData, options: PathOptions = {})
  • static fromJSON(json: string | PathData, options: PathOptions = {}): Path — Build a Path from a JSON string or an already-parsed data object.
  • getPoint(t: number, out: Vec2 = { x: 0, y: 0 }): Vec2 — The point at t (0 = start, 1 = end) measured BY DISTANCE along the path (constant speed unless eased). Pass out to avoid allocating.
  • getAngle(t: number): number — The direction of travel at t, in radians (atan2 convention — feed it straight to sprite.rot so art faces along the path).

Types

PathData

interface PathData

The plain-data path notation — JSON-friendly: author it inline, in config tables, or load it with loadJson.

  • start: PathPoint — Where the path begins, [x, y].
  • segments: PathSegmentData[] — The chained segments, each continuing from the previous end point.
  • ease?: PathEase — Ease applied across the WHOLE path's travel (on top of per-segment eases).

PathEase

type PathEase = EaseName | EaseFn

An ease across a segment or a whole path: a name, or your own function.

PathNotationApi

interface PathNotationApi

game.pathNotation: the chained path notation.

  • Path: typeof Path — A route baked from its plain-data notation; Path.fromJSON takes a string too.

PathOptions

interface PathOptions

Parse-time options — transform the authored coordinates once, at the bake.

  • flipX?: number — Mirror every x about this vertical axis (flipX: W / 2 flips a wave to the other side of the screen).
  • flipY?: number — Mirror every y about this horizontal axis.
  • offset?: PathPoint — Translate the whole path by [dx, dy].
  • samplesPerSegment?: number — Samples baked per segment (the arc-length table resolution). Default 48 — raise for very long or very curly segments.

PathPoint

type PathPoint = [number, number]

A point in the data notation — [x, y].

PathSegmentData

interface PathSegmentData

One segment of the plain-data path notation. Every segment continues from the path's current point; coordinates are absolute (transform at parse time via PathOptions). Exactly one of the shape keys per segment.

  • line?: PathPoint — Straight line to [x, y].
  • quad?: [PathPoint, PathPoint] — Quadratic bézier: [control, to].
  • cubic?: [PathPoint, PathPoint, PathPoint] — Cubic bézier: [control1, control2, to].
  • arc?: { center: PathPoint; to: number; ry?: number } — Elliptical arc about a centre. Starts at the current point (start angle and x-radius are derived from it); sweeps to absolute angle to (DEGREES — beyond ±360 keeps orbiting). ry defaults to the derived x-radius (circle).
  • spiral?: { center: PathPoint; turns: number; endRadius: number } — Spiral about a centre: like arc, but the radius glides to endRadius over turns full revolutions (positive = clockwise, negative = counter).
  • wave?: { to: PathPoint; amplitude: number; cycles: number; shape?: 'sine' | 'triangle' } — Sinusoidal wave: ride the straight chord to to while oscillating perpendicular by amplitude px over cycles full waves. shape: 'triangle' makes it a zigzag.
  • ease?: PathEase — Ease applied across THIS segment's travel (name or function).