curves-and-paths

Generate Phaser 4 Paths and PathFollower sprite movement along curves.

Updated Feb 11, 2026
One-click install
npx skills add https://github.com/ArtRiv/game-topicos-especiais --skill curves-and-paths-artriv
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: curves-and-paths
Source: https://github.com/ArtRiv/game-topicos-especiais/tree/main/skills/curves-and-paths
Command: npx skills add https://github.com/ArtRiv/game-topicos-especiais --skill curves-and-paths-artriv

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you create smooth movement and rendering paths in Phaser by converting curve math into usable Path and PathFollower behaviors without manual point-by-point work.

Core Features & Use Cases

  • Path building from curves: Chain line, spline, cubic/quadratic Bezier, ellipse/circle, moveTo, and closePath operations into a single Phaser.Curves.Path.
  • Accurate point sampling: Retrieve points along a path using getPoints, getSpacedPoints (arc-length based), tangents, length, bounds, and curve-level data.
  • Sprite auto-following: Drive a Phaser.GameObjects.PathFollower with a Tween-backed PathConfig so sprites can move, rotate to path direction, repeat, and yoyo along the curve.
  • Use case: Create an enemy that smoothly travels an elliptical or Bezier route while rotating to match the curve direction, and dynamically redraw or retarget the path as gameplay changes.

Quick Start

Use the curves-and-paths skill to generate a Phaser 4 scene snippet that creates a path, draws it with Graphics, and starts a follower that traverses the path with rotateToPath 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 curved path in Phaser?

Use Phaser's PathFollower with startFollow and a Tween-backed PathConfig to drive sprite movement along curves. This enables deterministic traversal, rotateToPath alignment, and repeat or yoyo behaviors along the route.

What is the difference between getPoints and getSpacedPoints for Phaser paths?

getSpacedPoints samples points using arc-length semantics for even distribution, while getPoints divides curves by subdivision. Arc-length sampling ensures uniform spacing across spline, Bezier, and ellipse paths.

How do I build a Phaser path using Bezier and spline curves?

Construct a Phaser.Curves.Path by chaining moveTo, line, spline, cubic and quadratic Bezier, and ellipse curve operations. Use closePath to complete the geometry before sampling points or attaching a follower.

Can I rotate a sprite to match the direction of a Phaser curve?

Yes, enable rotateToPath in the PathFollower PathConfig to align sprite rotation with the curve tangent. Apply rotationOffset to fine-tune the alignment angle during Tween-driven path traversal.

Does Phaser path sampling support tangent, length, and bounds queries?

Yes, Phaser paths support tangent, length, and bounds queries. Use getPoint, getPointAt, and curve-level data functions to retrieve tangents, calculate total length, and determine geometric bounds for the path.

What is the best way to draw and redraw a Phaser path dynamically during gameplay?

Use Phaser Graphics to render the path and dynamically redraw or retarget the PathFollower as gameplay changes. This approach updates path geometry while maintaining smooth Tween-driven animation behavior.