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.
The Arc Shape is a Game Object that can be added to a Scene, Group or Container. You can treat it like any other Game Object in your game, such as tweening it, scaling it, or enabling it for input or physics. It provides a quick and easy way for you to render this shape in your game without using a texture, while still taking advantage of being fully batched in WebGL.
This shape supports both fill and stroke colors.
When it renders it displays an arc shape. You can control the start and end angles of the arc, as well as if the angles are winding clockwise or anti-clockwise. With the default settings it renders as a complete circle. By changing the angles you can create other arc shapes, such as half-circles.
Arcs also have an iterations property and corresponding setIterations method. This allows you to control how smooth the shape renders in WebGL, by controlling the number of iterations that take place during construction.
BitmapText objects work by taking a texture file and an XML or JSON file that describes the font structure.
During rendering for 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 less 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.
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
The Blitter Game Object is a special kind of container that creates, updates and manages Bob objects. Bobs are designed for rendering speed rather than flexibility. They consist of a texture, or frame from a texture, a position and an alpha value. You cannot scale or rotate them. They use a batched drawing method for speed during rendering.
A Blitter Game Object has one texture bound to it. Bobs created by the Blitter can use any Frame from this Texture to render with, but they cannot use any other Texture. It is this single texture-bind that allows them their speed.
If you have a need to blast a large volume of frames around the screen then Blitter objects are well worth investigating. They are especially useful for using as a base for your own special effects systems.
A Bob belongs to a Blitter Game Object. The Blitter is responsible for managing and rendering this object.
A Bob has a position, alpha value and a frame from a texture that it uses to render with. You can also toggle the flipped and visible state of the Bob. The Frame the Bob uses to render can be changed dynamically, but it must be a Frame within the Texture used by the parent Blitter.
Bob positions are relative to the Blitter parent. So if you move the Blitter parent, all Bob children will have their positions impacted by this change as well.
You can manipulate Bob objects directly from your game code, but the creation and destruction of them should be handled via the Blitter parent.
A Container, as the name implies, can 'contain' other types of Game Object. When a Game Object is added to a Container, the Container becomes responsible for the rendering of it. By default it will be removed from the Display List and instead added to the Containers own internal list.
The position of the Game Object automatically becomes relative to the position of the Container.
The origin of a Container is 0x0 (in local space) and that cannot be changed. The children you add to the Container should be positioned with this value in mind. I.e. you should treat 0x0 as being the center of the Container, and position children positively and negative around it as required.
@@ -11,7 +11,7 @@
Containers can be given a physics body for either Arcade Physics, Impact Physics or Matter Physics. However, if Container children are enabled for physics you may get unexpected results, such as offset bodies, if the Container itself, or any of its ancestors, is positioned anywhere other than at 0 x 0. Container children with physics do not factor in the Container due to the excessive extra calculations needed. Please structure your game to work around this.
It's important to understand the impact of using Containers. They add additional processing overhead into every one of their children. The deeper you nest them, the more the cost escalates. This is especially true for input events. You also loose the ability to set the display depth of Container children in the same flexible manner as those not within them. In short, don't use them for the sake of it. You pay a small cost every time you create one, try to structure your game around avoiding that where possible.
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.
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.
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 }
@@ -18,7 +18,7 @@
Note that you should only have DOM Elements in a Scene with a single Camera. If you require multiple cameras, use parallel scenes to achieve this.
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.
BitmapText objects work by taking a texture file and an XML or JSON file that describes the font structure.
During rendering for 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 less 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.
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
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.
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.
An Extern Game Object is a special type of Game Object that allows you to pass rendering off to a 3rd party.
When you create an Extern and place it in the display list of a Scene, the renderer will process the list as usual. When it finds an Extern it will flush the current batch, clear down the pipeline and prepare a transform matrix which your render function can take advantage of, if required.
The WebGL context is then left is a 'clean' state, ready for you to bind your own shaders, or draw to it, whatever you wish to do. Once you've finished, you should free-up any of your resources. The Extern will then rebind the Phaser pipeline and carry on rendering the display list.
Although this object has lots of properties such as Alpha, Blend Mode and Tint, none of them are used during rendering unless you take advantage of them in your own render code.
The base class that all Game Objects extend. You don't create GameObjects directly and they cannot be added to the display list. Instead, use them as the base for your own custom classes.
The base class that all Game Objects extend. You don't create GameObjects directly and they cannot be added to the display list. Instead, use them as the base for your own custom classes.
The Game Object Creator is a Scene plugin that allows you to quickly create many common types of Game Objects and return them using a configuration object, rather than having to specify a limited set of parameters such as with the GameObjectFactory.
The Game Object Creator is a Scene plugin that allows you to quickly create many common types of Game Objects and return them using a configuration object, rather than having to specify a limited set of parameters such as with the GameObjectFactory.
Game Objects made via this class are automatically added to the Scene and Update List unless you explicitly set the add property in the configuration object to false.
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.
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.
Game Objects directly register themselves with the Factory and inject their own creation methods into the class.
A Graphics object is a way to draw primitive shapes to your game. Primitives include forms of geometry, such as Rectangles, Circles, and Polygons. They also include lines, arcs and curves. When you initially create a Graphics object it will be empty.
A Graphics object is a way to draw primitive shapes to your game. Primitives include forms of geometry, such as Rectangles, Circles, and Polygons. They also include lines, arcs and curves. When you initially create a Graphics object it will be empty.
To draw to it you must first specify a line style or fill style (or both), draw shapes using paths, and finally fill or stroke them. For example:
If your Graphics object doesn't change much (or at all) once you've drawn your shape to it, then you will help performance by calling Phaser.GameObjects.Graphics#generateTexture. This will 'bake' the Graphics object into a Texture, and return it. You can then use this Texture for Sprites or other display objects. If your Graphics object updates frequently then you should avoid doing this, as it will constantly generate new textures, which will consume memory.
As you can tell, Graphics objects are a bit of a trade-off. While they are extremely useful, you need to be careful in their complexity and quantity of them in your game.
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.
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.
An Image is a light-weight Game Object useful for the display of static images in your game, such as logos, backgrounds, scenery or other non-animated elements. Images can have input events and physics bodies, or be tweened, tinted or scrolled. The main difference between an Image and a Sprite is that you cannot animate an Image as they do not have the Animation component.
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.
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.
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.
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.
+- Preparing search index...
- The search index is not available
phaser-jsxFunction Arc
The Arc Shape is a Game Object that can be added to a Scene, Group or Container. You can treat it like any other Game Object in your game, such as tweening it, scaling it, or enabling it for input or physics. It provides a quick and easy way for you to render this shape in your game without using a texture, while still taking advantage of being fully batched in WebGL.
This shape supports both fill and stroke colors.
When it renders it displays an arc shape. You can control the start and end angles of the arc, as well as if the angles are winding clockwise or anti-clockwise. With the default settings it renders as a complete circle. By changing the angles you can create other arc shapes, such as half-circles.
Arcs also have an iterations property and corresponding setIterations method. This allows you to control how smooth the shape renders in WebGL, by controlling the number of iterations that take place during construction.
Parameters
OptionaldeprecatedLegacyContext: anyDeprecated
See
React Docs
-Returns ReactNode
Index
Properties
Returns ReactNode
Index
Properties
- Preparing search index...
- The search index is not available
phaser-jsxFunction BitmapText
BitmapText objects work by taking a texture file and an XML or JSON file that describes the font structure.
+- Preparing search index...
- The search index is not available
phaser-jsxFunction BitmapText
BitmapText objects work by taking a texture file and an XML or JSON file that describes the font structure.
During rendering for 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 less 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
@@ -6,7 +6,7 @@\r,\nor\r\nescape codes into the text string.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
Parameters
OptionaldeprecatedLegacyContext: anyDeprecated
See
React Docs
-Returns ReactNode
Index
Properties
Returns ReactNode
Index
Properties
- Preparing search index...
- The search index is not available
phaser-jsxFunction Blitter
A Blitter Game Object.
+- Preparing search index...
- The search index is not available
phaser-jsxFunction Blitter
A Blitter Game Object.
The Blitter Game Object is a special kind of container that creates, updates and manages Bob objects. Bobs are designed for rendering speed rather than flexibility. They consist of a texture, or frame from a texture, a position and an alpha value. You cannot scale or rotate them. They use a batched drawing method for speed during rendering.
A Blitter Game Object has one texture bound to it. Bobs created by the Blitter can use any Frame from this Texture to render with, but they cannot use any other Texture. It is this single texture-bind that allows them their speed.
If you have a need to blast a large volume of frames around the screen then Blitter objects are well worth investigating. They are especially useful for using as a base for your own special effects systems.
Parameters
OptionaldeprecatedLegacyContext: anyDeprecated
See
React Docs
-Returns ReactNode
Index
Properties
Returns ReactNode
Index
Properties
- Preparing search index...
- The search index is not available
phaser-jsxFunction Bob
A Bob Game Object.
+- Preparing search index...
- The search index is not available
phaser-jsxFunction Bob
A Bob Game Object.
A Bob belongs to a Blitter Game Object. The Blitter is responsible for managing and rendering this object.
A Bob has a position, alpha value and a frame from a texture that it uses to render with. You can also toggle the flipped and visible state of the Bob. The Frame the Bob uses to render can be changed dynamically, but it must be a Frame within the Texture used by the parent Blitter.
Bob positions are relative to the Blitter parent. So if you move the Blitter parent, all Bob children will have their positions impacted by this change as well.
You can manipulate Bob objects directly from your game code, but the creation and destruction of them should be handled via the Blitter parent.
Parameters
OptionaldeprecatedLegacyContext: anyDeprecated
See
React Docs
-Returns ReactNode
Index
Properties
Returns ReactNode
Index
Properties
- Preparing search index...
- The search index is not available
phaser-jsxFunction Container
A Container Game Object.
+- Preparing search index...
- The search index is not available
phaser-jsxFunction Container
A Container Game Object.
A Container, as the name implies, can 'contain' other types of Game Object. When a Game Object is added to a Container, the Container becomes responsible for the rendering of it. By default it will be removed from the Display List and instead added to the Containers own internal list.
The position of the Game Object automatically becomes relative to the position of the Container.
The origin of a Container is 0x0 (in local space) and that cannot be changed. The children you add to the Container should be positioned with this value in mind. I.e. you should treat 0x0 as being the center of the Container, and position children positively and negative around it as required.
@@ -11,7 +11,7 @@Containers can be given a physics body for either Arcade Physics, Impact Physics or Matter Physics. However, if Container children are enabled for physics you may get unexpected results, such as offset bodies, if the Container itself, or any of its ancestors, is positioned anywhere other than at 0 x 0. Container children with physics do not factor in the Container due to the excessive extra calculations needed. Please structure your game to work around this.
It's important to understand the impact of using Containers. They add additional processing overhead into every one of their children. The deeper you nest them, the more the cost escalates. This is especially true for input events. You also loose the ability to set the display depth of Container children in the same flexible manner as those not within them. In short, don't use them for the sake of it. You pay a small cost every time you create one, try to structure your game around avoiding that where possible.
Parameters
OptionaldeprecatedLegacyContext: anyDeprecated
See
React Docs
-Returns ReactNode
Index
Properties
Returns ReactNode
Index
Properties
- Preparing search index...
- The search index is not available
phaser-jsxFunction Curve
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.
+- Preparing search index...
- The search index is not available
phaser-jsxFunction Curve
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
OptionaldeprecatedLegacyContext: anyDeprecated
See
React Docs
-Returns ReactNode
Index
Properties
Returns ReactNode
Index
Properties
- Preparing search index...
- The search index is not available
phaser-jsxFunction DOMElement
DOM Element Game Objects are a way to control and manipulate HTML Elements over the top of your game.
+- Preparing search index...
- The search index is not available
phaser-jsxFunction DOMElement
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:
@@ -18,7 +18,7 @@Note that you should only have DOM Elements in a Scene with a single Camera. If you require multiple cameras, use parallel scenes to achieve this.
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.
Parameters
OptionaldeprecatedLegacyContext: anyDeprecated
See
React Docs
-Returns ReactNode
Index
Properties
Returns ReactNode
Index
Properties
- Preparing search index...
- The search index is not available
phaser-jsxFunction DisplayList
The Display List plugin.
+- Preparing search index...
- The search index is not available
phaser-jsxFunction DisplayList
The Display List plugin.
Display Lists belong to a Scene and maintain the list of Game Objects to render every frame.
Some of these Game Objects may also be part of the Scene's Update List, for updating.
Parameters
OptionaldeprecatedLegacyContext: anyDeprecated
See
React Docs
-Returns ReactNode
Index
Properties
Returns ReactNode
Index
Properties
- Preparing search index...
- The search index is not available
phaser-jsxFunction DynamicBitmapText
BitmapText objects work by taking a texture file and an XML or JSON file that describes the font structure.
+- Preparing search index...
- The search index is not available
phaser-jsxFunction DynamicBitmapText
BitmapText objects work by taking a texture file and an XML or JSON file that describes the font structure.
During rendering for 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 less 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.
@@ -7,7 +7,7 @@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
Parameters
OptionaldeprecatedLegacyContext: anyDeprecated
See
React Docs
-Returns ReactNode
Index
Properties
Returns ReactNode
Index
Properties
- Preparing search index...
- The search index is not available
phaser-jsxFunction Ellipse
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.
+- Preparing search index...
- The search index is not available
phaser-jsxFunction Ellipse
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
OptionaldeprecatedLegacyContext: anyDeprecated
See
React Docs
-Returns ReactNode
Index
Properties
Returns ReactNode
Index
Properties
- Preparing search index...
- The search index is not available
phaser-jsxFunction Extern
An Extern Game Object is a special type of Game Object that allows you to pass rendering off to a 3rd party.
+- Preparing search index...
- The search index is not available
phaser-jsxFunction Extern
An Extern Game Object is a special type of Game Object that allows you to pass rendering off to a 3rd party.
When you create an Extern and place it in the display list of a Scene, the renderer will process the list as usual. When it finds an Extern it will flush the current batch, clear down the pipeline and prepare a transform matrix which your render function can take advantage of, if required.
The WebGL context is then left is a 'clean' state, ready for you to bind your own shaders, or draw to it, whatever you wish to do. Once you've finished, you should free-up any of your resources. The Extern will then rebind the Phaser pipeline and carry on rendering the display list.
Although this object has lots of properties such as Alpha, Blend Mode and Tint, none of them are used during rendering unless you take advantage of them in your own render code.
Parameters
OptionaldeprecatedLegacyContext: anyDeprecated
See
React Docs
-Returns ReactNode
Index
Properties
Returns ReactNode
Index
Properties
- Preparing search index...
- The search index is not available
phaser-jsxFunction GameObject
The base class that all Game Objects extend. You don't create GameObjects directly and they cannot be added to the display list. Instead, use them as the base for your own custom classes.
+- Preparing search index...
- The search index is not available
phaser-jsxFunction GameObject
The base class that all Game Objects extend. You don't create GameObjects directly and they cannot be added to the display list. Instead, use them as the base for your own custom classes.
Parameters
OptionaldeprecatedLegacyContext: anyDeprecated
See
React Docs
-Returns ReactNode
Index
Properties
Returns ReactNode
Index
Properties
- Preparing search index...
- The search index is not available
phaser-jsxFunction GameObjectCreator
The Game Object Creator is a Scene plugin that allows you to quickly create many common types of Game Objects and return them using a configuration object, rather than having to specify a limited set of parameters such as with the GameObjectFactory.
+- Preparing search index...
- The search index is not available
phaser-jsxFunction GameObjectCreator
The Game Object Creator is a Scene plugin that allows you to quickly create many common types of Game Objects and return them using a configuration object, rather than having to specify a limited set of parameters such as with the GameObjectFactory.
Game Objects made via this class are automatically added to the Scene and Update List unless you explicitly set the add property in the configuration object to false.
Parameters
OptionaldeprecatedLegacyContext: anyDeprecated
See
React Docs
-Returns ReactNode
Index
Properties
Returns ReactNode
Index
Properties
- Preparing search index...
- The search index is not available
phaser-jsxFunction 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.
+- Preparing search index...
- The search index is not available
phaser-jsxFunction 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.
Game Objects directly register themselves with the Factory and inject their own creation methods into the class.
Parameters
OptionaldeprecatedLegacyContext: anyDeprecated
See
React Docs
-Returns ReactNode
Index
Properties
Returns ReactNode
Index
Properties
- Preparing search index...
- The search index is not available
phaser-jsxFunction Graphics
A Graphics object is a way to draw primitive shapes to your game. Primitives include forms of geometry, such as Rectangles, Circles, and Polygons. They also include lines, arcs and curves. When you initially create a Graphics object it will be empty.
+- Preparing search index...
- The search index is not available
phaser-jsxFunction Graphics
A Graphics object is a way to draw primitive shapes to your game. Primitives include forms of geometry, such as Rectangles, Circles, and Polygons. They also include lines, arcs and curves. When you initially create a Graphics object it will be empty.
To draw to it you must first specify a line style or fill style (or both), draw shapes using paths, and finally fill or stroke them. For example:
@@ -11,7 +11,7 @@If your Graphics object doesn't change much (or at all) once you've drawn your shape to it, then you will help performance by calling Phaser.GameObjects.Graphics#generateTexture. This will 'bake' the Graphics object into a Texture, and return it. You can then use this Texture for Sprites or other display objects. If your Graphics object updates frequently then you should avoid doing this, as it will constantly generate new textures, which will consume memory.
As you can tell, Graphics objects are a bit of a trade-off. While they are extremely useful, you need to be careful in their complexity and quantity of them in your game.
Parameters
OptionaldeprecatedLegacyContext: anyDeprecated
See
React Docs
-Returns ReactNode
Index
Properties
Returns ReactNode
Index
Properties
- Preparing search index...
- The search index is not available
phaser-jsxFunction Grid
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.
+- Preparing search index...
- The search index is not available
phaser-jsxFunction Grid
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
OptionaldeprecatedLegacyContext: anyDeprecated
See
React Docs
-Returns ReactNode
Index
Properties
Returns ReactNode
Index
Properties
- Preparing search index...
- The search index is not available
phaser-jsxFunction Group
A Group is a way for you to create, manipulate, or recycle similar Game Objects.
+- Preparing search index...
- The search index is not available
phaser-jsxFunction Group
A Group is a way for you to create, manipulate, or recycle similar Game Objects.
Group membership is non-exclusive. A Game Object can belong to several groups, one group, or none.
Groups themselves aren't displayable, and can't be positioned, rotated, scaled, or hidden.
Parameters
OptionaldeprecatedLegacyContext: anyDeprecated
See
React Docs
-Returns ReactNode
Index
Properties
Returns ReactNode
Index
Properties
- Preparing search index...
- The search index is not available
phaser-jsxFunction Image
An Image Game Object.
+- Preparing search index...
- The search index is not available
phaser-jsxFunction Image
An Image Game Object.
An Image is a light-weight Game Object useful for the display of static images in your game, such as logos, backgrounds, scenery or other non-animated elements. Images can have input events and physics bodies, or be tweened, tinted or scrolled. The main difference between an Image and a Sprite is that you cannot animate an Image as they do not have the Animation component.
Parameters
OptionaldeprecatedLegacyContext: anyDeprecated
See
React Docs
-Returns ReactNode
Index
Properties
Returns ReactNode
Index
Properties
- Preparing search index...
- The search index is not available
phaser-jsxFunction IsoBox
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.
+- Preparing search index...
- The search index is not available
phaser-jsxFunction IsoBox
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
OptionaldeprecatedLegacyContext: anyDeprecated
See
React Docs
-Returns ReactNode
Index
Properties
Returns ReactNode
Index
Properties
- Preparing search index...
- The search index is not available
phaser-jsxFunction 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.
+