Skip to main content
Version: Phaser v3.88.2

IsoTriangle

The IsoTriangle 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 only fill colors and cannot be stroked.

An IsoTriangle is an 'isometric' triangle. Think of it like a pyramid. Each face has a different

fill color. You can set the color of the top, left and right faces of the triangle respectively

You can also choose which of the faces are rendered via the showTop, showLeft and showRight properties.

You cannot view an IsoTriangle from under-neath, however you can change the 'angle' by setting

the projection property. The reversed property controls if the IsoTriangle is rendered upside

down or not.

Constructor

new IsoTriangle(scene, [x], [y], [size], [height], [reversed], [fillTop], [fillLeft], [fillRight])

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.
sizenumberYes48The width of the iso triangle in pixels. The left and right faces will be exactly half this value.
heightnumberYes32The height of the iso triangle. The left and right faces will be this tall. The overall height of the iso triangle will be this value plus half the size value.
reversedbooleanYesfalseIs the iso triangle upside down?
fillTopnumberYes"0xeeeeee"The fill color of the top face of the iso triangle.
fillLeftnumberYes"0x999999"The fill color of the left face of the iso triangle.
fillRightnumberYes"0xcccccc"The fill color of the right face of the iso triangle.

Scope: static

Extends

Phaser.GameObjects.Shape

Source: src/gameobjects/shape/isotriangle/IsoTriangle.js#L11
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.Mask:

From Phaser.GameObjects.Components.Origin:

From Phaser.GameObjects.Components.Pipeline:

From Phaser.GameObjects.Components.PostPipeline:

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

fillLeft

fillLeft: number

Description:

The color used to fill in the left-facing side of the iso triangle.

Source: src/gameobjects/shape/isotriangle/IsoTriangle.js#L86
Since: 3.13.0


fillRight

fillRight: number

Description:

The color used to fill in the right-facing side of the iso triangle.

Source: src/gameobjects/shape/isotriangle/IsoTriangle.js#L95
Since: 3.13.0


fillTop

fillTop: number

Description:

The color used to fill in the top of the iso triangle. This is only used if the triangle is reversed.

Source: src/gameobjects/shape/isotriangle/IsoTriangle.js#L77
Since: 3.13.0


isReversed

isReversed: boolean

Description:

Sets if the iso triangle will be rendered upside down or not.

Source: src/gameobjects/shape/isotriangle/IsoTriangle.js#L134
Since: 3.13.0


projection

projection: number

Description:

The projection level of the iso box. Change this to change the 'angle' at which you are looking at the box.

Source: src/gameobjects/shape/isotriangle/IsoTriangle.js#L67
Since: 3.13.0


showLeft

showLeft: boolean

Description:

Controls if the left-face of the iso triangle be rendered.

Source: src/gameobjects/shape/isotriangle/IsoTriangle.js#L114
Since: 3.13.0


showRight

showRight: boolean

Description:

Controls if the right-face of the iso triangle be rendered.

Source: src/gameobjects/shape/isotriangle/IsoTriangle.js#L124
Since: 3.13.0


showTop

showTop: boolean

Description:

Controls if the top-face of the iso triangle be rendered.

Source: src/gameobjects/shape/isotriangle/IsoTriangle.js#L104
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.GetBounds:

From Phaser.GameObjects.Components.Mask:

From Phaser.GameObjects.Components.Origin:

From Phaser.GameObjects.Components.Pipeline:

From Phaser.GameObjects.Components.PostPipeline:

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

setFaces

<instance> setFaces([showTop], [showLeft], [showRight])

Description:

Sets which faces of the iso triangle will be rendered.

This call can be chained.

Parameters:

nametypeoptionaldefaultdescription
showTopbooleanYestrueShow the top-face of the iso triangle (only if reversed is true)
showLeftbooleanYestrueShow the left-face of the iso triangle.
showRightbooleanYestrueShow the right-face of the iso triangle.

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

Source: src/gameobjects/shape/isotriangle/IsoTriangle.js#L188
Since: 3.13.0


setFillStyle

<instance> setFillStyle([fillTop], [fillLeft], [fillRight])

Description:

Sets the fill colors for each face of the iso triangle.

This call can be chained.

Parameters:

nametypeoptionaldescription
fillTopnumberYesThe color used to fill the top of the iso triangle.
fillLeftnumberYesThe color used to fill in the left-facing side of the iso triangle.
fillRightnumberYesThe color used to fill in the right-facing side of the iso triangle.

Overrides: Phaser.GameObjects.Shape#setFillStyle

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

Source: src/gameobjects/shape/isotriangle/IsoTriangle.js#L214
Since: 3.13.0


setProjection

<instance> setProjection(value)

Description:

Sets the projection level of the iso triangle. Change this to change the 'angle' at which you are looking at the pyramid.

This call can be chained.

Parameters:

nametypeoptionaldescription
valuenumberNoThe value to set the projection to.

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

Source: src/gameobjects/shape/isotriangle/IsoTriangle.js#L152
Since: 3.13.0


setReversed

<instance> setReversed(reversed)

Description:

Sets if the iso triangle will be rendered upside down or not.

This call can be chained.

Parameters:

nametypeoptionaldescription
reversedbooleanNoSets if the iso triangle will be rendered upside down or not.

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

Source: src/gameobjects/shape/isotriangle/IsoTriangle.js#L170
Since: 3.13.0