skills.rest
arnaudruffin
arnaudruffinCOMMUNITY
Explore all skills by this author →
GitHub

graphics-and-shapes

Draw and render geometric shapes with Phaser 4 Graphics and Shape objects.

Updated Apr 22, 2026
Search Tags:#textures#graphics#game-development#phaser4#shape-drawing#fill-stroke
One-click install
npx skills add https://github.com/arnaudruffin/dvx-phaser-game --skill graphics-and-shapes-arnaudruffin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: graphics-and-shapes
Source: https://github.com/arnaudruffin/dvx-phaser-game/tree/main/.agents/skills/graphics-and-shapes
Command: npx skills add https://github.com/arnaudruffin/dvx-phaser-game --skill graphics-and-shapes-arnaudruffin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Phaser 4 games often need dynamic drawing of shapes and graphics without pre-made textures. This Skill exposes the Graphics and Shape APIs to simplify real-time rendering, UI visuals, and lightweight texture generation.

Core Features & Use Cases

  • Draws and renders a wide range of primitives (rectangles, circles, arcs, polygons, lines) using the Graphics game object and Shape-based primitives.
  • Generates textures from dynamic drawings for use as sprites, enabling efficient UI elements and visual effects.
  • Supports advanced styling and geometry utilities (fillStyle, lineStyle, gradients, per-corner radii, grid, iso shapes, and more) for flexible visuals.

Quick Start

Create a filled rectangle and a stroked circle using the Graphics API.

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 dynamic shapes in Phaser 4 without pre-made textures?▼

To draw dynamic shapes in Phaser 4, use the Graphics and Shape APIs to render primitives like rectangles, circles, and polygons directly in real-time without pre-made textures.

Can I generate sprites from dynamic graphics in Phaser 4?▼

Yes, you can generate sprites from dynamic graphics in Phaser 4. The Skill creates textures from your Graphics drawings for efficient use as static sprites in UI elements and visual effects.

What styling options are available for Phaser 4 game UI overlays?▼

Phaser 4 game UI overlays support advanced styling including fillStyle, lineStyle, gradients, and per-corner radii. These options allow flexible visual customization for debug overlays and interfaces.

Does the Phaser 4 Graphics API support isometric grids and geoms?▼

Yes, the Phaser 4 Graphics API supports isometric grids and geoms. It provides comprehensive geometry utilities for drawing paths, transformations, and iso shapes needed in game development.

What is the best way to render debug overlays in a Phaser game?▼

The best way to render debug overlays in a Phaser game is using the Graphics game object. It allows real-time rendering of lightweight primitives and grids directly on screen without external assets.

Related Skills

Explore More Software Engineering Skills→
diegolinharesdiegolinhares

graphics-and-shapes

Create graphics and shapes in Phaser 4 using Graphics and Shape game objects.

Community
Intermediate
matthewharwoodmatthewharwood
1

pixijs-performance

Profile and optimize PixiJS apps to reduce FPS drops and draw calls.

Community
Advanced
AutinhorseAutinhorse
3

physics-matter

Integrate Matter.js rigid bodies, constraints, and collision filtering in Phaser 4.

Community
Intermediate
ArtRivArtRiv

graphics-and-shapes

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

Community
Intermediate