Graphiques et formes

--- name: graphics-and-shapes description: "Use this skill when drawing shapes and graphics in Phaser 4. Covers the Graphics game object, lines, rectangles, circles, arcs, polygons, gradients, fill, stroke, and generated textures. Triggers on: Graphics, draw shape, fillRect, lineStyle, polygon, arc." --- # Phaser 4 : Graphics and Shapes > Drawing primitives with the Graphics game object, and using Shape game objects (Arc, Curve, Ellipse, Grid, IsoBox, IsoTriangle, Line, Polygon, Rectangle, Star, Triangle). Related skills: sprites-and-images.md, game-object-components.md --- ## Quick Start ``js // Draw a filled rectangle and stroked circle with Graphics const gfx = this.add.graphics(); gfx.fillStyle(0x00aa00, 1); gfx.fillRect(50, 50, 200, 100); gfx.lineStyle(3, 0xff0000, 1); gfx.strokeCircle(400, 150, 60); ` `js // Same shapes as standalone Shape game objects const rect = this.add.rectangle(150, 100, 200, 100, 0x00aa00); const circle = this.add.circle(400, 150, 60); circle.setStrokeStyle(3, 0xff0000); ` --- ## Core Concepts : Graphics vs Shape Objects Phaser offers two approaches for rendering primitives without textures. ### Graphics Game Object Created with this.add.graphics(). An imperative drawing surface : you call methods like fillRect, strokeCircle, beginPath/lineTo/strokePath to build up a command buffer that replays each frame. - Factory: this.add.graphics(config?) where config is { x?, y?, lineStyle?, fillStyle? }. - Supports paths, arcs, gradients, rounded rectangles, canvas transforms (translateCanvas, scaleCanvas, rotateCanvas), and save/restore. - Can generate a Texture from the drawing via generateTexture(key, width, height). - Expensive to render, especially with complex shapes. Uses its own WebGL shader. Group Graphics objects together to minimize batch flushes. - Components: AlphaSingle, BlendMode, Depth, Lighting, Mask, RenderNodes, Transform, Visible, ScrollFactor. - Does NOT include Origin or GetBounds (position is set via options or setPosition). ### Shape Game Objects Individual game objects (Arc, Rectangle, Star, etc.) extending the base Shape class. Each renders one predefined geometric shape with precomputed path data. - Created via dedicated factory methods: this.add.rectangle(...), this.add.circle(...), etc. - Fully featured game objects: can be tweened, scaled, added to groups/containers, enabled for input/physics. - Style via setFillStyle(color, alpha) and setStrokeStyle(lineWidth, color, alpha). - Share the same WebGL batch as Graphics for efficient rendering. - Do NOT support gradients, path detail threshold, or canvas transforms. - Components: AlphaSingle, BlendMode, Depth, GetBounds, Lighting, Mask, Origin, RenderNodes, ScrollFactor, Transform, Visible. - Include Origin and GetBounds (unlike Graphics). **When to use which:** - Use **Graphics** for dynamic drawing, complex paths, multiple shapes on one object, gradients, or generating textures. - Use **Shape objects** for individual UI elements, simple indicators, physics-enabled shapes, or anything that benefits from game object features (origin, bounds, input). --- ## Common Patterns ### Fill and Stroke Styles (Graphics) `js const gfx = this.add.graphics(); // Solid fill : call before any fill* method gfx.fillStyle(0xff0000, 1); // (color, alpha) // Line style : call before any stroke* method gfx.lineStyle(4, 0x00ff00, 1); // (width, color, alpha) // Gradient fill (WebGL only) : 4 corner colors gfx.fillGradientStyle( 0xff0000, 0x00ff00, 0x0000ff, 0xffff00, // tl, tr, bl, br colors 1, 1, 1, 1 // tl, tr, bl, br alphas ); gfx.fillRect(0, 0, 300, 200); // Gradient line style (WebGL only) gfx.lineGradientStyle(2, 0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 1); ` ### Drawing Primitives (Graphics) `js const gfx = this.add.graphics(); // Rectangles gfx.fillStyle(0x0000ff); gfx.fillRect(x, y, width, height); gfx.lineStyle(2, 0xffffff); gfx.strokeRect(x, y, width, height); // Circles gfx.fillCircle(x, y, radius); gfx.strokeCircle(x, y, radius); // Ellipses gfx.fillEllipse(x, y, width, height, smoothness); gfx.strokeEllipse(x, y, width, height, smoothness); // smoothness defaults to 32 // Triangles gfx.fillTriangle(x0, y0, x1, y1, x2, y2); gfx.strokeTriangle(x0, y0, x1, y1, x2, y2); // Points (draws a small square) gfx.fillPoint(x, y, size); // size defaults to 1 // Lines gfx.lineBetween(x1, y1, x2, y2); ` ### Rounded Rectangles `js const gfx = this.add.graphics(); // Uniform radius (default 20) gfx.fillStyle(0x333333); gfx.fillRoundedRect(50, 50, 300, 200, 16); gfx.lineStyle(2, 0xffffff); gfx.strokeRoundedRect(50, 50, 300, 200, 16); // Per-corner radius gfx.fillRoundedRect(50, 50, 300, 200, { tl: 20, tr: 20, bl: 0, br: 0 }); // Concave corners (negative values) gfx.fillRoundedRect(50, 50, 300, 200, { tl: -10, tr: -10, bl: -10, br: -10 }); `` ### Path D