skills.rest
travispwingo
travispwingoCOMMUNITY
Explore all skills by this author →
GitHub

curves-and-paths

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

Updated May 7, 2021
Search Tags:#game development#paths#phaser#curves#bezier#spline#path follower
One-click install
npx skills add https://github.com/travispwingo/travispwingo.github.io --skill curves-and-paths-travispwingo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: curves-and-paths
Source: https://github.com/travispwingo/travispwingo.github.io/tree/main/mario/docs/skills/curves-and-paths
Command: npx skills add https://github.com/travispwingo/travispwingo.github.io --skill curves-and-paths-travispwingo

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 are spread across multiple source modules and easy to misuse. ## Core Features & Use Cases - Path Composition: Chain lines, splines, cubic and quadratic beziers, and ellipse arcs into a single continuous 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 an enemy that patrols a winding route by creating a Path with spline and line segments, then attaching a PathFollower sprite with rotateToPath enabled and an infinite yoyo repeat. ## Quick Start Ask the AI to create a Phaser 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 create a follower via this.add.follower and call startFollow with a duration. Enable rotateToPath in the config to auto-rotate the sprite along the path direction.

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 with numbers takes the end point first, then the two control points.

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 not behaving as expected?▼

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, such as a duration, automatically starts following the new path.

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→
Raphe-devRaphe-dev

sprites-and-images

Create and manipulate Phaser 4 Sprites and Images with transforms, tint, alpha, origin, and depth.

Community
Intermediate
vudovnvudovn
8.2k

2d-games

Guides 2D game development covering sprites, tilemaps, physics, and camera systems.

Community
Basic
Raphe-devRaphe-dev

graphics-and-shapes

Draw shape primitives and graphics in Phaser 4 using Graphics and Shape objects.

Community
Advanced
fiandofiando
1

dev-phaser-physics-arcade

Implements velocity, collision, and gravity using Phaser 3 Arcade Physics.

Community
Intermediate