Skip to main content
Version: Phaser v4.0.0

GameObjectFactory

The Game Object Factory is a Scene plugin that allows you to quickly create many common types of Game Objects and have them automatically registered with the Scene. It is accessible via this.add from within a Scene.

Game Objects directly register themselves with the Factory and inject their own creation methods into the class.

Constructor

new GameObjectFactory(scene)

Parameters

nametypeoptionaldescription
scenePhaser.SceneNoThe Scene to which this Game Object Factory belongs.

Scope: static

Source: src/gameobjects/GameObjectFactory.js#L11
Since: 3.0.0

Public Methods​

arc​

<instance> arc([x], [y], [radius], [startAngle], [endAngle], [anticlockwise], [fillColor], [fillAlpha])​

Description:

Creates a new Arc Shape Game Object and adds it to the Scene.

Note: This method will only be available if the Arc Game Object has been built into Phaser.

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.

Parameters:

nametypeoptionaldefaultdescription
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.
anticlockwisebooleanYesfalseWhether the arc is drawn anticlockwise between the start and end angles. When false the arc is drawn clockwise.
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.

Returns: Phaser.GameObjects.Arc - The Game Object that was created.

Source: src/gameobjects/shape/arc/ArcFactory.js#L10
Since: 3.13.0

bitmapText​

<instance> bitmapText(x, y, font, [text], [size], [align])​

Description:

Creates a new Bitmap Text Game Object and adds it to the Scene.

BitmapText objects work by taking a texture file and an XML or JSON file that describes the font structure.

During rendering, each letter of the text is rendered to the display, proportionally spaced out and aligned to match the font structure.

BitmapText objects are less flexible than Text objects, in that they have fewer features such as shadows, fills and the ability to use Web Fonts, however you trade this flexibility for rendering speed. You can also create visually compelling BitmapTexts by processing the font texture in an image editor, applying fills and any other effects required.

To create multi-line text insert \r, \n or \r\n escape codes into the text string.

To create BitmapText data files you need a 3rd party app such as:

BMFont (Windows, free): http://www.angelcode.com/products/bmfont/ Glyph Designer (OS X, commercial): http://www.71squared.com/en/glyphdesigner Littera (Web-based, free): http://kvazars.com/littera/

For most use cases it is recommended to use XML. If you wish to use JSON, the formatting should be equal to the result of converting a valid XML file through the popular X2JS library. An online tool for conversion can be found here: http://codebeautify.org/xmltojson

Note: This method will only be available if the Bitmap Text Game Object has been built into Phaser.

Parameters:

nametypeoptionaldefaultdescription
xnumberNoThe x position of the Game Object.
ynumberNoThe y position of the Game Object.
fontstringNoThe key of the font to use from the BitmapFont cache.
textstring | Array.<string>YesThe string, or array of strings, to be set as the content of this Bitmap Text.
sizenumberYesThe font size to set.
alignnumberYes0The alignment of the text in a multi-line BitmapText object.

Returns: Phaser.GameObjects.BitmapText - The Game Object that was created.

Source: src/gameobjects/bitmaptext/static/BitmapTextFactory.js#L10
Since: 3.0.0

blitter​

<instance> blitter(x, y, texture, [frame])​

Description:

Creates a new Blitter Game Object and adds it to the Scene.

A Blitter is a special, highly optimized Game Object designed for rendering large numbers of identical or similar images with minimal overhead. Rather than creating individual Game Objects for each image, a Blitter manages a collection of lightweight Bob objects, all sharing the same texture. This makes it ideal for particle-like effects, crowds, bullet patterns, or any scenario where you need to display many copies of the same sprite at high performance.

Note: This method will only be available if the Blitter Game Object has been built into Phaser.

Parameters:

nametypeoptionaldescription
xnumberNoThe x position of the Game Object.
ynumberNoThe y position of the Game Object.
texturestring | Phaser.Textures.TextureNoThe key, or instance of the Texture this Game Object will use to render with, as stored in the Texture Manager.
framestring | numberYesThe default Frame children of the Blitter will use.

Returns: Phaser.GameObjects.Blitter - The Game Object that was created.

Source: src/gameobjects/blitter/BlitterFactory.js#L10
Since: 3.0.0

captureFrame​

<instance> captureFrame(key)​

Description:

Creates a new CaptureFrame Game Object and adds it to the Scene.

A CaptureFrame captures the current state of the WebGL framebuffer at the point it is rendered in the display list, storing the result as a texture identified by the given key. Other Game Objects can then reference this key to display or process the captured image. This is useful for full-scene post-processing effects such as water reflections or screen-space distortions.

This is a WebGL only feature and will not work in Canvas mode. The Camera must have forceComposite enabled, or the CaptureFrame must be rendered within a framebuffer context (such as a Filter, DynamicTexture, or a Camera with a non-default alpha value).

Note: This method will only be available if the CaptureFrame Game Object has been built into Phaser.

Parameters:

nametypeoptionaldescription
keystringNoThe key under which the captured texture will be stored. Other Game Objects can use this key to reference the captured frame.

Returns: Phaser.GameObjects.CaptureFrame - The Game Object that was created.

Source: src/gameobjects/captureframe/CaptureFrameFactory.js#L10
Since: 4.0.0

circle​

<instance> circle([x], [y], [radius], [fillColor], [fillAlpha])​

Description:

Creates a new Circle Shape Game Object and adds it to the Scene.

A Circle is an Arc with a fixed start angle of 0 and end angle of 360 degrees, so it always renders as a complete circle. Use the arc factory method if you need control over the start and end angles.

Note: This method will only be available if the Arc Game Object has been built into Phaser.

Parameters:

nametypeoptionaldefaultdescription
xnumberYes0The horizontal position of this Game Object in the world.
ynumberYes0The vertical position of this Game Object in the world.
radiusnumberYes128The radius of the circle.
fillColornumberYesThe color the circle will be filled with, i.e. 0xff0000 for red.
fillAlphanumberYesThe alpha the circle will be filled with. You can also set the alpha of the overall Shape using its alpha property.

Returns: Phaser.GameObjects.Arc - The Game Object that was created.

Source: src/gameobjects/shape/arc/ArcFactory.js#L46
Since: 3.13.0

container​

<instance> container([x], [y], [children])​

Description:

Creates a new Container Game Object and adds it to the Scene.

A Container is a special type of Game Object that can hold other Game Objects as children. You can use a Container to group related Game Objects together, then move, rotate, scale, or set the alpha of the Container to affect all of its children at once. Children are rendered relative to the Container's position and transform, making Containers useful for building composite objects, UI panels, or any group of Game Objects that should move together.

Note: This method will only be available if the Container Game Object has been built into Phaser.

Parameters:

nametypeoptionaldefaultdescription
xnumberYes0The horizontal position of this Game Object in the world.
ynumberYes0The vertical position of this Game Object in the world.
childrenPhaser.GameObjects.GameObject | Array.<Phaser.GameObjects.GameObject>YesAn optional Game Object, or array of Game Objects, to add to this Container.

Returns: Phaser.GameObjects.Container - The Game Object that was created.

Source: src/gameobjects/container/ContainerFactory.js#L11
Since: 3.4.0

curve​

<instance> curve([x], [y], [curve], [fillColor], [fillAlpha])​

Description:

Creates a new Curve Shape Game Object and adds it to the Scene.

Note: This method will only be available if the Curve Game Object has been built into Phaser.

The Curve 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.

To render a Curve Shape you must first create a Phaser.Curves.Curve object, then pass it to the Curve Shape in the constructor.

The Curve shape also has a smoothness property and corresponding setSmoothness method. This allows you to control how smooth the shape renders in WebGL, by controlling the number of iterations that take place during construction. Increase and decrease the default value for smoother, or more jagged, shapes.

Parameters:

nametypeoptionaldefaultdescription
xnumberYes0The horizontal position of this Game Object in the world.
ynumberYes0The vertical position of this Game Object in the world.
curvePhaser.Curves.CurveYesThe Curve object to use to create the Shape.
fillColornumberYesThe color the curve will be filled with, i.e. 0xff0000 for red.
fillAlphanumberYesThe alpha the curve will be filled with. You can also set the alpha of the overall Shape using its alpha property.

Returns: Phaser.GameObjects.Curve - The Game Object that was created.

Source: src/gameobjects/shape/curve/CurveFactory.js#L10
Since: 3.13.0

dom​

<instance> dom(x, y, [element], [style], [innerText])​

Description:

DOM Element Game Objects are a way to control and manipulate HTML Elements over the top of your game.

In order for DOM Elements to display you have to enable them by adding the following to your game configuration object:


dom {

  createContainer: true

}

When this is added, Phaser will automatically create a DOM Container div that is positioned over the top of the game canvas. This div is sized to match the canvas, and if the canvas size changes, as a result of settings within the Scale Manager, the dom container is resized accordingly.

You can create a DOM Element by either passing in DOMStrings, or by passing in a reference to an existing Element that you wish to be placed under the control of Phaser. For example:


this.add.dom(x, y, 'div', 'background-color: lime; width: 220px; height: 100px; font: 48px Arial', 'Phaser');

The above code will insert a div element into the DOM Container at the given x/y coordinate. The DOMString in the 4th argument sets the initial CSS style of the div and the final argument is the inner text. In this case, it will create a lime colored div that is 220px by 100px in size with the text Phaser in it, in an Arial font.

You should nearly always, without exception, use explicitly sized HTML Elements, in order to fully control alignment and positioning of the elements next to regular game content.

Rather than specify the CSS and HTML directly you can use the load.html File Loader to load it into the cache and then use the createFromCache method instead. You can also use createFromHTML and various other methods available in this class to help construct your elements.

Once the element has been created you can then control it like you would any other Game Object. You can set its position, scale, rotation, alpha and other properties. It will move as the main Scene Camera moves and be clipped at the edge of the canvas. It's important to remember some limitations of DOM Elements: The obvious one is that they appear above or below your game canvas. You cannot blend them into the display list, meaning you cannot have a DOM Element, then a Sprite, then another DOM Element behind it.

They also cannot be enabled for input. To do that, you have to use the addListener method to add native event listeners directly. The final limitation is to do with cameras. The DOM Container is sized to match the game canvas entirely and clipped accordingly. DOM Elements respect camera scrolling and scrollFactor settings, but if you change the size of the camera so it no longer matches the size of the canvas, they won't be clipped accordingly.

Also, all DOM Elements are inserted into the same DOM Container, regardless of which Scene they are created in.

DOM Elements are a powerful way to align native HTML with your Phaser Game Objects. For example, you can insert a login form for a multiplayer game directly into your title screen. Or a text input box for a highscore table. Or a banner ad from a 3rd party service. Or perhaps you'd like to use them for high resolution text display and UI. The choice is up to you, just remember that you're dealing with standard HTML and CSS floating over the top of your game, and should treat it accordingly.

Note: This method will only be available if the DOM Element Game Object has been built into Phaser.

Parameters:

nametypeoptionaldescription
xnumberNoThe horizontal position of this DOM Element in the world.
ynumberNoThe vertical position of this DOM Element in the world.
elementHTMLElement | stringYesAn existing DOM element, or a string. If a string starting with a # it will do a getElementById look-up on the string (minus the hash). Without a hash, it represents the type of element to create, i.e. 'div'.
stylestring | anyYesIf a string, will be set directly as the elements style property value. If a plain object, will be iterated and the values transferred. In both cases the values replace whatever CSS styles may have been previously set.
innerTextstringYesIf given, will be set directly as the elements innerText property value, replacing whatever was there before.

Returns: Phaser.GameObjects.DOMElement - The Game Object that was created.

Source: src/gameobjects/domelement/DOMElementFactory.js#L10
Since: 3.17.0

dynamicBitmapText​

<instance> dynamicBitmapText(x, y, font, [text], [size])​

Description:

Creates a new Dynamic Bitmap Text Game Object and adds it to the Scene.

BitmapText objects work by taking a texture file and an XML or JSON file that describes the font structure.

During rendering, each letter of the text is rendered to the display, proportionally spaced out and aligned to match the font structure.

Dynamic Bitmap Text objects are different from Static Bitmap Text in that they invoke a callback for each letter being rendered during the render pass. This callback allows you to manipulate the properties of each letter being rendered, such as its position, scale or tint, allowing you to create interesting effects like jiggling text, which can't be done with Static text. This means that Dynamic Text takes more processing time, so only use them if you require the callback ability they have.

BitmapText objects are less flexible than Text objects, in that they have fewer features such as shadows, fills and the ability to use Web Fonts, however you trade this flexibility for rendering speed. You can also create visually compelling BitmapTexts by processing the font texture in an image editor, applying fills and any other effects required.

To create multi-line text insert \r, \n or \r\n escape codes into the text string.

To create a BitmapText data files you need a 3rd party app such as:

BMFont (Windows, free): http://www.angelcode.com/products/bmfont/ Glyph Designer (OS X, commercial): http://www.71squared.com/en/glyphdesigner Littera (Web-based, free): http://kvazars.com/littera/

For most use cases it is recommended to use XML. If you wish to use JSON, the formatting should be equal to the result of converting a valid XML file through the popular X2JS library. An online tool for conversion can be found here: http://codebeautify.org/xmltojson

Note: This method will only be available if the Dynamic Bitmap Text Game Object has been built into Phaser.

Parameters:

nametypeoptionaldescription
xnumberNoThe x position of the Game Object.
ynumberNoThe y position of the Game Object.
fontstringNoThe key of the font to use from the BitmapFont cache.
textstring | Array.<string>YesThe string, or array of strings, to be set as the content of this Bitmap Text.
sizenumberYesThe font size to set.

Returns: Phaser.GameObjects.DynamicBitmapText - The Game Object that was created.

Source: src/gameobjects/bitmaptext/dynamic/DynamicBitmapTextFactory.js#L10
Since: 3.0.0

ellipse​

<instance> ellipse([x], [y], [width], [height], [fillColor], [fillAlpha])​

Description:

Creates a new Ellipse Shape Game Object and adds it to the Scene.

Note: This method will only be available if the Ellipse Game Object has been built into Phaser.

The Ellipse 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 ellipse shape. You can control the width and height of the ellipse. If the width and height match it will render as a circle. If the width is less than the height, it will look more like an egg shape.

The Ellipse shape also has a smoothness property and corresponding setSmoothness method. This allows you to control how smooth the shape renders in WebGL, by controlling the number of iterations that take place during construction. Increase and decrease the default value for smoother, or more jagged, shapes.

Parameters:

nametypeoptionaldefaultdescription
xnumberYes0The horizontal position of this Game Object in the world.
ynumberYes0The vertical position of this Game Object in the world.
widthnumberYes128The width of the ellipse. An ellipse with equal width and height renders as a circle.
heightnumberYes128The height of the ellipse. An ellipse with equal width and height renders as a circle.
fillColornumberYesThe color the ellipse will be filled with, i.e. 0xff0000 for red.
fillAlphanumberYesThe alpha the ellipse will be filled with. You can also set the alpha of the overall Shape using its alpha property.

Returns: Phaser.GameObjects.Ellipse - The Game Object that was created.

Source: src/gameobjects/shape/ellipse/EllipseFactory.js#L10
Since: 3.13.0

existing​

<instance> existing(child)​

Description:

Adds an existing Game Object to this Scene.

If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List.

Tags:

  • generic

Parameters:

nametypeoptionaldescription
childPhaser.GameObjects.GameObject | Phaser.GameObjects.GroupPhaser.GameObjects.LayerNo

Returns: Phaser.GameObjects.GameObject - The Game Object that was added.

Source: src/gameobjects/GameObjectFactory.js#L117
Since: 3.0.0

extern​

<instance> extern()​

Description:

Creates a new Extern Game Object and adds it to the Scene's display list.

An Extern is a special type of Game Object that allows you to integrate custom rendering logic directly into Phaser's render pipeline. By adding an Extern to the display list, you can inject your own WebGL or Canvas draw calls at a specific point in the rendering order, without Phaser interfering with the renderer state. This is useful when you need to use a third-party renderer, perform custom GPU operations, or render content that Phaser does not natively support, while still having it composited correctly with other Game Objects in your Scene.

Note: This method will only be available if the Extern Game Object has been built into Phaser.

Returns: Phaser.GameObjects.Extern - The Extern Game Object that was created and added to the display list.

Source: src/gameobjects/extern/ExternFactory.js#L10
Since: 3.16.0

follower​

<instance> follower(path, x, y, texture, [frame])​

Description:

Creates a new PathFollower Game Object and adds it to the Scene.

A PathFollower is a Sprite that is bound to a Phaser.Curves.Path and can automatically move along that path over time. It is useful for animating characters or objects along predetermined routes, such as enemies patrolling a level, vehicles following a road, or any game object that needs to travel a curved or multi-segment course. The follower exposes controls to start, stop, pause, and resume movement, as well as options for looping and rotation along the path.

Note: This method will only be available if the PathFollower Game Object has been built into Phaser.

Parameters:

nametypeoptionaldescription
pathPhaser.Curves.PathNoThe Path this PathFollower is connected to.
xnumberNoThe horizontal position of this Game Object in the world.
ynumberNoThe vertical position of this Game Object in the world.
texturestring | Phaser.Textures.TextureNoThe key, or instance of the Texture this Game Object will use to render with, as stored in the Texture Manager.
framestring | numberYesAn optional frame from the Texture this Game Object is rendering with.

Returns: Phaser.GameObjects.PathFollower - The Game Object that was created.

Source: src/gameobjects/pathfollower/PathFollowerFactory.js#L10
Since: 3.0.0

gradient​

<instance> gradient([config], [x], [y], [width], [height])​

Description:

Creates a new Gradient Game Object and adds it to the Scene.

Note: This method will only be available if the Gradient Game Object and WebGL support have been built into Phaser.

Tags:

  • webglOnly

Parameters:

nametypeoptionaldefaultdescription
configstring | Phaser.Types.GameObjects.Gradient.GradientQuadConfigYesThe configuration object this Gradient will use. This defines the shape and appearance of the gradient texture.
xnumberYes0The horizontal position of this Game Object in the world.
ynumberYes0The vertical position of this Game Object in the world.
widthnumberYes128The width of the Game Object.
heightnumberYes128The height of the Game Object.

Returns: Phaser.GameObjects.Gradient - The Game Object that was created.

Source: src/gameobjects/gradient/GradientFactory.js#L10
Since: 4.0.0

graphics​

<instance> graphics([config])​

Description:

Creates a new Graphics Game Object and adds it to the Scene.

Note: This method will only be available if the Graphics Game Object has been built into Phaser.

Parameters:

nametypeoptionaldescription
configPhaser.Types.GameObjects.Graphics.OptionsYesThe Graphics configuration.

Returns: Phaser.GameObjects.Graphics - The Game Object that was created.

Source: src/gameobjects/graphics/GraphicsFactory.js#L10
Since: 3.0.0

grid​

<instance> grid([x], [y], [width], [height], [cellWidth], [cellHeight], [fillColor], [fillAlpha], [outlineFillColor], [outlineFillAlpha])​

Description:

Creates a new Grid Shape Game Object and adds it to the Scene.

Note: This method will only be available if the Grid Game Object has been built into Phaser.

The Grid 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.

A Grid Shape allows you to display a grid in your game, where you can control the size of the grid as well as the width and height of the grid cells. You can set a fill color for each grid cell as well as an alternate fill color. When the alternate fill color is set then the grid cells will alternate the fill colors as they render, creating a chess-board effect. You can also optionally have an outline fill color. If set, this draws lines between the grid cells in the given color. If you specify an outline color with an alpha of zero, then it will draw the cells spaced out, but without the lines between them.

Parameters:

nametypeoptionaldefaultdescription
xnumberYes0The horizontal position of this Game Object in the world.
ynumberYes0The vertical position of this Game Object in the world.
widthnumberYes128The width of the grid.
heightnumberYes128The height of the grid.
cellWidthnumberYes32The width of one cell in the grid.
cellHeightnumberYes32The height of one cell in the grid.
fillColornumberYesThe color the grid cells will be filled with, i.e. 0xff0000 for red.
fillAlphanumberYesThe alpha the grid cells will be filled with. You can also set the alpha of the overall Shape using its alpha property.
outlineFillColornumberYesThe color of the lines between the grid cells.
outlineFillAlphanumberYesThe alpha of the lines between the grid cells.

Returns: Phaser.GameObjects.Grid - The Game Object that was created.

Source: src/gameobjects/shape/grid/GridFactory.js#L10
Since: 3.13.0

group​

<instance> group([children], [config])​

Description:

Creates a new Group Game Object and adds it to the Scene.

A Group is a way of grouping together Game Objects so they can be managed as a single unit. Groups have no position or visual representation of their own; they are purely an organizational tool. A common use-case is object pooling: pre-creating a fixed set of identical Game Objects and recycling them rather than creating and destroying them at runtime. Groups can also apply bulk operations (such as setting visibility or enabling physics) to all of their members at once.

Note: This method will only be available if the Group Game Object has been built into Phaser.

Parameters:

nametypeoptionaldescription
childrenArray.<Phaser.GameObjects.GameObject> | Phaser.Types.GameObjects.Group.GroupConfigArray.<Phaser.Types.GameObjects.Group.GroupConfig>Phaser.Types.GameObjects.Group.GroupCreateConfig
configPhaser.Types.GameObjects.Group.GroupConfig | Phaser.Types.GameObjects.Group.GroupCreateConfigYesA Group Configuration object.

Returns: Phaser.GameObjects.Group - The Game Object that was created.

Source: src/gameobjects/group/GroupFactory.js#L10
Since: 3.0.0

image​

<instance> image(x, y, texture, [frame])​

Description:

Creates a new Image Game Object and adds it to the Scene.

Note: This method will only be available if the Image Game Object has been built into Phaser.

Parameters:

nametypeoptionaldescription
xnumberNoThe horizontal position of this Game Object in the world.
ynumberNoThe vertical position of this Game Object in the world.
texturestring | Phaser.Textures.TextureNoThe key, or instance of the Texture this Game Object will use to render with, as stored in the Texture Manager.
framestring | numberYesAn optional frame from the Texture this Game Object is rendering with.

Returns: Phaser.GameObjects.Image - The Game Object that was created.

Source: src/gameobjects/image/ImageFactory.js#L10
Since: 3.0.0

isobox​

<instance> isobox([x], [y], [size], [height], [fillTop], [fillLeft], [fillRight])​

Description:

Creates a new IsoBox Shape Game Object and adds it to the Scene.

Note: This method will only be available if the IsoBox Game Object has been built into Phaser.

The IsoBox 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 IsoBox is an 'isometric' rectangle. Each face of it has a different fill color. You can set the color of the top, left and right faces of the rectangle respectively. You can also choose which of the faces are rendered via the showTop, showLeft and showRight properties.

You cannot view an IsoBox from under-neath, however you can change the 'angle' by setting the projection property.

Parameters:

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

Returns: Phaser.GameObjects.IsoBox - The Game Object that was created.

Source: src/gameobjects/shape/isobox/IsoBoxFactory.js#L10
Since: 3.13.0

isotriangle​

<instance> isotriangle([x], [y], [size], [height], [reversed], [fillTop], [fillLeft], [fillRight])​

Description:

Creates a new IsoTriangle Shape Game Object and adds it to the Scene.

Note: This method will only be available if the IsoTriangle Game Object has been built into Phaser.

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 underneath, however you can change the 'angle' by setting the projection property. The reversed property controls if the IsoTriangle is rendered upside down or not.

Parameters:

nametypeoptionaldefaultdescription
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.

Returns: Phaser.GameObjects.IsoTriangle - The Game Object that was created.

Source: src/gameobjects/shape/isotriangle/IsoTriangleFactory.js#L10
Since: 3.13.0

layer​

<instance> layer([children])​

Description:

Creates a new Layer Game Object and adds it to the Scene.

Note: This method will only be available if the Layer Game Object has been built into Phaser.

Parameters:

nametypeoptionaldescription
childrenPhaser.GameObjects.GameObject | Array.<Phaser.GameObjects.GameObject>YesAn optional array of Game Objects to add to this Layer.

Returns: Phaser.GameObjects.Layer - The Game Object that was created.

Source: src/gameobjects/layer/LayerFactory.js#L10
Since: 3.50.0

line​

<instance> line([x], [y], [x1], [y1], [x2], [y2], [strokeColor], [strokeAlpha])​

Description:

Creates a new Line Shape Game Object and adds it to the Scene.

Note: This method will only be available if the Line Game Object has been built into Phaser.

The Line 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 stroke colors and cannot be filled.

A Line Shape allows you to draw a line between two points in your game. You can control the stroke color and thickness of the line. In WebGL only you can also specify a different thickness for the start and end of the line, allowing you to render lines that taper-off.

If you need to draw multiple lines in a sequence you may wish to use the Polygon Shape instead.

Parameters:

nametypeoptionaldefaultdescription
xnumberYes0The horizontal position of this Game Object in the world.
ynumberYes0The vertical position of this Game Object in the world.
x1numberYes0The horizontal position of the start of the line.
y1numberYes0The vertical position of the start of the line.
x2numberYes128The horizontal position of the end of the line.
y2numberYes0The vertical position of the end of the line.
strokeColornumberYesThe color the line will be drawn in, i.e. 0xff0000 for red.
strokeAlphanumberYesThe alpha the line will be drawn in. You can also set the alpha of the overall Shape using its alpha property.

Returns: Phaser.GameObjects.Line - The Game Object that was created.

Source: src/gameobjects/shape/line/LineFactory.js#L10
Since: 3.13.0

nineslice​

<instance> nineslice(x, y, texture, [frame], [width], [height], [leftWidth], [rightWidth], [topHeight], [bottomHeight], [tileX], [tileY])​

Description:

A Nine Slice Game Object allows you to display a texture-based object that can be stretched both horizontally and vertically, but that retains fixed-sized corners. The dimensions of the corners are set via the parameters to this class.

This is extremely useful for UI and button like elements, where you need them to expand to accommodate the content without distorting the texture.

The texture you provide for this Game Object should be based on the following layout structure:


     A                          B

   +---+----------------------+---+

 C | 1 |          2           | 3 |

   +---+----------------------+---+

   |   |                      |   |

   | 4 |          5           | 6 |

   |   |                      |   |

   +---+----------------------+---+

 D | 7 |          8           | 9 |

   +---+----------------------+---+

When changing this object's width and / or height:

areas 1, 3, 7 and 9 (the corners) will remain unscaled

areas 2 and 8 will be stretched horizontally only

areas 4 and 6 will be stretched vertically only

area 5 will be stretched both horizontally and vertically

You can also create a 3 slice Game Object:

This works in a similar way, except you can only stretch it horizontally. Therefore, it requires less configuration:


     A                          B

   +---+----------------------+---+

   |   |                      |   |

 C | 1 |          2           | 3 |

   |   |                      |   |

   +---+----------------------+---+

When changing this object's width (you cannot change its height)

areas 1 and 3 will remain unscaled

area 2 will be stretched horizontally

The above configuration concept is adapted from the Pixi NineSlicePlane.

To specify a 3 slice object instead of a 9 slice you should only provide the leftWidth and rightWidth parameters. To create a 9 slice you must supply all parameters.

The minimum width this Game Object can be is the total of leftWidth + rightWidth. The minimum height this Game Object can be is the total of topHeight + bottomHeight. If you need to display this object at a smaller size, you can scale it.

In terms of performance, using a 3 slice Game Object is the equivalent of having 3 Sprites in a row. Using a 9 slice Game Object is the equivalent of having 9 Sprites in a row. The vertices of this object are all batched together and can co-exist with other Sprites and graphics on the display list, without incurring any additional overhead.

As of Phaser 3.60 this Game Object is WebGL only.

Tags:

  • webglOnly

Parameters:

nametypeoptionaldefaultdescription
xnumberNoThe horizontal position of the center of this Game Object in the world.
ynumberNoThe vertical position of the center of this Game Object in the world.
texturestring | Phaser.Textures.TextureNoThe key, or instance of the Texture this Game Object will use to render with, as stored in the Texture Manager.
framestring | numberYesAn optional frame from the Texture this Game Object is rendering with.
widthnumberYes256The width of the Nine Slice Game Object. You can adjust the width post-creation.
heightnumberYes256The height of the Nine Slice Game Object. If this is a 3 slice object the height will be fixed to the height of the texture and cannot be changed.
leftWidthnumberYes10The size of the left vertical column (A).
rightWidthnumberYes10The size of the right vertical column (B).
topHeightnumberYes0The size of the top horizontal row (C). Set to zero or undefined to create a 3 slice object.
bottomHeightnumberYes0The size of the bottom horizontal row (D). Set to zero or undefined to create a 3 slice object.
tileXbooleanYesfalseWhether to tile the horizontal regions instead of stretching them. Some stretching will still occur to keep the tile count a whole number.
tileYbooleanYesfalseWhether to tile the vertical regions instead of stretching them. Some stretching will still occur to keep the tile count a whole number.

Returns: Phaser.GameObjects.NineSlice - The Game Object that was created.

Source: src/gameobjects/nineslice/NineSliceFactory.js#L10
Since: 3.60.0

noise​

<instance> noise([config], [x], [y], [width], [height])​

Description:

Creates a new Noise Game Object and adds it to the Scene.

Note: This method will only be available if the Noise Game Object and WebGL support have been built into Phaser.

Tags:

  • webglOnly

Parameters:

nametypeoptionaldefaultdescription
configstring | Phaser.Types.GameObjects.Noise.NoiseQuadConfigYesThe configuration object this Noise will use. This defines the shape and appearance of the noise texture.
xnumberYes0The horizontal position of this Game Object in the world.
ynumberYes0The vertical position of this Game Object in the world.
widthnumberYes128The width of the Game Object, in pixels.
heightnumberYes128The height of the Game Object, in pixels.

Returns: Phaser.GameObjects.Noise - The Game Object that was created.

Source: src/gameobjects/noise/NoiseFactory.js#L10
Since: 4.0.0

noisecell2d​

<instance> noisecell2d([config], [x], [y], [width], [height])​

Description:

Creates a new NoiseCell2D Game Object and adds it to the Scene.

Note: This method will only be available if the NoiseCell2D Game Object and WebGL support have been built into Phaser.

Tags:

  • webglOnly

Parameters:

nametypeoptionaldefaultdescription
configstring | Phaser.Types.GameObjects.NoiseCell2D.NoiseCell2DQuadConfigYesThe configuration object this NoiseCell2D will use. This defines the shape and appearance of the NoiseCell2D texture.
xnumberYes0The horizontal position of this Game Object in the world.
ynumberYes0The vertical position of this Game Object in the world.
widthnumberYes128The width of the Game Object.
heightnumberYes128The height of the Game Object.

Returns: Phaser.GameObjects.NoiseCell2D - The Game Object that was created.

Source: src/gameobjects/noise/noisecell2d/NoiseCell2DFactory.js#L10
Since: 4.0.0

noisecell3d​

<instance> noisecell3d([config], [x], [y], [width], [height])​

Description:

Creates a new NoiseCell3D Game Object and adds it to the Scene.

Note: This method will only be available if the NoiseCell3D Game Object and WebGL support have been built into Phaser.

Tags:

  • webglOnly

Parameters:

nametypeoptionaldefaultdescription
configstring | Phaser.Types.GameObjects.NoiseCell3D.NoiseCell3DQuadConfigYesThe configuration object this NoiseCell3D will use. This defines the shape and appearance of the NoiseCell3D texture.
xnumberYes0The horizontal position of this Game Object in the world.
ynumberYes0The vertical position of this Game Object in the world.
widthnumberYes128The width of the Game Object.
heightnumberYes128The height of the Game Object.

Returns: Phaser.GameObjects.NoiseCell3D - The Game Object that was created.

Source: src/gameobjects/noise/noisecell3d/NoiseCell3DFactory.js#L10
Since: 4.0.0

noisecell4d​

<instance> noisecell4d([config], [x], [y], [width], [height])​

Description:

Creates a new NoiseCell4D Game Object and adds it to the Scene.

Note: This method will only be available if the NoiseCell4D Game Object and WebGL support have been built into Phaser.

Tags:

  • webglOnly

Parameters:

nametypeoptionaldefaultdescription
configstring | Phaser.Types.GameObjects.NoiseCell4D.NoiseCell4DQuadConfigYesThe configuration object this NoiseCell4D will use. This defines the shape and appearance of the NoiseCell4D texture.
xnumberYes0The horizontal position of this Game Object in the world.
ynumberYes0The vertical position of this Game Object in the world.
widthnumberYes128The width of the Game Object.
heightnumberYes128The height of the Game Object.

Returns: Phaser.GameObjects.NoiseCell4D - The Game Object that was created.

Source: src/gameobjects/noise/noisecell4d/NoiseCell4DFactory.js#L10
Since: 4.0.0

noisesimplex2d​

<instance> noisesimplex2d([config], [x], [y], [width], [height])​

Description:

Creates a new NoiseSimplex2D Game Object and adds it to the Scene.

Note: This method will only be available if the NoiseSimplex2D Game Object and WebGL support have been built into Phaser.

Tags:

  • webglOnly

Parameters:

nametypeoptionaldefaultdescription
configstring | Phaser.Types.GameObjects.NoiseSimplex2D.NoiseSimplex2DQuadConfigYesThe configuration object this NoiseSimplex2D will use. This defines the shape and appearance of the NoiseSimplex2D texture.
xnumberYes0The horizontal position of this Game Object in the world.
ynumberYes0The vertical position of this Game Object in the world.
widthnumberYes128The width of the Game Object.
heightnumberYes128The height of the Game Object.

Returns: Phaser.GameObjects.NoiseSimplex2D - The Game Object that was created.

Source: src/gameobjects/noise/noisesimplex2d/NoiseSimplex2DFactory.js#L10
Since: 4.0.0

noisesimplex3d​

<instance> noisesimplex3d([config], [x], [y], [width], [height])​

Description:

Creates a new NoiseSimplex3D Game Object and adds it to the Scene.

Note: This method will only be available if the NoiseSimplex3D Game Object and WebGL support have been built into Phaser.

Tags:

  • webglOnly

Parameters:

nametypeoptionaldefaultdescription
configstring | Phaser.Types.GameObjects.NoiseSimplex3D.NoiseSimplex3DQuadConfigYesThe configuration object this NoiseSimplex3D will use. This defines the shape and appearance of the NoiseSimplex3D texture.
xnumberYes0The horizontal position of this Game Object in the world.
ynumberYes0The vertical position of this Game Object in the world.
widthnumberYes128The width of the Game Object.
heightnumberYes128The height of the Game Object.

Returns: Phaser.GameObjects.NoiseSimplex3D - The Game Object that was created.

Source: src/gameobjects/noise/noisesimplex3d/NoiseSimplex3DFactory.js#L10
Since: 4.0.0

particles​

<instance> particles([x], [y], [texture], [config])​

Description:

Creates a new Particle Emitter Game Object and adds it to the Scene.

If you wish to configure the Emitter after creating it, use the ParticleEmitter.setConfig method.

Prior to Phaser v3.60 this function would create a ParticleEmitterManager. These were removed in v3.60 and replaced with creating a ParticleEmitter instance directly. Please see the updated function parameters and class documentation for more details.

Note: This method will only be available if the Particles Game Object has been built into Phaser.

Parameters:

nametypeoptionaldescription
xnumberYesThe horizontal position of this Game Object in the world.
ynumberYesThe vertical position of this Game Object in the world.
texturestring | Phaser.Textures.TextureYesThe key, or instance of the Texture this Game Object will use to render with, as stored in the Texture Manager.
configPhaser.Types.GameObjects.Particles.ParticleEmitterConfigYesConfiguration settings for the Particle Emitter.

Returns: Phaser.GameObjects.Particles.ParticleEmitter - The Game Object that was created.

Source: src/gameobjects/particles/ParticleEmitterFactory.js#L10
Since: 3.60.0

path​

<instance> path(x, y)​

Description:

Creates a new Path Object.

Parameters:

nametypeoptionaldescription
xnumberNoThe horizontal position of this Path.
ynumberNoThe vertical position of this Path.

Returns: Phaser.Curves.Path - The Path Object that was created.

Source: src/curves/path/Path.js#L912
Since: 3.0.0

pointlight​

<instance> pointlight(x, y, [color], [radius], [intensity], [attenuation])​

Description:

Creates a new Point Light Game Object and adds it to the Scene.

Note: This method will only be available if the Point Light Game Object has been built into Phaser.

The Point Light Game Object provides a way to add a point light effect into your game, without the expensive shader processing requirements of the traditional Light Game Object.

The difference is that the Point Light renders using a custom shader, designed to give the impression of a point light source, of variable radius, intensity and color, in your game. However, unlike the Light Game Object, it does not impact any other Game Objects, or use their normal maps for calculations. This makes them extremely fast to render compared to Lights and perfect for special effects, such as flickering torches or muzzle flashes.

For maximum performance you should batch Point Light Game Objects together. This means ensuring they follow each other consecutively on the display list. Ideally, use a Layer Game Object and then add just Point Lights to it, so that it can batch together the rendering of the lights. You don't have to do this, and if you've only a handful of Point Lights in your game then it's perfectly safe to mix them into the display list as normal. However, if you're using a large number of them, please consider how they are mixed into the display list.

The renderer will automatically cull Point Lights. Those with a radius that does not intersect with the Camera will be skipped in the rendering list. This happens automatically and the culled state is refreshed every frame, for every camera.

The origin of a Point Light is always 0.5 and it cannot be changed.

Point Lights are a WebGL only feature and do not have a Canvas counterpart.

Parameters:

nametypeoptionaldefaultdescription
xnumberNoThe horizontal position of this Point Light in the world.
ynumberNoThe vertical position of this Point Light in the world.
colornumberYes"0xffffff"The color of the Point Light, given as a hex value.
radiusnumberYes128The radius of the Point Light.
intensitynumberYes1The intensity, or color blend, of the Point Light.
attenuationnumberYes0.1The attenuation of the Point Light. This is the reduction of light from the center point.

Returns: Phaser.GameObjects.PointLight - The Game Object that was created.

Source: src/gameobjects/pointlight/PointLightFactory.js#L10
Since: 3.50.0

polygon​

<instance> polygon([x], [y], [points], [fillColor], [fillAlpha])​

Description:

Creates a new Polygon Shape Game Object and adds it to the Scene.

Note: This method will only be available if the Polygon Game Object has been built into Phaser.

The Polygon 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.

The Polygon Shape is created by providing a list of points, which are then used to create an internal Polygon geometry object. The points can be set from a variety of formats:

  • An array of Point or Vector2 objects: [new Phaser.Math.Vector2(x1, y1), ...]

  • An array of objects with public x/y properties: [obj1, obj2, ...]

  • An array of paired numbers that represent point coordinates: [x1,y1, x2,y2, ...]

  • An array of arrays with two elements representing x/y coordinates: [[x1, y1], [x2, y2], ...]

By default the x and y coordinates of this Shape refer to the center of it. However, depending on the coordinates of the points provided, the final shape may be rendered offset from its origin.

Parameters:

nametypeoptionaldefaultdescription
xnumberYes0The horizontal position of this Game Object in the world.
ynumberYes0The vertical position of this Game Object in the world.
pointsanyYesThe points that make up the polygon.
fillColornumberYesThe color the polygon will be filled with, i.e. 0xff0000 for red.
fillAlphanumberYesThe alpha the polygon will be filled with. You can also set the alpha of the overall Shape using its alpha property.

Returns: Phaser.GameObjects.Polygon - The Game Object that was created.

Source: src/gameobjects/shape/polygon/PolygonFactory.js#L10
Since: 3.13.0

rectangle​

<instance> rectangle([x], [y], [width], [height], [fillColor], [fillAlpha])​

Description:

Creates a new Rectangle Shape Game Object and adds it to the Scene.

Note: This method will only be available if the Rectangle Game Object has been built into Phaser.

The Rectangle 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.

You can change the size of the rectangle by changing the width and height properties.

Parameters:

nametypeoptionaldefaultdescription
xnumberYes0The horizontal position of this Game Object in the world.
ynumberYes0The vertical position of this Game Object in the world.
widthnumberYes128The width of the rectangle.
heightnumberYes128The height of the rectangle.
fillColornumberYesThe color the rectangle will be filled with, i.e. 0xff0000 for red.
fillAlphanumberYesThe alpha the rectangle will be filled with. You can also set the alpha of the overall Shape using its alpha property.

Returns: Phaser.GameObjects.Rectangle - The Game Object that was created.

Source: src/gameobjects/shape/rectangle/RectangleFactory.js#L10
Since: 3.13.0

register​

<static> register(factoryType, factoryFunction)​

Description:

Registers a Game Object factory function on the GameObjectFactory prototype, making it available for creating Game Objects via the Scene's add property.

Parameters:

nametypeoptionaldescription
factoryTypestringNoThe key under which the factory will be registered, accessible as Phaser.Scene.add[factoryType].
factoryFunctionfunctionNoThe factory function to be called when Phaser.Scene.add[factoryType] is invoked.

Source: src/gameobjects/GameObjectFactory.js#L186
Since: 3.0.0

remove​

<static> remove(factoryType)​

Description:

Removes a Game Object factory function from the GameObjectFactory prototype.

Parameters:

nametypeoptionaldescription
factoryTypestringNoThe key of the factory that you want to remove from the GameObjectFactory.

Source: src/gameobjects/GameObjectFactory.js#L205
Since: 3.0.0

renderTexture​

<instance> renderTexture(x, y, [width], [height])​

Description:

Creates a new Render Texture Game Object and adds it to the Scene.

Note: This method will only be available if the Render Texture Game Object has been built into Phaser.

A Render Texture is a combination of Dynamic Texture and an Image Game Object, that uses the Dynamic Texture to display itself with.

A Dynamic Texture is a special texture that allows you to draw textures, frames and most kinds of Game Objects directly to it.

You can take many complex objects and draw them to this one texture, which can then be used as the base texture for other Game Objects, such as Sprites. Should you then update this texture, all Game Objects using it will instantly be updated as well, reflecting the changes immediately.

It's a powerful way to generate dynamic textures at run-time that are WebGL friendly and don't invoke expensive GPU uploads on each change.

Parameters:

nametypeoptionaldefaultdescription
xnumberNoThe horizontal position of this Game Object in the world.
ynumberNoThe vertical position of this Game Object in the world.
widthnumberYes32The width of the Render Texture.
heightnumberYes32The height of the Render Texture.

Returns: Phaser.GameObjects.RenderTexture - The Game Object that was created.

Source: src/gameobjects/rendertexture/RenderTextureFactory.js#L10
Since: 3.2.0

rope​

<instance> rope(x, y, texture, [frame], [points], [horizontal], [colors], [alphas])​

Description:

Creates a new Rope Game Object and adds it to the Scene.

Note: This method will only be available if the Rope Game Object and WebGL support have been built into Phaser.

Tags:

  • webglOnly

Parameters:

nametypeoptionaldefaultdescription
xnumberNoThe horizontal position of this Game Object in the world.
ynumberNoThe vertical position of this Game Object in the world.
texturestring | Phaser.Textures.TextureNoThe key, or instance of the Texture this Game Object will use to render with, as stored in the Texture Manager.
framestring | numberYesAn optional frame from the Texture this Game Object is rendering with.
pointsArray.<Phaser.Types.Math.Vector2Like>YesAn array containing the vertices data for this Rope. If none is provided a simple quad is created. See setPoints to set this post-creation.
horizontalbooleanYestrueShould the vertices of this Rope be aligned horizontally (true), or vertically (false)?
colorsArray.<number>YesAn optional array containing the color data for this Rope. You should provide one color value per pair of vertices.
alphasArray.<number>YesAn optional array containing the alpha data for this Rope. You should provide one alpha value per pair of vertices.

Returns: Phaser.GameObjects.Rope - The Game Object that was created.

Source: src/gameobjects/rope/RopeFactory.js#L10
Since: 3.23.0

shader​

<instance> shader(config, [x], [y], [width], [height], [textures])​

Description:

Creates a new Shader Game Object and adds it to the Scene.

A Shader Game Object renders a custom GLSL fragment shader as a rectangular Game Object, allowing you to display procedural visual effects, generative graphics, or post-processing-style visuals directly within your game world. The shader runs on the GPU and can receive custom uniforms as well as up to four texture channel inputs (iChannel0 to iChannel3), making it compatible with shaders written in the Shadertoy style.

Note: This method will only be available if the Shader Game Object and WebGL support have been built into Phaser.

Tags:

  • webglOnly

Parameters:

nametypeoptionaldefaultdescription
configstring | Phaser.Types.GameObjects.Shader.ShaderQuadConfigNoThe configuration object this Shader will use. It can also be a key that corresponds to a shader in the shader cache, which will be used as fragmentKey in a new config object.
xnumberYes0The horizontal position of this Game Object in the world.
ynumberYes0The vertical position of this Game Object in the world.
widthnumberYes128The width of the Game Object.
heightnumberYes128The height of the Game Object.
texturesArray.<string>YesOptional array of texture keys to bind to the iChannel0...3 uniforms. The textures must already exist in the Texture Manager.

Returns: Phaser.GameObjects.Shader - The Game Object that was created.

Source: src/gameobjects/shader/ShaderFactory.js#L10
Since: 3.17.0

sprite​

<instance> sprite(x, y, texture, [frame])​

Description:

Creates a new Sprite Game Object and adds it to the Scene.

Note: This method will only be available if the Sprite Game Object has been built into Phaser.

Parameters:

nametypeoptionaldescription
xnumberNoThe horizontal position of this Game Object in the world.
ynumberNoThe vertical position of this Game Object in the world.
texturestring | Phaser.Textures.TextureNoThe key, or instance of the Texture this Game Object will use to render with, as stored in the Texture Manager.
framestring | numberYesAn optional frame from the Texture this Game Object is rendering with.

Returns: Phaser.GameObjects.Sprite - The Game Object that was created.

Source: src/gameobjects/sprite/SpriteFactory.js#L10
Since: 3.0.0

spriteGPULayer​

<instance> spriteGPULayer(texture, [size])​

Description:

Creates a new SpriteGPULayer Game Object and adds it to the Scene.

A SpriteGPULayer is a high-performance batch renderer that draws a collection of sprites sharing the same texture in a single GPU draw call. Use it when you need to render many instances of the same sprite with minimal draw call overhead, such as for particle-like effects, tilemaps, or large crowds of identical objects.

Note: This method will only be available if the SpriteGPULayer Game Object has been built into Phaser.

Parameters:

nametypeoptionaldescription
texturestring | Phaser.Textures.TextureNoThe key, or instance of the Texture this Game Object will use to render with, as stored in the Texture Manager.
sizenumberYesThe maximum number of sprites the SpriteGPULayer can render in a single batch. Default 1.

Returns: Phaser.GameObjects.SpriteGPULayer - The Game Object that was created.

Source: src/gameobjects/spritegpulayer/SpriteGPULayerFactory.js#L10
Since: 4.0.0

stamp​

<instance> stamp(x, y, texture, [frame])​

Description:

Creates a new Stamp Game Object and adds it to the Scene.

Note: This method will only be available if the Stamp Game Object has been built into Phaser.

Parameters:

nametypeoptionaldescription
xnumberNoThe horizontal position of this Game Object in the world.
ynumberNoThe vertical position of this Game Object in the world.
texturestring | Phaser.Textures.TextureNoThe key, or instance of the Texture this Game Object will use to render with, as stored in the Texture Manager.
framestring | numberYesAn optional frame from the Texture this Game Object is rendering with.

Returns: Phaser.GameObjects.Stamp - The Game Object that was created.

Source: src/gameobjects/stamp/StampFactory.js#L10
Since: 4.0.0

star​

<instance> star([x], [y], [points], [innerRadius], [outerRadius], [fillColor], [fillAlpha])​

Description:

Creates a new Star Shape Game Object and adds it to the Scene.

Note: This method will only be available if the Star Game Object has been built into Phaser.

The Star 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.

As the name implies, the Star shape will display a star in your game. You can control several aspects of it including the number of points that constitute the star. The default is 5. If you change it to 4 it will render as a diamond. If you increase them, you'll get a more spiky star shape.

You can also control the inner and outer radius, which is how 'long' each point of the star is. Modify these values to create more interesting shapes.

Parameters:

nametypeoptionaldefaultdescription
xnumberYes0The horizontal position of this Game Object in the world.
ynumberYes0The vertical position of this Game Object in the world.
pointsnumberYes5The number of points on the star.
innerRadiusnumberYes32The inner radius of the star.
outerRadiusnumberYes64The outer radius of the star.
fillColornumberYesThe color the star will be filled with, i.e. 0xff0000 for red.
fillAlphanumberYesThe alpha the star will be filled with. You can also set the alpha of the overall Shape using its alpha property.

Returns: Phaser.GameObjects.Star - The Game Object that was created.

Source: src/gameobjects/shape/star/StarFactory.js#L10
Since: 3.13.0

text​

<instance> text(x, y, text, [style])​

Description:

Creates a new Text Game Object and adds it to the Scene.

The Text object renders one or more lines of styled text to an internal hidden Canvas, which is then uploaded as a texture and displayed within the Scene.

Text objects work by creating their own internal hidden Canvas and then renders text to it using the standard Canvas fillText API. It then creates a texture from this canvas which is rendered to your game during the render pass.

Because it uses the Canvas API you can take advantage of all the features this offers, such as applying gradient fills to the text, or strokes, shadows and more. You can also use custom fonts loaded externally, such as Google or TypeKit Web fonts.

You can only display fonts that are currently loaded and available to the browser: therefore fonts must be pre-loaded. Phaser does not do this for you, so you will require the use of a 3rd party font loader, or have the fonts already available in the CSS on the page in which your Phaser game resides.

See this for the available default fonts across mobile browsers.

A note on performance: Every time the contents of a Text object changes, i.e. changing the text being displayed, or the style of the text, it needs to remake the Text canvas, and if on WebGL, re-upload the new texture to the GPU. This can be an expensive operation if used often, or with large quantities of Text objects in your game. If you run into performance issues you would be better off using Bitmap Text instead, as it benefits from batching and avoids expensive Canvas API calls.

Note: This method will only be available if the Text Game Object has been built into Phaser.

Parameters:

nametypeoptionaldescription
xnumberNoThe horizontal position of this Game Object in the world.
ynumberNoThe vertical position of this Game Object in the world.
textstring | Array.<string>NoThe text this Text object will display.
stylePhaser.Types.GameObjects.Text.TextStyleYesThe Text style configuration object.

Returns: Phaser.GameObjects.Text - The Game Object that was created.

Source: src/gameobjects/text/TextFactory.js#L10
Since: 3.0.0

tilemap​

<instance> tilemap([key], [tileWidth], [tileHeight], [width], [height], [data], [insertNull])​

Description:

Creates a Tilemap from the given key or data, or creates a blank Tilemap if no key/data provided. When loading from CSV or a 2D array, you should specify the tileWidth & tileHeight. When parsing from a map from Tiled, the tileWidth, tileHeight, width & height will be pulled from the map data. For an empty map, you should specify tileWidth, tileHeight, width & height.

Parameters:

nametypeoptionaldefaultdescription
keystringYesThe key in the Phaser cache that corresponds to the loaded tilemap data.
tileWidthnumberYes32The width of a tile in pixels. Pass in null to leave as the default.
tileHeightnumberYes32The height of a tile in pixels. Pass in null to leave as the default.
widthnumberYes10The width of the map in tiles. Pass in null to leave as the default.
heightnumberYes10The height of the map in tiles. Pass in null to leave as the default.
dataArray.<Array.<number>>YesInstead of loading from the cache, you can also load directly from a 2D array of tile indexes. Pass in null for no data.
insertNullbooleanYesfalseControls how empty tiles, tiles with an index of -1, in the map data are handled. If true, empty locations will get a value of null. If false, empty location will get a Tile object with an index of -1. If you've a large sparsely populated map and the tile data doesn't need to change then setting this value to true will help with memory consumption. However if your map is small or you need to update the tiles dynamically, then leave the default value set.

Returns: Phaser.Tilemaps.Tilemap -

Source: src/tilemaps/TilemapFactory.js#L10
Since: 3.0.0

tileSprite​

<instance> tileSprite(x, y, width, height, texture, [frame])​

Description:

Creates a new TileSprite Game Object and adds it to the Scene.

Note: This method will only be available if the TileSprite Game Object has been built into Phaser.

Parameters:

nametypeoptionaldescription
xnumberNoThe horizontal position of this Game Object in the world.
ynumberNoThe vertical position of this Game Object in the world.
widthnumberNoThe width of the Game Object. If zero it will use the size of the texture frame.
heightnumberNoThe height of the Game Object. If zero it will use the size of the texture frame.
texturestring | Phaser.Textures.TextureNoThe key, or instance of the Texture this Game Object will use to render with, as stored in the Texture Manager. Cannot be a DynamicTexture.
framestring | numberYesAn optional frame from the Texture this Game Object is rendering with.

Returns: Phaser.GameObjects.TileSprite - The Game Object that was created.

Source: src/gameobjects/tilesprite/TileSpriteFactory.js#L10
Since: 3.0.0

timeline​

<instance> timeline(config)​

Description:

A Timeline is a way to schedule events to happen at specific times in the future.

You can think of it as an event sequencer for your game, allowing you to schedule the running of callbacks, events and other actions at specific times in the future.

A Timeline is a Scene level system, meaning you can have as many Timelines as you like, each belonging to a different Scene. You can also have multiple Timelines running at the same time.

If the Scene is paused, the Timeline will also pause. If the Scene is destroyed, the Timeline will be automatically destroyed. However, you can control the Timeline directly, pausing, resuming and stopping it at any time.

Create an instance of a Timeline via the Game Object Factory:


const timeline = this.add.timeline();

The Timeline always starts paused. You must call play on it to start it running.

You can also pass in a configuration object on creation, or an array of them:


const timeline = this.add.timeline({

    at: 1000,

    run: () => {

        this.add.sprite(400, 300, 'logo');

    }

});



timeline.play();

In this example we sequence a few different events:


const timeline = this.add.timeline([

    {

        at: 1000,

        run: () => { this.logo = this.add.sprite(400, 300, 'logo'); },

        sound: 'TitleMusic'

    },

    {

        at: 2500,

        tween: {

            targets: this.logo,

            y: 600,

            yoyo: true

        },

        sound: 'Explode'

    },

    {

        at: 8000,

        event: 'HURRY_PLAYER',

        target: this.background,

        set: {

            tint: 0xff0000

        }

    }

]);



timeline.play();

The Timeline can also be looped with the repeat method:```js

timeline.repeat().play();


There are lots of options available to you via the configuration object. See the [Phaser.Types.Time.TimelineEventConfig](../typedef/Phaser.Types.Time.md#TimelineEventConfig) typedef for more details.

**Parameters:**
| name | type | optional | description |
| ---- | ---- | -------- | ----------- |
| config | [Phaser.Types.Time.TimelineEventConfig](../typedef/Phaser.Types.Time.md#TimelineEventConfig) \| Array.\<[Phaser.Types.Time.TimelineEventConfig](../typedef/Phaser.Types.Time.md#TimelineEventConfig)> | No | The configuration object for this Timeline Event, or an array of them. |


**Returns:** [Phaser.Time.Timeline](../class/Phaser.Time.Timeline.md) - The Timeline that was created.


> Source: [src/time/Timeline.js#L807](https://github.com/phaserjs/phaser/blob/v4.0.0/src/time/Timeline.js#L807)  
Since: 3.60.0


---

### triangle

#### \<instance> triangle([x], [y], [x1], [y1], [x2], [y2], [x3], [y3], [fillColor], [fillAlpha])


**Description:**

Creates a new Triangle Shape Game Object and adds it to the Scene.

Note: This method will only be available if the Triangle Game Object has been built into Phaser.

The Triangle 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.

The Triangle consists of 3 lines, joining up to form a triangular shape. You can control the position of each point of these lines. The triangle is always closed and cannot have an open face. If you require that, consider using a Polygon instead.

**Parameters:**
| name | type | optional | default | description |
| ---- | ---- | -------- | ------- | ----------- |
| x | number | Yes | 0 | The horizontal position of this Game Object in the world. |
| y | number | Yes | 0 | The vertical position of this Game Object in the world. |
| x1 | number | Yes | 0 | The horizontal position of the first point in the triangle. |
| y1 | number | Yes | 128 | The vertical position of the first point in the triangle. |
| x2 | number | Yes | 64 | The horizontal position of the second point in the triangle. |
| y2 | number | Yes | 0 | The vertical position of the second point in the triangle. |
| x3 | number | Yes | 128 | The horizontal position of the third point in the triangle. |
| y3 | number | Yes | 128 | The vertical position of the third point in the triangle. |
| fillColor | number | Yes |  | The color the triangle will be filled with, i.e. 0xff0000 for red. |
| fillAlpha | number | Yes |  | The alpha the triangle will be filled with. You can also set the alpha of the overall Shape using its `alpha` property. |


**Returns:** [Phaser.GameObjects.Triangle](../class/Phaser.GameObjects.Triangle.md) - The Game Object that was created.


> Source: [src/gameobjects/shape/triangle/TriangleFactory.js#L10](https://github.com/phaserjs/phaser/blob/v4.0.0/src/gameobjects/shape/triangle/TriangleFactory.js#L10)  
Since: 3.13.0


---

### tween

#### \<instance> tween(config)


**Description:**

Creates a new Tween object.

Note: This method will only be available if Tweens have been built into Phaser.

**Parameters:**
| name | type | optional | description |
| ---- | ---- | -------- | ----------- |
| config | [Phaser.Types.Tweens.TweenBuilderConfig](../typedef/Phaser.Types.Tweens.md#TweenBuilderConfig) \| [Phaser.Types.Tweens.TweenChainBuilderConfig](../typedef/Phaser.Types.Tweens.md#TweenChainBuilderConfig) | [Phaser.Tweens.Tween](../class/Phaser.Tweens.Tween.md) | [Phaser.Tweens.TweenChain](../class/Phaser.Tweens.TweenChain.md) | No | A Tween Configuration object, or a Tween or TweenChain instance. |


**Returns:** [Phaser.Tweens.Tween](../class/Phaser.Tweens.Tween.md) - The Tween that was created.


> Source: [src/tweens/tween/Tween.js#L833](https://github.com/phaserjs/phaser/blob/v4.0.0/src/tweens/tween/Tween.js#L833)  
Since: 3.0.0


---

### tweenchain

#### \<instance> tweenchain(config)


**Description:**

Creates a new TweenChain object and adds it to the Tween Manager.

Note: This method will only be available if Tweens have been built into Phaser.

**Parameters:**
| name | type | optional | description |
| ---- | ---- | -------- | ----------- |
| config | [Phaser.Types.Tweens.TweenBuilderConfig](../typedef/Phaser.Types.Tweens.md#TweenBuilderConfig) \| object | No | The TweenChain configuration. |


**Returns:** [Phaser.Tweens.TweenChain](../class/Phaser.Tweens.TweenChain.md) - The TweenChain that was created.


> Source: [src/tweens/tween/TweenChain.js#L549](https://github.com/phaserjs/phaser/blob/v4.0.0/src/tweens/tween/TweenChain.js#L549)  
Since: 3.60.0


---

### video

#### \<instance> video(x, y, [key])


**Description:**

Creates a new Video Game Object and adds it to the Scene.

This Game Object is capable of handling playback of a video file, video stream or media stream.

You can optionally 'preload' the video into the Phaser Video Cache:

```javascript

preload () {

  this.load.video('ripley', 'assets/aliens.mp4');

}



create () {

  this.add.video(400, 300, 'ripley');

}

You don't have to 'preload' the video. You can also play it directly from a URL:


create () {

  this.add.video(400, 300).loadURL('assets/aliens.mp4');

}

To all intents and purposes, a video is a standard Game Object, just like a Sprite. And as such, you can do all the usual things to it, such as scaling, rotating, cropping, tinting, making interactive, giving a physics body, etc.

Transparent videos are also possible via the WebM file format. Providing the video file has been encoded with an alpha channel, and providing the browser supports WebM playback (not all of them do), then it will render in-game with full transparency.

Autoplaying Videos​

Videos can only autoplay if the browser has been unlocked with an interaction, or satisfies the MEI settings. The policies that control autoplaying are vast and vary between browser. You can, and should, read more about it here: https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide

If your video doesn't contain any audio, then set the noAudio parameter to true when the video is loaded, and it will often allow the video to play immediately:


preload () {

  this.load.video('pixar', 'nemo.mp4', true);

}

The 3rd parameter in the load call tells Phaser that the video doesn't contain any audio tracks. Video without audio can autoplay without requiring a user interaction. Video with audio cannot do this unless it satisfies the browsers MEI settings. See the MDN Autoplay Guide for further details.

Or:


create () {

  this.add.video(400, 300).loadURL('assets/aliens.mp4', true);

}

You can set the noAudio parameter to true even if the video does contain audio. It will still allow the video to play immediately, but the audio will not start.

More details about video playback and the supported media formats can be found on MDN:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement https://developer.mozilla.org/en-US/docs/Web/Media/Formats

Note: This method will only be available if the Video Game Object has been built into Phaser.

Parameters:

nametypeoptionaldescription
xnumberNoThe horizontal position of this Game Object in the world.
ynumberNoThe vertical position of this Game Object in the world.
keystringYesOptional key of the Video this Game Object will play, as stored in the Video Cache.

Returns: Phaser.GameObjects.Video - The Game Object that was created.

Source: src/gameobjects/video/VideoFactory.js#L10
Since: 3.20.0

zone​

<instance> zone(x, y, width, height)​

Description:

Creates a new Zone Game Object and adds it to the Scene.

Note: This method will only be available if the Zone Game Object has been built into Phaser.

Parameters:

nametypeoptionaldescription
xnumberNoThe horizontal position of this Game Object in the world.
ynumberNoThe vertical position of this Game Object in the world.
widthnumberNoThe width of the Game Object.
heightnumberNoThe height of the Game Object.

Returns: Phaser.GameObjects.Zone - The Game Object that was created.

Source: src/gameobjects/zone/ZoneFactory.js#L10
Since: 3.0.0

Public Members​

displayList​

displayList: Phaser.GameObjects.DisplayList​

Description:

A reference to the Scene Display List.

Access: protected

Source: src/gameobjects/GameObjectFactory.js#L63
Since: 3.0.0

events​

events: Phaser.Events.EventEmitter​

Description:

A reference to the Scene Event Emitter.

Access: protected

Source: src/gameobjects/GameObjectFactory.js#L53
Since: 3.50.0

scene​

scene: Phaser.Scene​

Description:

The Scene to which this Game Object Factory belongs.

Access: protected

Source: src/gameobjects/GameObjectFactory.js#L33
Since: 3.0.0

systems​

systems: Phaser.Scenes.Systems​

Description:

A reference to the Scene.Systems.

Access: protected

Source: src/gameobjects/GameObjectFactory.js#L43
Since: 3.0.0

updateList​

updateList: Phaser.GameObjects.UpdateList​

Description:

A reference to the Scene Update List.

Access: protected

Source: src/gameobjects/GameObjectFactory.js#L73
Since: 3.0.0