graphics-and-shapes

Use this.add.graphics() for imperative drawing with methods like fillRect, strokeCircle, and fillRoundedRect, or use Shape factories like this.add.rectangle() and this.add.circle() for standalone game objects. Set fillStyle or lineStyle before calling the corresponding draw method.

Use Graphics for dynamic drawing, complex paths, gradients, multiple shapes on one object, or generating textures. Use Shape objects for individual elements needing origin, bounds, input, physics, or tweening, since Shapes include Origin and GetBounds components that Graphics lacks.

The Graphics arc() method takes start and end angles in radians, while the this.add.arc() factory takes angles in degrees from 0 to 360. Mixing these units is the most common cause of incorrectly rotated arcs.

No, Shape game objects do not support setTint() or tint properties. Change their appearance with setFillStyle(color, alpha) and setStrokeStyle(lineWidth, color, alpha), or set fillColor, strokeColor, and alpha properties directly.

generateTexture uses the Canvas API, so WebGL-only fillGradientStyle and lineGradientStyle fills do not appear in generated textures. Only Canvas-compatible drawing operations are captured when baking a Graphics object to a texture.

Graphics replays its command buffer and rebuilds geometry every frame, which is expensive. For static drawings, call generateTexture and use the result as a sprite, group Graphics objects to reduce batch flushes, and tune pathDetailThreshold for complex paths.