Version: Phaser v4.0.0-rc.6

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:

graphics.lineStyle(5, 0xFF00FF, 1.0);

graphics.beginPath();

graphics.moveTo(100, 100);

graphics.lineTo(200, 200);

graphics.closePath();

graphics.strokePath();

There are also many helpful methods that draw and fill/stroke common shapes for you.

graphics.lineStyle(5, 0xFF00FF, 1.0);

graphics.fillStyle(0xFFFFFF, 1.0);

graphics.fillRect(50, 50, 400, 200);

graphics.strokeRect(50, 50, 400, 200);

When a Graphics object is rendered it will render differently based on if the game is running under Canvas or WebGL.

Under Canvas it will use the HTML Canvas context drawing operations to draw the path.

Under WebGL the graphics data is decomposed into polygons. Both of these are expensive processes, especially with

complex shapes.

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.

Under WebGL, Graphics uses its own shader which will batch drawing operations.

Try to keep Graphics objects grouped together so they can be batched together.

Avoid mixing object types where possible, as each batch will be flushed,

costing performance.

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.

Constructor

new Graphics(scene, [options])

Parameters

name	type	optional	description
scene	Phaser.Scene	No	The Scene to which this Graphics object belongs.
options	Phaser.Types.GameObjects.Graphics.Options	Yes	Options that set the position and default style of this Graphics object.

Scope: static

Extends

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

Source: src/gameobjects/graphics/Graphics.js#L19
Since: 3.0.0

Inherited Members

From Phaser.GameObjects.Components.AlphaSingle:

alpha

From Phaser.GameObjects.Components.BlendMode:

blendMode

From Phaser.GameObjects.Components.Depth:

depth

From Phaser.GameObjects.Components.Filters:

From Phaser.GameObjects.Components.Lighting:

From Phaser.GameObjects.Components.Mask:

mask

From Phaser.GameObjects.Components.RenderNodes:

From Phaser.GameObjects.Components.ScrollFactor:

From Phaser.GameObjects.Components.Transform:

From Phaser.GameObjects.Components.Visible:

visible

From Phaser.GameObjects.GameObject:

Public Members

commandBuffer

commandBuffer: array

Description:

The array of commands used to render the Graphics.

Source: src/gameobjects/graphics/Graphics.js#L133
Since: 3.0.0