skills.rest
mudman1986
mudman1986COMMUNITY
Explore all skills by this author →
GitHub

curves-and-paths

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

Updated Jun 10, 2026
Search Tags:#game development#paths#phaser#curves#bezier#spline#path follower
One-click install
npx skills add https://github.com/mudman1986/quarterless --skill curves-and-paths-mudman1986
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: curves-and-paths
Source: https://github.com/mudman1986/quarterless/tree/main/.github/skills/curves-and-paths
Command: npx skills add https://github.com/mudman1986/quarterless --skill curves-and-paths-mudman1986

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building smooth motion along splines, bezier curves, and compound paths in Phaser 4 requires knowing the Curves API, the Path container, and the PathFollower component, which are easy to misuse without a consolidated reference. ## Core Features & Use Cases - Path Construction: Chain lines, splines, cubic and quadratic beziers, and ellipse arcs into a single compound Path with methods like lineTo, splineTo, and closePath. - Point Sampling and Drawing: Retrieve points, tangents, lengths, and bounds along any curve, and render paths with the Graphics object for debugging or visuals. - PathFollower Animation: Make sprites automatically follow a path with duration, easing, repeat, yoyo, and rotate-to-path options driven by an internal tween. - Use Case: An enemy ship in a shooter needs to fly a looping patrol route. Build a Path from spline and line segments, then call startFollow with rotateToPath enabled so the sprite traverses the route while facing its direction of travel. ## Quick Start Ask the AI to create a Phaser path from a few curve segments 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, repeat, and rotateToPath. The follower uses an internal tween to advance along the path each frame.

How to draw a spline or bezier curve in Phaser 4?▼

Build a Path with this.add.path(x, y), then chain splineTo, cubicBezierTo, or quadraticBezierTo to add curve segments. Render it by calling path.draw(graphics, pointsTotal) on a Graphics object with a lineStyle set.

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 follower not rotating toward the path direction?▼

Auto-rotation requires rotateToPath: true in the startFollow config or calling setRotateToPath(true, offset). Use rotationOffset in degrees if your sprite texture faces a direction other than the default.

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

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

Related Skills

Explore More Software Engineering Skills→
AhmedAbdelmoatyAhmedAbdelmoaty

phaser4-gamedev

Build and migrate Phaser 4 2D browser games with rendering and asset validation.

Community
Advanced
vudovnvudovn
8.1k

2d-games

Design 2D game systems for sprites, tilemaps, physics, and camera control.

Community
Basic
arnaudruffinarnaudruffin

curves-and-paths

Create and manipulate curves and paths in Phaser 4.

Community
Intermediate
bingeli1379bingeli1379
2

godot-player-controller

Construct and manipulate Godot 3D and 2D character movement.

Community
Intermediate