curves-and-paths

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

465|41|Updated Aug 4, 2026
One-click install
npx skills add https://github.com/autonomous-ai/openharness --skill curves-and-paths-autonomous-ai
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: curves-and-paths
Source: https://github.com/autonomous-ai/openharness/tree/main/store/agents/phaser/skills/curves-and-paths
Command: npx skills add https://github.com/autonomous-ai/openharness --skill curves-and-paths-autonomous-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building smooth motion trajectories in Phaser 4 games requires understanding the Curves API, Path composition, and the PathFollower component, which have subtle behaviors like arc-length spacing and degree-versus-radian angle handling that commonly trip up developers. ## Core Features & Use Cases - Path Composition: Chain lines, splines, cubic and quadratic beziers, and ellipse arcs into a single compound Path using 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 configurable duration, easing, rotation-to-path, repeat, and yoyo behavior via startFollow. - Use Case: Build a tower defense game where enemy sprites follow a winding spline path across the map, rotating to face their direction of travel and looping with yoyo motion. ## Quick Start Ask the AI to create a Phaser 4 path from curves and make a sprite follow it with rotation enabled.

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 PathFollower with this.add.follower(path, x, y, texture), then call startFollow with a config containing duration, rotateToPath, repeat, and yoyo. The follower uses an internal tween to advance along the path each frame.

How to draw a curve or path in Phaser 4?

Build a Path with this.add.path(x, y), add curves via lineTo, splineTo, or cubicBezierTo, then call path.draw(graphics, pointsTotal) after setting a lineStyle on a Graphics object. Higher point counts produce smoother rendering.

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

getPoint(t) uses the raw curve parameter, which does not produce evenly spaced points on most curve types. getPointAt(u) maps through arc length for even spacing. On a Path, getPoint already accounts for arc length across the whole path.

Does Phaser PathFollower support easing and repeat options?

Yes, the startFollow config is passed to scene.tweens.addCounter internally, so all standard tween properties work including ease, repeat, yoyo, delay, hold, and onComplete callbacks. The tween is set to persist automatically.

Why is my Phaser ellipse curve rotated incorrectly?

Ellipse startAngle and endAngle are specified in degrees, but the rotation property is in radians while the angle property is in degrees. Mixing these units is the most common cause of unexpected ellipse orientation.

Why does my Phaser spline curve behave unexpectedly with few points?

The Spline curve uses Catmull-Rom interpolation, which works best with at least 4 control points. With fewer points the curve may not behave as expected, so add more control points or use a bezier curve instead.