Use this skill when working with curves and paths in Phaser 4. Covers splines, bezier curves, lines, ellipses, path followers, and mathematical curve types. Triggers on: curve, path, spline, bezier, path follower.

Curves and Paths Creating paths from curves, getting points along them, drawing them with Graphics, and making sprites follow paths automatically using PathFollower in Phaser 4. Key source paths: src/curves/ , src/curves/path/ , src/gameobjects/pathfollower/ , src/gameobjects/components/PathFollower.js Related skills: ../sprites and images/SKILL.md, ../graphics and shapes/SKILL.md, ../tweens/SKILL.md Quick Start Core Concepts Path A Phaser.Curves.Path is a container that combines multiple Curves into one continuous compound curve. Curves in a Path do not need to be connected end to end. Only the order of curves affects point calculations along the path. Created via factory: this.add.path(x, y) where x/y is the starting point. Key properties: curves array of Phaser.Curves.Curve objects in the Path startPoint Vector2 , the defined starting position autoClose boolean, if true getPoints() appends the first point at the end defaultDivisions number (default: 12), divisions per curve when calling getPoints() name string, empty by default, for developer use Curves All curve types extend Phaser.Curves.Curve (the base class). Every curve supports: getPoint(t, out) get a point at position t (0 1) based on curve parameterization getPointAt(u, out) get a point at position u (0 1) based on arc length (evenly spaced) getPoints(divisions, stepRate, out) array of points along the curve getSpacedPoints(divisions, stepRate, out) array of equidistant points by arc length getDistancePoints(distance) points spaced by pixel distance getLength() total arc length in pixels getBounds(out, accuracy) bounding Rectangle getTangent(t, out) / getTangentAt(u, out) unit tangent vector getStartPoint(out) / getEndPoint(out) first/last points getRandomPoint(out) random point on the curve draw(graphics, pointsTotal) render the curve onto a Graphics object active boolean, when false the parent Path skips this curve PathFollower A Phaser.GameObjects.PathFollower is a Sprite with the Components.PathFollower mixin. It uses an internal Tween (a number counter from 0 to 1) to advance along a Path each frame. Created via factory: this.add.follower(path, x, y, texture, frame) The PathFollower component provides: path the Phaser.Curves.Path being followed pathTween the internal Tween driving movement pathOffset Vector2 , offset added to path coordinates pathVector Vector2 , current position on the path pathDelta Vector2 , distance traveled since last frame rotateToPath boolean, auto rotate to face path direction pathRotationOffset number (degrees), added to auto rotation Common Patterns Creating Paths with Chained Curves Path has convenience methods that create curves starting from the previous end point: Adding Standalone Curve Objects Getting Points Along a Path Drawing Paths with Graphics PathFollower Sprite PathFollower with Simple Duration All Curve Types Curve Class Constructor Params Description Line Phaser.Curves.Line (p0, p1) Vector2 endpoints, or ([x0,y0,x1,y1]) Straight line segment between two points Spline Phaser.Curves.Spline (points) array of Vector2, flat numbers, or nested arrays Catmull Rom spline through control points CubicBezier Phaser.Curves.CubicBezier (p0, p1, p2, p3) or ([x0,y0,...x3,y3]) Cubic Bezier with start, 2 control points, end QuadraticBezier Phaser.Curves.QuadraticBezier (p0, p1, p2) or ([x0,y0,...x2,y2]) Quadratic Bezier with start, 1 control point, end Ellipse Phaser.Curves.Ellipse (x, y, xRadius, yRadius, startAngle, endAngle, clockwise, rotation) or config object Elliptical arc; angles in degrees; yRadius defaults to xRadius Ellipse Curve Properties The Ellipse curve has get/set properties for runtime modification: x , y center position xRadius , yRadius radii startAngle , endAngle in degrees (get/set convert to/from radians internally) clockwise boolean rotation in radians angle rotation in degrees (alternative to rotation ) setWidth(value) / setHeight(value) sets radius to value/2 API Quick Reference Path ( Phaser.Curves.Path ) API Type Description add(curve) method Append any Curve to the path lineTo(x, y) method Add a Line from current end point splineTo(points) method Add a Spline from current end point cubicBezierTo(x, y, cp1X, cp1Y, cp2X, cp2Y) method Add CubicBezier from current end point quadraticBezierTo(x, y, cpX, cpY) method Add QuadraticBezier from current end point ellipseTo(xR, yR, start, end, cw, rot) method Add Ellipse arc from current end point circleTo(radius, clockwise, rotation) method Shortcut for ellipseTo with equal radii moveTo(x, y) method Move end point without drawing (creates gap) closePath() method Add Line from end to start if not already closed getPoint(t, out) method Point at normalized position (0 1) on entire path getPoints(divisions, stepRate) method Array of points, divisions per curve getSpacedPoints(divisions) method Equidistant points along entire path getRandomPoint(out) method Random point anywhere on the path getStartPoint(out) method Path starting point getEndPoint(out) method Path ending point getTangent(t, out) method Unit tangent vector at position t getCurveAt(t) method Return the Curve at normalized position t getLength() method Total path length in pixels getCurveLengths() method Array of cumulative curve lengths getBounds(out, accuracy) method Bounding Rectangle draw(graphics, pointsTotal) method Draw all curves onto a Graphics object toJSON() / fromJSON(data) method Serialization updateArcLengths() method Force recalculation of cached lengths destroy() method Clear internal references Base Curve ( Phaser.Curves.Curve ) API Type Description getPoint(t, out) method Point at parameter t (0 1) abstract, each subclass implements getPointAt(u, out) method Point at arc length position u (0 1) evenly spaced getPoints(divisions, stepRate, out) method Array of points getSpacedPoints(divisions, stepRate, out) method Equidistant points by arc length getDistancePoints(distance) method Points spaced by pixel distance getLength() method Total curve arc length getTangent(t, out) / getTangentAt(u, out) method Unit tangent vector getTFromDistance(distance) method Convert pixel distance to t value draw(graphics, pointsTotal) method Render onto Graphics (default 32 points) getBounds(out, accuracy) method Bounding Rectangle active boolean When false, parent Path skips this curve defaultDivisions number Default 5 for standalone curves arcLengthDivisions number Precision for arc length calculations (default 100) PathFollower Component API Type Description setPath(path, config) method Set a new Path (optionally auto start) startFollow(config, startAt) method Begin following; config = duration number or PathConfig pauseFollow() method Pause movement resumeFollow() method Resume paused movement stopFollow() method Stop following isFollowing() method Returns true if actively moving on path setRotateToPath(value, offset) method Enable/disable auto rotation with offset path Path Current path reference pathTween Tween Internal tween driving movement pathOffset Vector2 Offset from path coordinates pathVector Vector2 Current position on the path pathDelta Vector2 Movement delta since last update rotateToPath boolean Auto rotate to path direction pathRotationOffset number Rotation offset in degrees PathConfig ( Phaser.Types.GameObjects.PathFollower.PathConfig ) Property Type Default Description duration number 1000 Time in ms to traverse the path from number 0 Start position on path (0 1) to number 1 End position on path (0 1) positionOnPath boolean false Snap follower to path start on begin rotateToPath boolean false Auto rotate to face path direction rotationOffset number 0 Degrees added to auto rotation startAt number 0 Initial seek position on path (0 1) The config also accepts all standard Tween properties: ease , repeat , yoyo , delay , hold , onComplete , etc. Gotchas 1. getPoint(t) vs getPointAt(u) on curves. getPoint uses the raw curve parameter t, which does not produce evenly spaced points on most curve types. getPointAt maps through arc length for even spacing. On a Path, getPoint already accounts for arc length across the whole path. 2. Path moveTo creates an inactive curve. The MoveTo pseudo curve has active: false and zero length. It only repositions the end point for the next curve. It does not draw anything and is skipped by getPoints() and draw() . 3. PathFollower uses a Tween internally. The startFollow config is passed to scene.tweens.addCounter() . All tween properties (ease, delay, repeat, yoyo, callbacks) work. The tween is set to persist: true automatically. 4. PathFollower offset behavior. When positionOnPath: false (default), the follower's current position becomes the offset from the path start. When positionOnPath: true , the follower snaps to the path's start point and the offset is zeroed. 5. Ellipse angles are in degrees. The constructor and startAngle / endAngle properties accept degrees. Internally they are stored as radians. The rotation property is in radians, but angle is in degrees. 6. closePath vs autoClose . closePath() adds an explicit Line curve from end to start. autoClose = true only affects getPoints() and getSpacedPoints() output by appending the first point, without adding a curve. 7. Cached lengths can go stale. getCurveLengths() caches results based on array length only. If you modify a curve's control points, call path.updateArcLengths() to force recalculation. 8. cubicBezierTo parameter order with numbers. When passing numbers: cubicBezierTo(endX, endY, cp1X, cp1Y, cp2X, cp2Y) . The end point comes first, not the control points. When passing Vector2 objects: cubicBezierTo(cp1, cp2, endPoint) . 9. Spline needs at least 4 points. The Catmull Rom interpolation used by Spline works best with 4+ points. With fewer points, the curve may not behave as expected. 10. Line curve arcLengthDivisions is 1. Unlike other curves (default 100), Line overrides this to 1 since a line is inherently uniform. No need to adjust it. Source File Map File Purpose src/curves/path/Path.js Path class combines multiple curves, factory registered as this.add.path src/curves/path/MoveTo.js MoveTo pseudo curve for creating gaps in paths src/curves/Curve.js Base Curve class shared methods for all curve types src/curves/LineCurve.js Line curve (two point segment) src/curves/SplineCurve.js Spline curve (Catmull Rom through multiple points) src/curves/CubicBezierCurve.js Cubic Bezier curve (4 control points) src/curves/QuadraticBezierCurve.js Quadratic Bezier curve (3 control points) src/curves/EllipseCurve.js Ellipse/arc curve with angle and rotation support src/gameobjects/pathfollower/PathFollower.js PathFollower Game Object (extends Sprite + PathFollower mixin) src/gameobjects/pathfollower/Path

curves-and-paths