curves-and-paths

Create and animate curves, paths, and path-following sprites in Phaser 4.

Updated Jul 13, 2026
One-click install
npx skills add https://github.com/russellmorgan/UnderConstruction --skill curves-and-paths-russellmorgan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: curves-and-paths
Source: https://github.com/russellmorgan/UnderConstruction/tree/main/.claude/skills/curves-and-paths
Command: npx skills add https://github.com/russellmorgan/UnderConstruction --skill curves-and-paths-russellmorgan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Working with Phaser 4's curve system involves many curve types, parameterization quirks, and PathFollower configuration details that are easy to get wrong, such as uneven point spacing or incorrect bezier argument order. ## Core Features & Use Cases - Path Construction: Build compound paths from lines, splines, cubic and quadratic beziers, and ellipse arcs using chained methods like lineTo, splineTo, and cubicBezierTo. - Point Sampling and Rendering: Extract evenly spaced points, tangents, lengths, and bounds from any curve, and draw paths onto Graphics objects for debugging or visuals. - PathFollower Animation: Make sprites automatically traverse a path with duration, easing, rotation-to-path, repeat, and yoyo controls via startFollow. - Use Case: An enemy ship in a shooter needs to fly a looping patrol route. Define a Path with spline and line segments, then attach a PathFollower with rotateToPath enabled so the sprite faces its direction of travel. ## Quick Start Show me how to create a Phaser 4 path with a spline and make a sprite follow it with auto-rotation.

Frequently Asked Questions about curves-and-paths

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a sprite follow a path in Phaser 4?▼

Create a Path with this.add.path, add curves with lineTo or splineTo, then create a follower via this.add.follower and call startFollow with a duration or config object. Enable rotateToPath to auto-rotate the sprite along the path direction.

How to draw a bezier curve with Phaser Graphics?▼

Add a CubicBezier or QuadraticBezier curve to a Path, then call path.draw(graphics, pointsTotal) after setting lineStyle on the Graphics object. Higher pointsTotal values produce smoother rendered curves.

What is the difference between getPoint and getPointAt in Phaser curves?▼

getPoint uses the raw curve parameter t, which gives unevenly 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.

Why is my Phaser cubicBezierTo curve in the wrong place?▼

When passing numbers, cubicBezierTo takes the end point first: cubicBezierTo(endX, endY, cp1X, cp1Y, cp2X, cp2Y). When passing Vector2 objects the order is control points first, then the end point.

Does Phaser PathFollower support easing and yoyo repeat?▼

Yes, startFollow passes its config to an internal tween counter, so all standard tween properties work including ease, repeat, yoyo, delay, hold, and onComplete callbacks. The tween is set to persist automatically.

Why does my Phaser spline curve behave unexpectedly?▼

The Spline curve uses Catmull-Rom interpolation, which works best with at least four control points. With fewer points the curve may not interpolate as expected, so add more control points to stabilize the shape.