Skip to main content
Version: Phaser v4.0.0

Arc

The Arc Shape is a Game Object that can be added to a Scene, Group or Container. You can treat it like any other Game Object in your game, such as tweening it, scaling it, or enabling it for input or physics. It provides a quick and easy way for you to render this shape in your game without using a texture, while still taking advantage of being fully batched in WebGL.

This shape supports both fill and stroke colors.

When it renders it displays an arc shape. You can control the start and end angles of the arc, as well as if the angles are winding clockwise or anti-clockwise. With the default settings it renders as a complete circle. By changing the angles you can create other arc shapes, such as half-circles.

Arcs also have an iterations property and corresponding setIterations method. This allows you to control how smooth the shape renders in WebGL, by controlling the number of iterations that take place during construction.

Constructor

new Arc(scene, [x], [y], [radius], [startAngle], [endAngle], [anticlockwise], [fillColor], [fillAlpha])

Parameters

nametypeoptionaldefaultdescription
scenePhaser.SceneNoThe Scene to which this Game Object belongs. A Game Object can only belong to one Scene at a time.
xnumberYes0The horizontal position of this Game Object in the world.
ynumberYes0The vertical position of this Game Object in the world.
radiusnumberYes128The radius of the arc.
startAnglenumberYes0The start angle of the arc, in degrees.
endAnglenumberYes360The end angle of the arc, in degrees.
anticlockwisebooleanYesfalseThe winding order of the start and end angles.
fillColornumberYesThe color the arc will be filled with, i.e. 0xff0000 for red.
fillAlphanumberYesThe alpha the arc will be filled with. You can also set the alpha of the overall Shape using its alpha property.

Scope: static

Extends

Phaser.GameObjects.Shape

Source: src/gameobjects/shape/arc/Arc.js#L15
Since: 3.13.0

Inherited Members

From Phaser.GameObjects.Components.AlphaSingle:

From Phaser.GameObjects.Components.BlendMode:

From Phaser.GameObjects.Components.Depth:

From Phaser.GameObjects.Components.Filters:

From Phaser.GameObjects.Components.Mask:

From Phaser.GameObjects.Components.Origin:

From Phaser.GameObjects.Components.RenderNodes:

From Phaser.GameObjects.Components.ScrollFactor:

From Phaser.GameObjects.Components.Transform:

From Phaser.GameObjects.Components.Visible:

From Phaser.GameObjects.GameObject:

From Phaser.GameObjects.Shape:


Public Members

anticlockwise

anticlockwise: boolean

Description:

The winding order of the start and end angles. If true the arc is drawn anti-clockwise (counter-clockwise), otherwise it is drawn clockwise. This affects which direction the arc sweeps between the start and end angles.

Source: src/gameobjects/shape/arc/Arc.js#L224
Since: 3.13.0


endAngle

endAngle: number

Description:

The end angle of the arc, in degrees.

Source: src/gameobjects/shape/arc/Arc.js#L201
Since: 3.13.0


iterations

iterations: number

Description:

The number of iterations used when drawing the arc. Increase this value for smoother arcs, at the cost of more polygons being rendered. Modify this value by small amounts, such as 0.01.

Source: src/gameobjects/shape/arc/Arc.js#L125
Since: 3.13.0


radius

radius: number

Description:

The radius of the arc, in pixels. Changing this value also updates the size of the Game Object and triggers a recalculation of its geometry data.

Source: src/gameobjects/shape/arc/Arc.js#L151
Since: 3.13.0


startAngle

startAngle: number

Description:

The start angle of the arc, in degrees.

Source: src/gameobjects/shape/arc/Arc.js#L178
Since: 3.13.0


Inherited Methods

From Phaser.Events.EventEmitter:

From Phaser.GameObjects.Components.AlphaSingle:

From Phaser.GameObjects.Components.BlendMode:

From Phaser.GameObjects.Components.Depth:

From Phaser.GameObjects.Components.Filters:

From Phaser.GameObjects.Components.GetBounds:

From Phaser.GameObjects.Components.Mask:

From Phaser.GameObjects.Components.Origin:

From Phaser.GameObjects.Components.RenderNodes:

From Phaser.GameObjects.Components.RenderSteps:

From Phaser.GameObjects.Components.ScrollFactor:

From Phaser.GameObjects.Components.Transform:

From Phaser.GameObjects.Components.Visible:

From Phaser.GameObjects.GameObject:

From Phaser.GameObjects.Shape:


Public Methods

setEndAngle

<instance> setEndAngle(value, [anticlockwise])

Description:

Sets the ending angle of the arc, in degrees. Optionally also updates the winding order. This call can be chained.

Parameters:

nametypeoptionaldescription
valuenumberNoThe value to set the ending angle to.
anticlockwisebooleanYesIf true the arc will be drawn anti-clockwise. If false it will be drawn clockwise. If not given, the current anticlockwise property value is used.

Returns: Phaser.GameObjects.Arc - This Game Object instance.

Source: src/gameobjects/shape/arc/Arc.js#L313
Since: 3.13.0


setIterations

<instance> setIterations(value)

Description:

Sets the number of iterations used when drawing the arc. Increase this value for smoother arcs, at the cost of more polygons being rendered. Modify this value by small amounts, such as 0.01. This call can be chained.

Parameters:

nametypeoptionaldescription
valuenumberNoThe value to set the iterations to.

Returns: Phaser.GameObjects.Arc - This Game Object instance.

Source: src/gameobjects/shape/arc/Arc.js#L267
Since: 3.13.0


setRadius

<instance> setRadius(value)

Description:

Sets the radius of the arc. This call can be chained.

Parameters:

nametypeoptionaldescription
valuenumberNoThe value to set the radius to.

Returns: Phaser.GameObjects.Arc - This Game Object instance.

Source: src/gameobjects/shape/arc/Arc.js#L249
Since: 3.13.0


setStartAngle

<instance> setStartAngle(value, [anticlockwise])

Description:

Sets the starting angle of the arc, in degrees. Optionally also updates the winding order. This call can be chained.

Parameters:

nametypeoptionaldescription
valuenumberNoThe value to set the starting angle to.
anticlockwisebooleanYesIf true the arc will be drawn anti-clockwise. If false it will be drawn clockwise. If not given, the current anticlockwise property value is used.

Returns: Phaser.GameObjects.Arc - This Game Object instance.

Source: src/gameobjects/shape/arc/Arc.js#L289
Since: 3.13.0