Graphics#Graphics

new Graphics(game, x, y)

A Graphics object is a way to draw primitives 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 first specify a lineStyle or fillStyle (or both), and then draw a shape. For example:

graphics.beginFill(0xff0000);
graphics.drawCircle(50, 50, 100);
graphics.endFill();

This will draw a circle shape to the Graphics object, with a diameter of 100, located at x: 50, y: 50.

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 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
Name Type Argument Default Description
game Phaser.Game

Current game instance.

x number <optional>
0

X position of the new graphics object.

y number <optional>
0

Y position of the new graphics object.

Source code: gameobjects/Graphics.js (Line 50)
doc_phaser
2017-02-14 10:50:05
Comments
Leave a Comment

Please login to continue.