skills.rest
ArtRiv
ArtRivCOMMUNITY
Explore all skills by this author →
GitHub

graphics-and-shapes

Draw 2D geometric shapes in Phaser 4 using Graphics and Shape APIs.

Updated Feb 11, 2026
Search Tags:#game development#graphics#phaser 4#shape rendering#fill stroke#path drawing#texture generation
One-click install
npx skills add https://github.com/ArtRiv/game-topicos-especiais --skill graphics-and-shapes-artriv
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: graphics-and-shapes
Source: https://github.com/ArtRiv/game-topicos-especiais/tree/main/skills/graphics-and-shapes
Command: npx skills add https://github.com/ArtRiv/game-topicos-especiais --skill graphics-and-shapes-artriv

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you render clean geometric visuals in Phaser 4 without textures by choosing the right drawing primitive and using the correct APIs for fills, strokes, paths, and common shapes.

Core Features & Use Cases

  • Graphics vs Shape objects: Use Graphics for gradients, complex multi-step drawings, and generating textures; use Shape game objects (Arc, Rectangle, Circle, Polygon, etc.) for single, physics/input-friendly primitives.
  • Fill, stroke, and paths: Control styling via fillStyle/lineStyle, build paths with beginPath/moveTo/lineTo/arc, then fillPath or strokePath.
  • Practical shape coverage: Rectangles, circles/ellipses, triangles/polygons, rounded rectangles, grids, isometric boxes/triangles, and texture generation from drawings.

Quick Start

Use the graphics-and-shapes skill to draw a filled rectangle and a stroked circle in Phaser 4 using the Graphics game object.

Frequently Asked Questions about graphics-and-shapes

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I draw geometric shapes in Phaser 4 using the Graphics API?▼

To draw geometric shapes in Phaser 4, use the Graphics game object to set fillStyle or lineStyle, build paths with moveTo, lineTo, and arc, then call fillPath or strokePath to render specified primitives.

What is the difference between Graphics and Shape objects in Phaser 4?▼

In Phaser 4, Graphics objects handle complex multi-step drawings, gradients, and texture generation, whereas Shape game objects render single, physics-enabled and input-friendly primitives like Arcs, Rectangles, and Circles.

Why does my arc rendering look wrong when drawing paths with Phaser 4 Graphics?▼

Arc rendering issues in Phaser 4 Graphics often occur because the Graphics API uses radians for angle measurements, requiring correct angle conversions and proper beginPath execution before applying moveTo or lineTo commands.

Can I generate textures from Graphics drawings in Phaser 4?▼

Yes, you can generate textures from Graphics drawings in Phaser 4. This capability allows you to render complex geometric visuals once and reuse them as efficient textures for game objects.

Does Phaser 4 require specific styling order for fills and strokes?▼

Yes, Phaser 4 requires correct fillStyle and lineStyle ordering before drawing primitives. Setting these styles prior to path commands ensures the geometric shapes render with the intended colors and stroke widths.

What is the best way to draw a grid or isometric box in Phaser 4?▼

The best way to draw a grid or isometric box in Phaser 4 is using the Graphics API to construct paths with lineTo and moveTo, applying fillStyle and lineStyle to render the connected geometric primitives.

Related Skills

Explore More Design & Creative Skills→
simon-tannasimon-tanna

phaser4-gamedev

Create and manage 2D browser games with Phaser 4 and TypeScript.

Community
Advanced
simon-tannasimon-tanna

input-keyboard-mouse-touch

Manage keyboard, mouse, touch, and gamepad input for Phaser 4 games.

Community
Advanced
arnaudruffinarnaudruffin

groups-and-containers

Organize Phaser 4 game objects using Groups and Containers for pooling and scene composition.

Community
Advanced
Raphe-devRaphe-dev

graphics-and-shapes

Draw shape primitives and graphics in Phaser 4 using Graphics and Shape objects.

Community
Advanced