Curves and Plots

--- name: curves-and-paths description: "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 ``js // In a Scene's create() method: // 1. Create a Path starting at (50, 300) const path = this.add.path(50, 300); // 2. Add curves to the path path.lineTo(200, 100); path.splineTo([ new Phaser.Math.Vector2(300, 400), new Phaser.Math.Vector2(500, 200) ]); path.lineTo(700, 300); // 3. Draw the path using Graphics const graphics = this.add.graphics(); graphics.lineStyle(2, 0xffffff, 1); path.draw(graphics, 64); // 4. Create a PathFollower sprite that moves along the path const follower = this.add.follower(path, 50, 300, 'ship'); follower.startFollow({ duration: 5000, rotateToPath: true, repeat: -1, yoyo: true }); ` ## 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: `js const path = this.add.path(100, 500); path.lineTo(300, 100); // straight line path.cubicBezierTo(500, 100, 350, 50, 450, 50); // cubic bezier (endX, endY, cp1X, cp1Y, cp2X, cp2Y) path.quadraticBezierTo(700, 400, 600, 100); // quadratic bezier (endX, endY, cpX, cpY) path.splineTo([ // spline through points new Phaser.Math.Vector2(750, 300), new Phaser.Math.Vector2(600, 500) ]); path.ellipseTo(50, 80, 0, 270, false, 0); // ellipse arc (xRadius, yRadius, startAngle, endAngle, clockwise, rotation) path.circleTo(40); // shortcut for ellipseTo with equal radii and 0-360 // Jump to a new position without drawing (creates a gap) path.moveTo(400, 400); path.lineTo(500, 400); // Close the path by connecting end to start path.closePath(); ` ### Adding Standalone Curve Objects ``js const path = new Phaser.Curves.Path(0, 0); // Add pre-constructed curve objects const line = new Phaser.Curves.Line(new Phaser.Math.Vector2(0, 0), new Phaser.Math.Vector2(200, 200)); path.add(line); const spline = new Phaser.