curves-and-paths

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Curves and Paths

曲线与路径

Creating paths from curves, getting points along them, drawing them with Graphics, and making sprites follow paths automatically using PathFollower in Phaser 4.

Key source paths:

src/curves/

src/curves/path/

src/gameobjects/pathfollower/

src/gameobjects/components/PathFollower.js

Related skills: ../sprites-and-images/SKILL.md, ../graphics-and-shapes/SKILL.md, ../tweens/SKILL.md

在Phaser 4中，从曲线创建路径、获取路径上的点、使用Graphics绘制路径，以及利用PathFollower让精灵自动沿路径移动。

核心源码路径：

src/curves/

src/curves/path/

src/gameobjects/pathfollower/

src/gameobjects/components/PathFollower.js

相关技能： ../sprites-and-images/SKILL.md, ../graphics-and-shapes/SKILL.md, ../tweens/SKILL.md

Quick Start

快速开始

// In a Scene's create() method:

// 1. Create a Path starting at (50, 300)
const path = this.add.path(50, 300);

// 2. Add curves to the path
path.lineTo(200, 100);
path.splineTo([ new Phaser.Math.Vector2(300, 400), new Phaser.Math.Vector2(500, 200) ]);
path.lineTo(700, 300);

// 3. Draw the path using Graphics
const graphics = this.add.graphics();
graphics.lineStyle(2, 0xffffff, 1);
path.draw(graphics, 64);

// 4. Create a PathFollower sprite that moves along the path
const follower = this.add.follower(path, 50, 300, 'ship');
follower.startFollow({
    duration: 5000,
    rotateToPath: true,
    repeat: -1,
    yoyo: true
});

// 在场景的create()方法中：

// 1. 创建一个起始点为(50, 300)的Path
const path = this.add.path(50, 300);

// 2. 向路径中添加曲线
path.lineTo(200, 100);
path.splineTo([ new Phaser.Math.Vector2(300, 400), new Phaser.Math.Vector2(500, 200) ]);
path.lineTo(700, 300);

// 3. 使用Graphics绘制路径
const graphics = this.add.graphics();
graphics.lineStyle(2, 0xffffff, 1);
path.draw(graphics, 64);

// 4. 创建一个沿路径移动的PathFollower精灵
const follower = this.add.follower(path, 50, 300, 'ship');
follower.startFollow({
    duration: 5000,
    rotateToPath: true,
    repeat: -1,
    yoyo: true
});

Core Concepts

核心概念

Path

Phaser.Curves.Path

is a container that combines multiple Curves into one continuous compound curve. Curves in a Path do not need to be connected end-to-end. Only the order of curves affects point calculations along the path.

Created via factory:

this.add.path(x, y)

where x/y is the starting point.

Key properties:

```
curves
```
-- array of
```
Phaser.Curves.Curve
```
objects in the Path
```
startPoint
```
--
```
Vector2
```
, the defined starting position
```
autoClose
```
-- boolean, if true
```
getPoints()
```
appends the first point at the end
```
defaultDivisions
```
-- number (default: 12), divisions per curve when calling
```
getPoints()
```
```
name
```
-- string, empty by default, for developer use

Phaser.Curves.Path

是一个容器，可将多条曲线组合成一条连续的复合曲线。路径中的曲线无需首尾相连，仅曲线的顺序会影响路径上的点计算。

通过工厂方法创建：

this.add.path(x, y)

，其中x/y为起始点。

关键属性：

```
curves
```
-- 路径中
```
Phaser.Curves.Curve
```
对象的数组
```
startPoint
```
--
```
Vector2
```
类型，定义的起始位置
```
autoClose
```
-- 布尔值，若为true，
```
getPoints()
```
会在末尾追加第一个点
```
defaultDivisions
```
-- 数字（默认值：12），调用
```
getPoints()
```
时每条曲线的分段数
```
name
```
-- 字符串，默认为空，供开发者使用

Curves

曲线

All curve types extend

Phaser.Curves.Curve

(the base class). Every curve supports:

```
getPoint(t, out)
```
-- get a point at position t (0-1) based on curve parameterization
```
getPointAt(u, out)
```
-- get a point at position u (0-1) based on arc length (evenly spaced)
```
getPoints(divisions, stepRate, out)
```
-- array of points along the curve
```
getSpacedPoints(divisions, stepRate, out)
```
-- array of equidistant points by arc length
```
getDistancePoints(distance)
```
-- points spaced by pixel distance
```
getLength()
```
-- total arc length in pixels
```
getBounds(out, accuracy)
```
-- bounding Rectangle
```
getTangent(t, out)
```
/
```
getTangentAt(u, out)
```
-- unit tangent vector
```
getStartPoint(out)
```
/
```
getEndPoint(out)
```
-- first/last points
```
getRandomPoint(out)
```
-- random point on the curve
```
draw(graphics, pointsTotal)
```
-- render the curve onto a Graphics object
```
active
```
-- boolean, when false the parent Path skips this curve

所有曲线类型都继承自

Phaser.Curves.Curve

（基类）。每条曲线都支持：

```
getPoint(t, out)
```
-- 根据曲线参数化获取位置t（0-1）处的点
```
getPointAt(u, out)
```
-- 根据弧长获取位置u（0-1）处的点（均匀分布）
```
getPoints(divisions, stepRate, out)
```
-- 沿曲线分布的点数组

getSpacedPoints(divisions, stepRate, out)

-- 按弧长等距分布的点数组

```
getDistancePoints(distance)
```
-- 按像素距离间隔分布的点
```
getLength()
```
-- 总弧长（以像素为单位）
```
getBounds(out, accuracy)
```
-- 边界矩形
```
getTangent(t, out)
```
/
```
getTangentAt(u, out)
```
-- 单位切向量
```
getStartPoint(out)
```
/
```
getEndPoint(out)
```
-- 第一个/最后一个点
```
getRandomPoint(out)
```
-- 曲线上的随机点
```
draw(graphics, pointsTotal)
```
-- 将曲线渲染到Graphics对象上
```
active
```
-- 布尔值，若为false，父路径会跳过此曲线

PathFollower

Phaser.GameObjects.PathFollower

is a Sprite with the

Components.PathFollower

mixin. It uses an internal Tween (a number counter from 0 to 1) to advance along a Path each frame.

Created via factory:

this.add.follower(path, x, y, texture, frame)

The PathFollower component provides:

```
path
```
-- the
```
Phaser.Curves.Path
```
being followed
```
pathTween
```
-- the internal Tween driving movement
```
pathOffset
```
--
```
Vector2
```
, offset added to path coordinates
```
pathVector
```
--
```
Vector2
```
, current position on the path
```
pathDelta
```
--
```
Vector2
```
, distance traveled since last frame
```
rotateToPath
```
-- boolean, auto-rotate to face path direction
```
pathRotationOffset
```
-- number (degrees), added to auto-rotation

Phaser.GameObjects.PathFollower

是一个包含

Components.PathFollower

混合类的Sprite。它使用内部Tween（一个从0到1的数字计数器）来逐帧沿路径前进。

通过工厂方法创建：

this.add.follower(path, x, y, texture, frame)

PathFollower组件提供：

```
path
```
-- 正在跟随的
```
Phaser.Curves.Path
```
```
pathTween
```
-- 驱动移动的内部Tween
```
pathOffset
```
--
```
Vector2
```
类型，添加到路径坐标的偏移量
```
pathVector
```
--
```
Vector2
```
类型，路径上的当前位置
```
pathDelta
```
--
```
Vector2
```
类型，自上一帧以来移动的距离
```
rotateToPath
```
-- 布尔值，自动旋转以面向路径方向
```
pathRotationOffset
```
-- 数字（度数），添加到自动旋转的偏移量

Common Patterns

常见模式

Creating Paths with Chained Curves

使用链式曲线创建路径

Path has convenience methods that create curves starting from the previous end point:

const path = this.add.path(100, 500);

path.lineTo(300, 100);                          // straight line
path.cubicBezierTo(500, 100, 350, 50, 450, 50); // cubic bezier (endX, endY, cp1X, cp1Y, cp2X, cp2Y)
path.quadraticBezierTo(700, 400, 600, 100);     // quadratic bezier (endX, endY, cpX, cpY)
path.splineTo([                                  // spline through points
    new Phaser.Math.Vector2(750, 300),
    new Phaser.Math.Vector2(600, 500)
]);
path.ellipseTo(50, 80, 0, 270, false, 0);       // ellipse arc (xRadius, yRadius, startAngle, endAngle, clockwise, rotation)
path.circleTo(40);                               // shortcut for ellipseTo with equal radii and 0-360

// Jump to a new position without drawing (creates a gap)
path.moveTo(400, 400);
path.lineTo(500, 400);

// Close the path by connecting end to start
path.closePath();

Path提供了便捷方法，可从之前的终点创建曲线：

const path = this.add.path(100, 500);

path.lineTo(300, 100);                          // 直线
path.cubicBezierTo(500, 100, 350, 50, 450, 50); // 三次贝塞尔曲线（终点X, 终点Y, 控制点1X, 控制点1Y, 控制点2X, 控制点2Y）
path.quadraticBezierTo(700, 400, 600, 100);     // 二次贝塞尔曲线（终点X, 终点Y, 控制点X, 控制点Y）
path.splineTo([                                  // 穿过多个点的样条曲线
    new Phaser.Math.Vector2(750, 300),
    new Phaser.Math.Vector2(600, 500)
]);
path.ellipseTo(50, 80, 0, 270, false, 0);       // 椭圆弧（X半径, Y半径, 起始角度, 结束角度, 顺时针, 旋转角度）
path.circleTo(40);                               // 半径相等且角度范围0-360的ellipseTo快捷方式

// 跳转到新位置而不绘制（创建间隙）
path.moveTo(400, 400);
path.lineTo(500, 400);

// 通过连接终点与起点闭合路径
path.closePath();

Adding Standalone Curve Objects

添加独立曲线对象

const path = new Phaser.Curves.Path(0, 0);

// Add pre-constructed curve objects
const line = new Phaser.Curves.Line(new Phaser.Math.Vector2(0, 0), new Phaser.Math.Vector2(200, 200));
path.add(line);

const spline = new Phaser.Curves.Spline([ 200, 200, 300, 100, 400, 300 ]);
path.add(spline);

const ellipse = new Phaser.Curves.Ellipse(400, 300, 100, 60, 0, 360, false, 0);
path.add(ellipse);

const path = new Phaser.Curves.Path(0, 0);

// 添加预构造的曲线对象
const line = new Phaser.Curves.Line(new Phaser.Math.Vector2(0, 0), new Phaser.Math.Vector2(200, 200));
path.add(line);

const spline = new Phaser.Curves.Spline([ 200, 200, 300, 100, 400, 300 ]);
path.add(spline);

const ellipse = new Phaser.Curves.Ellipse(400, 300, 100, 60, 0, 360, false, 0);
path.add(ellipse);

Getting Points Along a Path

获取路径上的点

// Array of points (uses defaultDivisions per curve)
const points = path.getPoints();

// With explicit divisions per curve
const detailed = path.getPoints(32);

// Equally spaced points along the entire path
const spaced = path.getSpacedPoints(100);

// Single point at normalized position (0-1)
const midpoint = path.getPoint(0.5);

// Tangent vector at a position
const tangent = path.getTangent(0.5);

// Total path length in pixels
const length = path.getLength();

// Bounding rectangle
const bounds = path.getBounds();

// 点数组（使用每条曲线的defaultDivisions）
const points = path.getPoints();

// 指定每条曲线的分段数
const detailed = path.getPoints(32);

// 沿整个路径等距分布的点
const spaced = path.getSpacedPoints(100);

// 归一化位置（0-1）处的单个点
const midpoint = path.getPoint(0.5);

// 某位置的切向量
const tangent = path.getTangent(0.5);

// 路径总长度（以像素为单位）
const length = path.getLength();

// 边界矩形
const bounds = path.getBounds();

Drawing Paths with Graphics

使用Graphics绘制路径

const graphics = this.add.graphics();

// Draw entire path
graphics.lineStyle(2, 0x00ff00, 1);
path.draw(graphics, 64); // 64 = points per curve for smoothness

// Draw individual curves
graphics.lineStyle(1, 0xff0000, 1);
path.curves[0].draw(graphics, 32);

// Draw debug points
const points = path.getSpacedPoints(50);
points.forEach(p => {
    graphics.fillStyle(0xffff00, 1);
    graphics.fillCircle(p.x, p.y, 3);
});

const graphics = this.add.graphics();

// 绘制整个路径
graphics.lineStyle(2, 0x00ff00, 1);
path.draw(graphics, 64); // 64 = 每条曲线的点数，用于保证平滑度

// 绘制单个曲线
graphics.lineStyle(1, 0xff0000, 1);
path.curves[0].draw(graphics, 32);

// 绘制调试点
const points = path.getSpacedPoints(50);
points.forEach(p => {
    graphics.fillStyle(0xffff00, 1);
    graphics.fillCircle(p.x, p.y, 3);
});

PathFollower Sprite

PathFollower精灵

const path = this.add.path(100, 200);
path.lineTo(400, 400);
path.lineTo(700, 200);

// Create follower
const enemy = this.add.follower(path, 100, 200, 'enemy');

// Start following with config
enemy.startFollow({
    duration: 3000,       // ms to traverse path
    positionOnPath: true, // snap to path start position
    rotateToPath: true,   // auto-rotate to face direction
    rotationOffset: 90,   // offset added to auto-rotation (degrees)
    repeat: -1,           // -1 = infinite repeat
    yoyo: true,           // reverse on each repeat
    from: 0,              // start position on path (0-1)
    to: 1,                // end position on path (0-1)
    startAt: 0,           // initial seek position
    ease: 'Sine.easeInOut' // any valid Phaser ease
});

// Control during playback
enemy.pauseFollow();
enemy.resumeFollow();
enemy.stopFollow();
enemy.isFollowing(); // returns boolean

// Change path at runtime
enemy.setPath(newPath);
enemy.setPath(newPath, { duration: 2000 }); // auto-starts

// Set rotation independently
enemy.setRotateToPath(true, 90); // (value, offsetDegrees)

const path = this.add.path(100, 200);
path.lineTo(400, 400);
path.lineTo(700, 200);

// 创建跟随器
const enemy = this.add.follower(path, 100, 200, 'enemy');

// 配置并开始跟随
enemy.startFollow({
    duration: 3000,       // 遍历路径的毫秒数
    positionOnPath: true, // 对齐到路径起始位置
    rotateToPath: true,   // 自动旋转以面向移动方向
    rotationOffset: 90,   // 添加到自动旋转的偏移量（度数）
    repeat: -1,           // -1 = 无限重复
    yoyo: true,           // 每次重复时反向移动
    from: 0,              // 路径上的起始位置（0-1）
    to: 1,                // 路径上的结束位置（0-1）
    startAt: 0,           // 初始定位位置
    ease: 'Sine.easeInOut' // 任何有效的Phaser缓动函数
});

// 播放期间控制
enemy.pauseFollow();
enemy.resumeFollow();
enemy.stopFollow();
enemy.isFollowing(); // 返回布尔值

// 运行时更改路径
enemy.setPath(newPath);
enemy.setPath(newPath, { duration: 2000 }); // 自动开始跟随

// 独立设置旋转
enemy.setRotateToPath(true, 90); // (是否开启, 偏移度数)

PathFollower with Simple Duration

仅指定时长的PathFollower

// Shorthand: pass just a duration number
enemy.startFollow(5000);

// Equivalent to:
enemy.startFollow({ duration: 5000 });

// 简写：仅传入时长数字
enemy.startFollow(5000);

// 等同于：
enemy.startFollow({ duration: 5000 });

All Curve Types

所有曲线类型

Curve	Class	Constructor Params	Description
Line	`Phaser.Curves.Line`	`(p0, p1)` Vector2 endpoints, or `([x0,y0,x1,y1])`	Straight line segment between two points
Spline	`Phaser.Curves.Spline`	`(points)` array of Vector2, flat numbers, or nested arrays	Catmull-Rom spline through control points
CubicBezier	`Phaser.Curves.CubicBezier`	`(p0, p1, p2, p3)` or `([x0,y0,...x3,y3])`	Cubic Bezier with start, 2 control points, end
QuadraticBezier	`Phaser.Curves.QuadraticBezier`	`(p0, p1, p2)` or `([x0,y0,...x2,y2])`	Quadratic Bezier with start, 1 control point, end
Ellipse	`Phaser.Curves.Ellipse`	`(x, y, xRadius, yRadius, startAngle, endAngle, clockwise, rotation)` or config object	Elliptical arc; angles in degrees; yRadius defaults to xRadius

曲线	类	构造参数	描述
直线	`Phaser.Curves.Line`	`(p0, p1)` Vector2端点，或 `([x0,y0,x1,y1])`	两点之间的直线段
样条曲线	`Phaser.Curves.Spline`	`(points)` Vector2数组、扁平化数字数组或嵌套数组	穿过控制点的Catmull-Rom样条曲线
三次贝塞尔曲线	`Phaser.Curves.CubicBezier`	`(p0, p1, p2, p3)` 或 `([x0,y0,...x3,y3])`	包含起点、2个控制点和终点的三次贝塞尔曲线
二次贝塞尔曲线	`Phaser.Curves.QuadraticBezier`	`(p0, p1, p2)` 或 `([x0,y0,...x2,y2])`	包含起点、1个控制点和终点的二次贝塞尔曲线
椭圆	`Phaser.Curves.Ellipse`	`(x, y, xRadius, yRadius, startAngle, endAngle, clockwise, rotation)` 或配置对象	椭圆弧；角度以度数为单位；Y半径默认等于X半径

Ellipse Curve Properties

椭圆曲线属性

The Ellipse curve has get/set properties for runtime modification:

```
x
```
,
```
y
```
-- center position
```
xRadius
```
,
```
yRadius
```
-- radii
```
startAngle
```
,
```
endAngle
```
-- in degrees (get/set convert to/from radians internally)
```
clockwise
```
-- boolean
```
rotation
```
-- in radians
```
angle
```
-- rotation in degrees (alternative to
```
rotation
```
)
```
setWidth(value)
```
/
```
setHeight(value)
```
-- sets radius to value/2

椭圆曲线支持通过get/set属性在运行时修改：

```
x
```
,
```
y
```
-- 中心位置
```
xRadius
```
,
```
yRadius
```
-- 半径
```
startAngle
```
,
```
endAngle
```
-- 度数（get/set会在内部与弧度互相转换）
```
clockwise
```
-- 布尔值
```
rotation
```
-- 弧度
```
angle
```
-- 旋转角度（度数，
```
rotation
```
的替代属性）
```
setWidth(value)
```
/
```
setHeight(value)
```
-- 将半径设置为value/2

API Quick Reference

API快速参考

Path (

Phaser.Curves.Path

)

Path（

Phaser.Curves.Path

）

API	Type	Description
`add(curve)`	method	Append any Curve to the path
`lineTo(x, y)`	method	Add a Line from current end point
`splineTo(points)`	method	Add a Spline from current end point
`cubicBezierTo(x, y, cp1X, cp1Y, cp2X, cp2Y)`	method	Add CubicBezier from current end point
`quadraticBezierTo(x, y, cpX, cpY)`	method	Add QuadraticBezier from current end point
`ellipseTo(xR, yR, start, end, cw, rot)`	method	Add Ellipse arc from current end point
`circleTo(radius, clockwise, rotation)`	method	Shortcut for ellipseTo with equal radii
`moveTo(x, y)`	method	Move end point without drawing (creates gap)
`closePath()`	method	Add Line from end to start if not already closed
`getPoint(t, out)`	method	Point at normalized position (0-1) on entire path
`getPoints(divisions, stepRate)`	method	Array of points, divisions per curve
`getSpacedPoints(divisions)`	method	Equidistant points along entire path
`getRandomPoint(out)`	method	Random point anywhere on the path
`getStartPoint(out)`	method	Path starting point
`getEndPoint(out)`	method	Path ending point
`getTangent(t, out)`	method	Unit tangent vector at position t
`getCurveAt(t)`	method	Return the Curve at normalized position t
`getLength()`	method	Total path length in pixels
`getCurveLengths()`	method	Array of cumulative curve lengths
`getBounds(out, accuracy)`	method	Bounding Rectangle
`draw(graphics, pointsTotal)`	method	Draw all curves onto a Graphics object
`toJSON()` / `fromJSON(data)`	method	Serialization
`updateArcLengths()`	method	Force recalculation of cached lengths
`destroy()`	method	Clear internal references

API	类型	描述
`add(curve)`	方法	向路径中追加任意曲线
`lineTo(x, y)`	方法	从当前终点添加一条直线
`splineTo(points)`	方法	从当前终点添加一条样条曲线
`cubicBezierTo(x, y, cp1X, cp1Y, cp2X, cp2Y)`	方法	从当前终点添加一条三次贝塞尔曲线
`quadraticBezierTo(x, y, cpX, cpY)`	方法	从当前终点添加一条二次贝塞尔曲线
`ellipseTo(xR, yR, start, end, cw, rot)`	方法	从当前终点添加一段椭圆弧
`circleTo(radius, clockwise, rotation)`	方法	半径相等的ellipseTo快捷方式
`moveTo(x, y)`	方法	移动终点而不绘制（创建间隙）
`closePath()`	方法	如果尚未闭合，添加一条从终点到起点的直线
`getPoint(t, out)`	方法	整个路径上归一化位置（0-1）处的点
`getPoints(divisions, stepRate)`	方法	点数组，按每条曲线的分段数生成
`getSpacedPoints(divisions)`	方法	沿整个路径等距分布的点
`getRandomPoint(out)`	方法	路径上任意位置的随机点
`getStartPoint(out)`	方法	路径起始点
`getEndPoint(out)`	方法	路径终点
`getTangent(t, out)`	方法	位置t处的单位切向量
`getCurveAt(t)`	方法	返回归一化位置t处的曲线
`getLength()`	方法	路径总长度（以像素为单位）
`getCurveLengths()`	方法	累积曲线长度的数组
`getBounds(out, accuracy)`	方法	边界矩形
`draw(graphics, pointsTotal)`	方法	将所有曲线绘制到Graphics对象上
`toJSON()` / `fromJSON(data)`	方法	序列化与反序列化
`updateArcLengths()`	方法	强制重新计算缓存的长度
`destroy()`	方法	清除内部引用

Base Curve (

Phaser.Curves.Curve

)

基础曲线（

Phaser.Curves.Curve

）

API	Type	Description
`getPoint(t, out)`	method	Point at parameter t (0-1) -- abstract, each subclass implements
`getPointAt(u, out)`	method	Point at arc-length position u (0-1) -- evenly spaced
`getPoints(divisions, stepRate, out)`	method	Array of points
`getSpacedPoints(divisions, stepRate, out)`	method	Equidistant points by arc length
`getDistancePoints(distance)`	method	Points spaced by pixel distance
`getLength()`	method	Total curve arc length
`getTangent(t, out)` / `getTangentAt(u, out)`	method	Unit tangent vector
`getTFromDistance(distance)`	method	Convert pixel distance to t value
`draw(graphics, pointsTotal)`	method	Render onto Graphics (default 32 points)
`getBounds(out, accuracy)`	method	Bounding Rectangle
`active`	`boolean`	When false, parent Path skips this curve
`defaultDivisions`	`number`	Default 5 for standalone curves
`arcLengthDivisions`	`number`	Precision for arc length calculations (default 100)

API	类型	描述
`getPoint(t, out)`	方法	参数t（0-1）处的点 -- 抽象方法，每个子类实现
`getPointAt(u, out)`	方法	弧长位置u（0-1）处的点 -- 均匀分布
`getPoints(divisions, stepRate, out)`	方法	点数组
`getSpacedPoints(divisions, stepRate, out)`	方法	按弧长等距分布的点数组
`getDistancePoints(distance)`	方法	按像素距离间隔分布的点
`getLength()`	方法	曲线总弧长
`getTangent(t, out)` / `getTangentAt(u, out)`	方法	单位切向量
`getTFromDistance(distance)`	方法	将像素距离转换为t值
`draw(graphics, pointsTotal)`	方法	渲染到Graphics上（默认32个点）
`getBounds(out, accuracy)`	方法	边界矩形
`active`	`boolean`	若为false，父路径会跳过此曲线
`defaultDivisions`	`number`	独立曲线的默认值为5
`arcLengthDivisions`	`number`	弧长计算的精度（默认值100）

PathFollower Component

PathFollower组件

API	Type	Description
`setPath(path, config)`	method	Set a new Path (optionally auto-start)
`startFollow(config, startAt)`	method	Begin following; config = duration number or PathConfig
`pauseFollow()`	method	Pause movement
`resumeFollow()`	method	Resume paused movement
`stopFollow()`	method	Stop following
`isFollowing()`	method	Returns true if actively moving on path
`setRotateToPath(value, offset)`	method	Enable/disable auto-rotation with offset
`path`	`Path`	Current path reference
`pathTween`	`Tween`	Internal tween driving movement
`pathOffset`	`Vector2`	Offset from path coordinates
`pathVector`	`Vector2`	Current position on the path
`pathDelta`	`Vector2`	Movement delta since last update
`rotateToPath`	`boolean`	Auto-rotate to path direction
`pathRotationOffset`	`number`	Rotation offset in degrees

API	类型	描述
`setPath(path, config)`	方法	设置新路径（可选择自动开始跟随）
`startFollow(config, startAt)`	方法	开始跟随；config为时长数字或PathConfig对象
`pauseFollow()`	方法	暂停移动
`resumeFollow()`	方法	恢复暂停的移动
`stopFollow()`	方法	停止跟随
`isFollowing()`	方法	如果正在沿路径移动则返回true
`setRotateToPath(value, offset)`	方法	启用/禁用带偏移量的自动旋转
`path`	`Path`	当前路径引用
`pathTween`	`Tween`	驱动移动的内部补间
`pathOffset`	`Vector2`	与路径坐标的偏移量
`pathVector`	`Vector2`	路径上的当前位置
`pathDelta`	`Vector2`	自上次更新以来的移动增量
`rotateToPath`	`boolean`	自动旋转以面向路径方向
`pathRotationOffset`	`number`	旋转偏移量（度数）

PathConfig (

Phaser.Types.GameObjects.PathFollower.PathConfig

)

PathConfig（

Phaser.Types.GameObjects.PathFollower.PathConfig

）

Property	Type	Default	Description
`duration`	`number`	1000	Time in ms to traverse the path
`from`	`number`	0	Start position on path (0-1)
`to`	`number`	1	End position on path (0-1)
`positionOnPath`	`boolean`	false	Snap follower to path start on begin
`rotateToPath`	`boolean`	false	Auto-rotate to face path direction
`rotationOffset`	`number`	0	Degrees added to auto-rotation
`startAt`	`number`	0	Initial seek position on path (0-1)

The config also accepts all standard Tween properties:

ease

repeat

yoyo

delay

hold

onComplete

, etc.

属性	类型	默认值	描述
`duration`	`number`	1000	遍历路径的时间（毫秒）
`from`	`number`	0	路径上的起始位置（0-1）
`to`	`number`	1	路径上的结束位置（0-1）
`positionOnPath`	`boolean`	false	开始时将跟随器对齐到路径起点
`rotateToPath`	`boolean`	false	自动旋转以面向路径方向
`rotationOffset`	`number`	0	添加到自动旋转的偏移量（度数）
`startAt`	`number`	0	路径上的初始定位位置（0-1）

该配置还支持所有标准Tween属性：

ease

repeat

yoyo

delay

hold

onComplete

等。

Gotchas

注意事项

getPoint(t)
vs
getPointAt(u)
on 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.
Path
moveTo
creates an inactive curve. The
```
MoveTo
```
pseudo-curve has
```
active: false
```
and zero length. It only repositions the end point for the next curve. It does not draw anything and is skipped by
```
getPoints()
```
and
```
draw()
```
.
PathFollower uses a Tween internally. The
```
startFollow
```
config is passed to
```
scene.tweens.addCounter()
```
. All tween properties (ease, delay, repeat, yoyo, callbacks) work. The tween is set to
```
persist: true
```
automatically.
PathFollower offset behavior. When
```
positionOnPath: false
```
(default), the follower's current position becomes the offset from the path start. When
```
positionOnPath: true
```
, the follower snaps to the path's start point and the offset is zeroed.
Ellipse angles are in degrees. The constructor and
```
startAngle
```
/
```
endAngle
```
properties accept degrees. Internally they are stored as radians. The
```
rotation
```
property is in radians, but
```
angle
```
is in degrees.
closePath
vs
autoClose
.
```
closePath()
```
adds an explicit Line curve from end to start.
```
autoClose = true
```
only affects
```
getPoints()
```
and
```
getSpacedPoints()
```
output by appending the first point, without adding a curve.
Cached lengths can go stale.
```
getCurveLengths()
```
caches results based on array length only. If you modify a curve's control points, call
```
path.updateArcLengths()
```
to force recalculation.
cubicBezierTo
parameter order with numbers. When passing numbers:
```
cubicBezierTo(endX, endY, cp1X, cp1Y, cp2X, cp2Y)
```
. The end point comes first, not the control points. When passing Vector2 objects:
```
cubicBezierTo(cp1, cp2, endPoint)
```
.
Spline needs at least 4 points. The Catmull-Rom interpolation used by Spline works best with 4+ points. With fewer points, the curve may not behave as expected.
Line curve
arcLengthDivisions
is 1. Unlike other curves (default 100), Line overrides this to 1 since a line is inherently uniform. No need to adjust it.

曲线上的
getPoint(t)
与
getPointAt(u)
：
```
getPoint
```
使用原始曲线参数t，在大多数曲线类型上不会生成均匀分布的点。
```
getPointAt
```
通过弧长映射实现均匀分布。在Path上，
```
getPoint
```
已考虑整个路径的弧长。
Path的
moveTo
会创建非活动曲线：
```
MoveTo
```
伪曲线的
```
active: false
```
且长度为0，它仅重新定位下一条曲线的终点，不会绘制任何内容，且会被
```
getPoints()
```
和
```
draw()
```
跳过。
PathFollower内部使用Tween：
```
startFollow
```
配置会传递给
```
scene.tweens.addCounter()
```
。所有补间属性（缓动、延迟、重复、往返、回调）均有效。补间会自动设置为
```
persist: true
```
。
PathFollower的偏移行为：当
```
positionOnPath: false
```
（默认值）时，跟随器的当前位置会成为与路径起点的偏移量。当
```
positionOnPath: true
```
时，跟随器会对齐到路径起点，偏移量归零。
椭圆角度以度数为单位：构造函数和
```
startAngle
```
/
```
endAngle
```
属性接受度数，内部以弧度存储。
```
rotation
```
属性以弧度为单位，而
```
angle
```
以度数为单位。
closePath
与
autoClose
的区别：
```
closePath()
```
会添加一条从终点到起点的显式直线曲线。
```
autoClose = true
```
仅会在
```
getPoints()
```
和
```
getSpacedPoints()
```
的输出中追加第一个点，不会添加曲线。
缓存的长度可能失效：
```
getCurveLengths()
```
仅根据数组长度缓存结果。如果修改了曲线的控制点，请调用
```
path.updateArcLengths()
```
强制重新计算。
cubicBezierTo
的数字参数顺序：传入数字时顺序为：
```
cubicBezierTo(endX, endY, cp1X, cp1Y, cp2X, cp2Y)
```
，终点在前，而非控制点。传入Vector2对象时顺序为：
```
cubicBezierTo(cp1, cp2, endPoint)
```
。
样条曲线至少需要4个点：样条曲线使用的Catmull-Rom插值在4个及以上点时效果最佳。点数量较少时，曲线行为可能不符合预期。
直线曲线的
arcLengthDivisions
为1：与其他曲线（默认值100）不同，直线会覆盖此值为1，因为直线本身是均匀的，无需调整。

Source File Map

源码文件映射

File	Purpose
`src/curves/path/Path.js`	Path class -- combines multiple curves, factory registered as `this.add.path`
`src/curves/path/MoveTo.js`	MoveTo pseudo-curve for creating gaps in paths
`src/curves/Curve.js`	Base Curve class -- shared methods for all curve types
`src/curves/LineCurve.js`	Line curve (two-point segment)
`src/curves/SplineCurve.js`	Spline curve (Catmull-Rom through multiple points)
`src/curves/CubicBezierCurve.js`	Cubic Bezier curve (4 control points)
`src/curves/QuadraticBezierCurve.js`	Quadratic Bezier curve (3 control points)
`src/curves/EllipseCurve.js`	Ellipse/arc curve with angle and rotation support
`src/gameobjects/pathfollower/PathFollower.js`	PathFollower Game Object (extends Sprite + PathFollower mixin)
`src/gameobjects/pathfollower/PathFollowerFactory.js`	`this.add.follower` factory registration
`src/gameobjects/components/PathFollower.js`	PathFollower component mixin (setPath, startFollow, pathUpdate, etc.)
`src/gameobjects/pathfollower/typedefs/PathConfig.js`	PathConfig typedef

文件	用途
`src/curves/path/Path.js`	Path类 -- 组合多条曲线，工厂方法注册为 `this.add.path`
`src/curves/path/MoveTo.js`	MoveTo伪曲线，用于在路径中创建间隙
`src/curves/Curve.js`	基础Curve类 -- 所有曲线类型的共享方法
`src/curves/LineCurve.js`	直线曲线（两点线段）
`src/curves/SplineCurve.js`	样条曲线（穿过多个点的Catmull-Rom曲线）
`src/curves/CubicBezierCurve.js`	三次贝塞尔曲线（4个控制点）
`src/curves/QuadraticBezierCurve.js`	二次贝塞尔曲线（3个控制点）
`src/curves/EllipseCurve.js`	椭圆/圆弧曲线，支持角度和旋转
`src/gameobjects/pathfollower/PathFollower.js`	PathFollower游戏对象（继承Sprite + PathFollower混合类）
`src/gameobjects/pathfollower/PathFollowerFactory.js`	`this.add.follower` 工厂方法注册
`src/gameobjects/components/PathFollower.js`	PathFollower组件混合类（setPath、startFollow、pathUpdate等）
`src/gameobjects/pathfollower/typedefs/PathConfig.js`	PathConfig类型定义

curves-and-paths

Original

Translation

Curves and Paths

曲线与路径

Quick Start

快速开始

Core Concepts

核心概念

Path

Path

Curves

曲线

PathFollower

PathFollower

Common Patterns

常见模式

Creating Paths with Chained Curves

使用链式曲线创建路径

Adding Standalone Curve Objects

添加独立曲线对象

Getting Points Along a Path

获取路径上的点

Drawing Paths with Graphics

使用Graphics绘制路径

PathFollower Sprite

PathFollower精灵

PathFollower with Simple Duration

仅指定时长的PathFollower

All Curve Types

所有曲线类型

Ellipse Curve Properties

椭圆曲线属性

API Quick Reference

API快速参考

Path (Phaser.Curves.Path)

Path（Phaser.Curves.Path）

Base Curve (Phaser.Curves.Curve)

基础曲线（Phaser.Curves.Curve）

PathFollower Component

PathFollower组件

PathConfig (Phaser.Types.GameObjects.PathFollower.PathConfig)

PathConfig（Phaser.Types.GameObjects.PathFollower.PathConfig）

Gotchas

注意事项

Source File Map

源码文件映射

Path (
`Phaser.Curves.Path`
)

Path（
`Phaser.Curves.Path`
）

Base Curve (
`Phaser.Curves.Curve`
)

基础曲线（
`Phaser.Curves.Curve`
）

PathConfig (
`Phaser.Types.GameObjects.PathFollower.PathConfig`
)

PathConfig（
`Phaser.Types.GameObjects.PathFollower.PathConfig`
）