Skip to main content
Version: Phaser v4.0.0-rc.6

Shape

The Shape Game Object is a base class for the various different shapes, such as the Arc, Star or Polygon.

You cannot add a Shape directly to your Scene, it is meant as a base for your own custom Shape classes.

Shape objects use the same batch as the Graphics Game Object to render in WebGL.

They do not support gradients, path detail threshold, or other advanced Graphics features.

In return, they have precomputed internal data for quick rendering of the geometry.

Constructor

new Shape(scene, [type], [data])

Parameters

nametypeoptionaldescription
scenePhaser.SceneNoThe Scene to which this Game Object belongs. A Game Object can only belong to one Scene at a time.
typestringYesThe internal type of the Shape.
dataanyYesThe data of the source shape geometry, if any.

Scope: static

Extends

Phaser.GameObjects.GameObject
Phaser.GameObjects.Components.AlphaSingle
Phaser.GameObjects.Components.BlendMode
Phaser.GameObjects.Components.Depth
Phaser.GameObjects.Components.GetBounds
Phaser.GameObjects.Components.Mask
Phaser.GameObjects.Components.Origin
Phaser.GameObjects.Components.RenderNodes
Phaser.GameObjects.Components.ScrollFactor
Phaser.GameObjects.Components.Transform
Phaser.GameObjects.Components.Visible

Source: src/gameobjects/shape/Shape.js#L13
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:


Public Methods

preDestroy

<instance> preDestroy()

Description:

Internal destroy handler, called as part of the destroy process.

Access: protected

Source: src/gameobjects/shape/Shape.js#L379
Since: 3.13.0


setClosePath

<instance> setClosePath(value)

Description:

Sets if this Shape path is closed during rendering when stroked.

Note that some Shapes are always closed when stroked (such as Ellipse shapes)

This call can be chained.

Parameters:

nametypeoptionaldescription
valuebooleanNoSet to true if the Shape should be closed when stroked, otherwise false.

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

Source: src/gameobjects/shape/Shape.js#L310
Since: 3.13.0


setDisplaySize

<instance> setDisplaySize(width, height)

Description:

Sets the display size of this Shape.

Calling this will adjust the scale.

Parameters:

nametypeoptionaldescription
widthnumberNoThe display width of this Shape.
heightnumberNoThe display height of this Shape.

Returns: Phaser.GameObjects.Shape - This Shape instance.

Source: src/gameobjects/shape/Shape.js#L358
Since: 3.53.0


setFillStyle

<instance> setFillStyle([color], [alpha])

Description:

Sets the fill color and alpha for this Shape.

If you wish for the Shape to not be filled then call this method with no arguments, or just set isFilled to false.

Note that some Shapes do not support fill colors, such as the Line shape.

This call can be chained.

Parameters:

nametypeoptionaldefaultdescription
colornumberYesThe color used to fill this shape. If not provided the Shape will not be filled.
alphanumberYes1The alpha value used when filling this shape, if a fill color is given.

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

Source: src/gameobjects/shape/Shape.js#L238
Since: 3.13.0


setStrokeStyle

<instance> setStrokeStyle([lineWidth], [color], [alpha])

Description:

Sets the stroke color and alpha for this Shape.

If you wish for the Shape to not be stroked then call this method with no arguments, or just set isStroked to false.

Note that some Shapes do not support being stroked, such as the Iso Box shape.

This call can be chained.

Parameters:

nametypeoptionaldefaultdescription
lineWidthnumberYesThe width of line to stroke with. If not provided or undefined the Shape will not be stroked.
colornumberYesThe color used to stroke this shape. If not provided the Shape will not be stroked.
alphanumberYes1The alpha value used when stroking this shape, if a stroke color is given.

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

Source: src/gameobjects/shape/Shape.js#L273
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:


Public Members

closePath

closePath: boolean

Description:

Controls if this Shape path is closed during rendering when stroked.

Note that some Shapes are always closed when stroked (such as Ellipse shapes)

Source: src/gameobjects/shape/Shape.js#L165
Since: 3.13.0


displayHeight

displayHeight: number

Description:

The displayed height of this Game Object.

This value takes into account the scale factor.

Setting this value will adjust the Game Object's scale property.

Source: src/gameobjects/shape/Shape.js#L419
Since: 3.13.0


displayWidth

displayWidth: number

Description:

The displayed width of this Game Object.

This value takes into account the scale factor.

Setting this value will adjust the Game Object's scale property.

Source: src/gameobjects/shape/Shape.js#L394
Since: 3.13.0


fillAlpha

fillAlpha: number

Description:

The fill alpha value used by this Shape.

Source: src/gameobjects/shape/Shape.js#L109
Since: 3.13.0


fillColor

fillColor: number

Description:

The fill color used by this Shape.

Source: src/gameobjects/shape/Shape.js#L100
Since: 3.13.0


geom

geom: any

Description:

The source Shape data. Typically a geometry object.

You should not manipulate this directly.

Source: src/gameobjects/shape/Shape.js#L69
Since: 3.13.0


height

height: number

Description:

The native (un-scaled) height of this Game Object.

Changing this value will not change the size that the Game Object is rendered in-game.

For that you need to either set the scale of the Game Object (setScale) or use

the displayHeight property.

Source: src/gameobjects/shape/Shape.js#L199
Since: 3.0.0


isFilled

isFilled: boolean

Description:

Controls if this Shape is filled or not.

Note that some Shapes do not support being filled (such as Line shapes)

Source: src/gameobjects/shape/Shape.js#L145
Since: 3.13.0


isRounded

isRounded: boolean

Description:

Does this Rectangle have rounded corners?

Do not modify this property. Instead, call the method setRounded to set the

radius state of this rectangle.

Source: src/gameobjects/shape/rectangle/Rectangle.js#L70
Since: 3.89.0


isStroked

isStroked: boolean

Description:

Controls if this Shape is stroked or not.

Note that some Shapes do not support being stroked (such as Iso Box shapes)

Source: src/gameobjects/shape/Shape.js#L155
Since: 3.13.0


lineWidth

lineWidth: number

Description:

The stroke line width used by this Shape.

Source: src/gameobjects/shape/Shape.js#L136
Since: 3.13.0


pathData

pathData: Array.<number>

Description:

Holds the polygon path data for filled rendering.

Source: src/gameobjects/shape/Shape.js#L80
Since: 3.13.0


pathIndexes

pathIndexes: Array.<number>

Description:

Holds the earcut polygon path index data for filled rendering.

Source: src/gameobjects/shape/Shape.js#L90
Since: 3.13.0


radius

radius: number

Description:

The radius of the rectangle if this is set to use rounded corners.

Do not modify this property. Instead, call the method setRounded to set the

radius of the rounded corners.

Source: src/gameobjects/shape/rectangle/Rectangle.js#L57
Since: 3.89.0


strokeAlpha

strokeAlpha: number

Description:

The stroke alpha value used by this Shape.

Source: src/gameobjects/shape/Shape.js#L127
Since: 3.13.0


strokeColor

strokeColor: number

Description:

The stroke color used by this Shape.

Source: src/gameobjects/shape/Shape.js#L118
Since: 3.13.0


width

width: number

Description:

The native (un-scaled) width of this Game Object.

Changing this value will not change the size that the Game Object is rendered in-game.

For that you need to either set the scale of the Game Object (setScale) or use

the displayWidth property.

Source: src/gameobjects/shape/Shape.js#L186
Since: 3.13.0