graphics-and-shapes

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

Updated Apr 26, 2026

Search Tags:#graphics #game-development #shapes #phaser4 #texture-generation #graphics-primitives

Ready to run

npx skills add https://github.com/kehwar/pixi-square --skill graphics-and-shapes-kehwar

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: graphics-and-shapes
Source: https://github.com/kehwar/pixi-square/tree/main/.agents/skills/graphics-and-shapes
Command: npx skills add https://github.com/kehwar/pixi-square --skill graphics-and-shapes-kehwar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Phaser developers often struggle to draw and style geometric primitives efficiently without relying on external assets, leading to brittle code and repetitive boilerplate.

Core Features & Use Cases

Graphics and Shape APIs provide a unified toolkit for rendering lines, rectangles, circles, arcs, polygons, and generated textures.
Real-world use cases include dynamic HUD indicators, debug overlays, procedural texture creation, and in-game UI elements.
Quick example: instantiate a Graphics object and render a filled rectangle and a stroked circle.

Quick Start

Create a graphics object and draw a filled rectangle and a stroked circle to see results immediately.

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 without using external image assets?▼

To draw geometric shapes in Phaser 4 without external assets, use the Graphics and Shape APIs to render lines, rectangles, circles, arcs, and polygons programmatically. This approach replaces brittle boilerplate with consistent API usage for dynamic visuals.

What is the best way to generate dynamic textures at runtime in Phaser game development?▼

The best way to generate dynamic textures at runtime in Phaser game development is by using the Graphics API. It allows you to draw and style geometric primitives and then generate textures for runtime use, eliminating the need for static image files.

Can I use Phaser 4 graphics primitives to create in-game UI elements and debug overlays?▼

Yes, you can use Phaser 4 graphics primitives to create in-game UI elements and debug overlays. The Graphics and Shape APIs provide a unified toolkit for rendering dynamic HUD indicators and procedural visuals efficiently during game development.

Does the Phaser 4 Graphics API support applying fills, strokes, and gradients to game objects?▼

Yes, the Phaser 4 Graphics API supports applying fills, strokes, and gradients to game objects. It enforces consistent API usage for path drawing and styling geometric primitives, allowing developers to quickly instantiate and style visuals.

How do I quickly start rendering a filled rectangle and a stroked circle in Phaser 4?▼

To quickly start rendering a filled rectangle and a stroked circle in Phaser 4, instantiate a Graphics object and apply the fill and stroke methods. This immediate approach lets you see dynamic visual results without relying on external assets.