curves-and-paths

Creates and animates curves, paths, and path-following sprites in Phaser 4.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Working with Phaser 4's curve system requires knowing the differences between curve types, arc-length versus parameterized point sampling, and the PathFollower tween configuration, which are easy to misuse without a reference. ## Core Features & Use Cases - Path Construction: Chain lines, splines, cubic and quadratic beziers, and ellipse arcs into compound paths using methods like lineTo, splineTo, and cubicBezierTo. - Point Sampling and Drawing: Retrieve points, tangents, lengths, and bounds from any curve, and render paths onto Graphics objects for debugging or visuals. - PathFollower Animation: Make sprites automatically traverse a path with configurable duration, easing, rotation, repeat, and yoyo behavior. - Use Case: Build an enemy movement route in a tower defense game by chaining spline and line segments into a Path, then spawning PathFollower sprites that traverse it with rotateToPath enabled. ## Quick Start Ask the AI to create a Phaser 4 path with a spline and a line, draw it with Graphics, and make a sprite follow it using startFollow.

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?

Create a Path with this.add.path, add curves with lineTo or splineTo, then create a follower with this.add.follower and call startFollow with a duration. Set rotateToPath to true so the sprite faces the direction of travel.

How to draw a bezier curve in Phaser 4?

Add a CubicBezier or QuadraticBezier curve to a Path using cubicBezierTo or quadraticBezierTo, then call path.draw with a Graphics object. Note that cubicBezierTo takes the end point first when passing raw numbers.

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

getPoint uses the raw curve parameter t, which does not produce evenly spaced points on most curve types. getPointAt maps through arc length, giving evenly spaced positions along the curve.

Why is my Phaser path length wrong after modifying a curve?

Path caches curve lengths based on array length only, so edits to control points leave stale values. Call path.updateArcLengths() to force recalculation after modifying any curve.

Does Phaser PathFollower support easing and repeat?

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