Ellipse
An Ellipse Curve is a smooth curve that describes the path of an ellipse. It can be used to move Game Objects along an elliptical path, generate points distributed around an ellipse, or draw elliptical arcs as part of a Path or Graphics object.
You can control the center position, horizontal and vertical radii, start and end angles, rotation, and whether the curve runs clockwise or anti-clockwise. Passing only xRadius will create a circle (both radii are equal by default).
This curve extends the base Phaser.Curves.Curve class and can be used anywhere a Curve is accepted in Phaser, such as Phaser.Curves.Path or a PathFollower Game Object.
See https://en.wikipedia.org/wiki/Ellipse for more details.
Constructor
new Ellipse([x], [y], [xRadius], [yRadius], [startAngle], [endAngle], [clockwise], [rotation])
Parameters
| name | type | optional | default | description |
|---|---|---|---|---|
| x | number | Phaser.Types.Curves.EllipseCurveConfig | Yes | 0 | The x coordinate of the ellipse, or an Ellipse Curve configuration object. |
| y | number | Yes | 0 | The y coordinate of the ellipse. |
| xRadius | number | Yes | 0 | The horizontal radius of ellipse. |
| yRadius | number | Yes | 0 | The vertical radius of ellipse. |
| startAngle | number | Yes | 0 | The start angle of the ellipse, in degrees. |
| endAngle | number | Yes | 360 | The end angle of the ellipse, in degrees. |
| clockwise | boolean | Yes | false | Whether the ellipse angles are given as clockwise (true) or counter-clockwise (false). |
| rotation | number | Yes | 0 | The rotation of the ellipse, in degrees. |
Scope: static
Extends
Source: src/curves/EllipseCurve.js#L16
Since: 3.0.0
Inherited Members
From Phaser.Curves.Curve:
Public Members
angle
angle: number
Description:
The rotation of the ellipse, relative to the center, in degrees.
Source: src/curves/EllipseCurve.js#L545
Since: 3.14.0
clockwise
clockwise: boolean
Description:
true if the ellipse rotation is clockwise or false if anti-clockwise.
Source: src/curves/EllipseCurve.js#L524
Since: 3.0.0
endAngle
endAngle: number
Description:
The end angle of the ellipse in degrees.
Source: src/curves/EllipseCurve.js#L503
Since: 3.0.0
p0
p0: Phaser.Math.Vector2
Description:
The center point of the ellipse. Used for calculating rotation.
Source: src/curves/EllipseCurve.js#L80
Since: 3.0.0
rotation
rotation: number
Description:
The rotation of the ellipse, relative to the center, in radians.
Source: src/curves/EllipseCurve.js#L566
Since: 3.0.0
startAngle
startAngle: number
Description:
The start angle of the ellipse in degrees.
Source: src/curves/EllipseCurve.js#L482
Since: 3.0.0
x
x: number
Description:
The x coordinate of the center of the ellipse.
Source: src/curves/EllipseCurve.js#L398
Since: 3.0.0
xRadius
xRadius: number
Description:
The horizontal radius of the ellipse.
Source: src/curves/EllipseCurve.js#L440
Since: 3.0.0
y
y: number
Description:
The y coordinate of the center of the ellipse.
Source: src/curves/EllipseCurve.js#L419
Since: 3.0.0
yRadius
yRadius: number
Description:
The vertical radius of the ellipse.
Source: src/curves/EllipseCurve.js#L461
Since: 3.0.0
Inherited Methods
From Phaser.Curves.Curve:
- draw
- getBounds
- getDistancePoints
- getEndPoint
- getLength
- getLengths
- getPointAt
- getPoints
- getRandomPoint
- getSpacedPoints
- getTangent
- getTangentAt
- getTFromDistance
- getUtoTmapping
- updateArcLengths
Public Methods
fromJSON
<static> fromJSON(data)
Description:
Creates a curve from the provided Ellipse Curve Configuration object.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| data | Phaser.Types.Curves.JSONEllipseCurve | No | The JSON object containing this curve data. |
Returns: Phaser.Curves.Ellipse - The ellipse curve constructed from the configuration object.
Source: src/curves/EllipseCurve.js#L612
Since: 3.0.0
getPoint
<instance> getPoint(t, [out])
Description:
Returns the point on this curve at the given normalized position t, where 0 is the start and 1 is the end. The result accounts for the start angle, end angle, clockwise direction, and rotation of the ellipse.
Tags:
- generic
Parameters:
| name | type | optional | description |
|---|---|---|---|
| t | number | No | The position along the curve to return. Where 0 is the start and 1 is the end. |
| out | Phaser.Math.Vector2 | Yes | A Vector2 object to store the result in. If not given will be created. |
Returns: Phaser.Math.Vector2 - The coordinates of the point on the curve. If an out object was given this will be returned.
Source: src/curves/EllipseCurve.js#L186
Since: 3.0.0
getResolution
<instance> getResolution(divisions)
Description:
Returns the resolution of this curve, which is the number of points used to approximate it. For an Ellipse, this is double the requested divisions to provide accurate arc length calculations.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| divisions | number | No | Optional divisions value. |
Returns: number - The curve resolution.
Source: src/curves/EllipseCurve.js#L171
Since: 3.0.0
getStartPoint
<instance> getStartPoint([out])
Description:
Gets the starting point on the curve.
Tags:
- generic
Parameters:
| name | type | optional | description |
|---|---|---|---|
| out | Phaser.Math.Vector2 | Yes | A Vector2 object to store the result in. If not given will be created. |
Overrides: Phaser.Curves.Curve#getStartPoint
Returns: Phaser.Math.Vector2 - The coordinates of the point on the curve. If an out object was given this will be returned.
Source: src/curves/EllipseCurve.js#L152
Since: 3.0.0
setClockwise
<instance> setClockwise(value)
Description:
Sets if this curve extends clockwise or anti-clockwise.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| value | boolean | No | The clockwise state of this curve. |
Returns: Phaser.Curves.Ellipse - This curve object.
Source: src/curves/EllipseCurve.js#L364
Since: 3.0.0
setEndAngle
<instance> setEndAngle(value)
Description:
Sets the end angle of this curve.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| value | number | No | The end angle of this curve, in degrees. |
Returns: Phaser.Curves.Ellipse - This curve object.
Source: src/curves/EllipseCurve.js#L347
Since: 3.0.0
setHeight
<instance> setHeight(value)
Description:
Sets the height of this curve. The vertical radius (yRadius) is set to half the given value.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| value | number | No | The height of this curve. |
Returns: Phaser.Curves.Ellipse - This curve object.
Source: src/curves/EllipseCurve.js#L313
Since: 3.0.0
setRotation
<instance> setRotation(value)
Description:
Sets the rotation of this curve.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| value | number | No | The rotation of this curve, in radians. |
Returns: Phaser.Curves.Ellipse - This curve object.
Source: src/curves/EllipseCurve.js#L381
Since: 3.0.0
setStartAngle
<instance> setStartAngle(value)
Description:
Sets the start angle of this curve.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| value | number | No | The start angle of this curve, in degrees. |
Returns: Phaser.Curves.Ellipse - This curve object.
Source: src/curves/EllipseCurve.js#L330
Since: 3.0.0
setWidth
<instance> setWidth(value)
Description:
Sets the width of this curve. The horizontal radius (xRadius) is set to half the given value.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| value | number | No | The width of this curve. |
Returns: Phaser.Curves.Ellipse - This curve object.
Source: src/curves/EllipseCurve.js#L296
Since: 3.0.0
setXRadius
<instance> setXRadius(value)
Description:
Sets the horizontal radius of this curve.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| value | number | No | The horizontal radius of this curve. |
Returns: Phaser.Curves.Ellipse - This curve object.
Source: src/curves/EllipseCurve.js#L262
Since: 3.0.0
setYRadius
<instance> setYRadius(value)
Description:
Sets the vertical radius of this curve.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| value | number | No | The vertical radius of this curve. |
Returns: Phaser.Curves.Ellipse - This curve object.
Source: src/curves/EllipseCurve.js#L279
Since: 3.0.0
toJSON
<instance> toJSON()
Description:
JSON serialization of the curve.
Returns: Phaser.Types.Curves.JSONEllipseCurve - The JSON object containing this curve data.
Source: src/curves/EllipseCurve.js#L587
Since: 3.0.0