graphics-and-shapes

Draw and render 2D shapes in Phaser 4 using Graphics and Shape objects.

Updated Apr 13, 2026
One-click install
npx skills add https://github.com/jallard-007/jallard-ca-server --skill graphics-and-shapes-jallard-007
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: graphics-and-shapes
Source: https://github.com/jallard-007/jallard-ca-server/tree/main/.github/skills/graphics-and-shapes
Command: npx skills add https://github.com/jallard-007/jallard-ca-server --skill graphics-and-shapes-jallard-007

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps developers create and render shapes and graphics in Phaser 4 without needing external textures, speeding up prototyping and UI design.

Core Features & Use Cases

  • Draws and fills a variety of primitives (Rectangles, Circles, Arcs, Polygons, Gradients) using Graphics or Shape objects.
  • Distinguishes between Graphics and Shape objects and when to use each.
  • Supports style APIs: fillStyle, lineStyle, gradient filling, and generated textures via generateTexture.

Quick Start

Create a new Phaser 4 scene and draw a filled rectangle followed by a stroked circle using Graphics.

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 2D shapes and primitives in Phaser 4?

You draw 2D shapes in Phaser 4 by using Graphics or Shape objects to render primitives like rectangles, circles, arcs, and polygons. This approach provides a unified API for applying fill and stroke styles to game UI visuals.

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

Graphics and Shape objects in Phaser 4 differ in their rendering approach for game visuals. The skill distinguishes between them to help developers choose the right object for creating shapes without needing external textures.

How do I generate textures from drawn graphics in Phaser 4?

You generate textures from drawn graphics in Phaser 4 using the generateTexture API. This bakes path-based drawings, including gradient fills and stroked shapes, into reusable textures for game development.

Can I apply gradient fills to circles and polygons in Phaser 4?

Yes, you can apply gradient fills to circles and polygons in Phaser 4. The unified style API supports gradient filling alongside standard fillStyle and lineStyle options for path-based drawing across primitives.

Do I need external image assets to render game UI in Phaser 4?

No, you do not need external image assets to render game UI in Phaser 4. You can use Graphics and Shape objects to draw primitives and generate textures directly, which speeds up prototyping and UI design.

When should I use Graphics objects instead of Shape objects for rendering?

Use Graphics objects for complex path-based drawing and batching multiple primitives, while Shape objects suit individual rendered shapes. Choosing correctly optimizes game UI and visual rendering workflows in Phaser 4.