skills.rest
kodingvibes
kodingvibesOFFICIAL
Explore all skills by this author →
WebsiteGitHub

curves-and-paths

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building smooth motion trajectories, drawing curved shapes, and animating sprites along predefined routes in Phaser 4 requires knowing the Curves API, Path container, and PathFollower component, which have subtle parameter orders and arc-length behaviors that are easy to get wrong. ## 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 Rendering: Retrieve evenly spaced points, tangents, lengths, and bounds, then draw paths with the Graphics object for debugging or visuals. - PathFollower Animation: Move sprites along paths with configurable duration, easing, rotation-to-path, repeat, and yoyo behavior driven by an internal tween. - Use Case: An enemy ship in a shoot-em-up needs to fly a looping patrol route. Build a Path with spline and line segments, then attach a PathFollower with rotateToPath enabled so the sprite faces its direction of travel. ## Quick Start Ask the AI to create a Phaser 4 path combining a line and a spline, draw it with Graphics, 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 Path with this.add.path, add curves with lineTo or splineTo, then call this.add.follower(path, x, y, texture) and startFollow with a duration. Enable rotateToPath in the config so the sprite faces its 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(graphics, pointsTotal) on a Graphics object with a lineStyle set. Note that cubicBezierTo takes the end point first when passing 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 for even spacing. On a Path, getPoint already accounts for arc length across the whole path.

Why is my Phaser spline curve behaving unexpectedly?▼

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

Can I change a PathFollower's path at runtime in Phaser?▼

Yes, call setPath with a new Path object on the follower. Passing a config object as the second argument automatically starts following the new path with those settings.

Why does my Phaser path length seem wrong after editing a curve?▼

Path caches curve lengths based on array length only, so modifying a curve's control points leaves stale values. Call path.updateArcLengths() to force recalculation of the cached lengths.

Related Skills

Explore More Software Engineering Skills→
WanderTheWeebWanderTheWeeb
1

loading-assets

Load external game assets into Phaser 4 global caches.

Community
Intermediate
assofohdzassofohdz
25

moss-physics

Integrate the Moss physics library into Subspace Infinity Java game client and server.

Community
Intermediate
dcl-regenesislabsdcl-regenesislabs

animations-tweens

Animate Decentraland entities with GLTF animations, code-based tweens, and sequences.

Official
Intermediate
tja688tja688

curves-and-paths

Create and animate geometric paths with splines, Bezier curves, and elliptical arcs in Phaser 4.

Community
Intermediate