skills.rest
WanderTheWeeb
WanderTheWeebCOMMUNITY
Explore all skills by this author →
GitHub

graphics-and-shapes

Generate Phaser 4 2D shapes using Graphics command-buffer or Shape game objects.

1|Updated May 3, 2026
Search Tags:#textures#graphics#geometry#shape-rendering#phaser4#fill-stroke#procedural-drawing
One-click install
npx skills add https://github.com/WanderTheWeeb/papas_trauma --skill graphics-and-shapes-wandertheweeb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: graphics-and-shapes
Source: https://github.com/WanderTheWeeb/papas_trauma/tree/main/skills/graphics-and-shapes
Command: npx skills add https://github.com/WanderTheWeeb/papas_trauma --skill graphics-and-shapes-wandertheweeb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you render Phaser 4 graphics and geometric Shape game objects accurately, avoiding common mistakes with styles, angles, and object differences that lead to incorrect visuals or inefficient performance.

Core Features & Use Cases

  • Graphics primitives and paths: Create filled/stroked rectangles, circles, ellipses, triangles, rounded rectangles, lines, arcs, slices, polygons, and point sets using a single Graphics object for richer procedural drawing.
  • Shape objects for UI and physics-ready geometry: Use Rectangle, Circle/Arc, Ellipse, Polygon, Triangle, Star, Line, Grid, Curve, IsoBox, and IsoTriangle with proper fill/stroke setup and game-object features like origin and bounds.
  • Gradients and texture baking: Apply gradient fills/lines (WebGL) and optionally generate textures from Graphics drawings for reuse when shapes are static.

Quick Start

Use the graphics-and-shapes skill to draw a filled rectangle and a stroked circle in Phaser 4, ensuring you set fillStyle or lineStyle before calling the corresponding fill or stroke methods.

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 Phaser 4 shapes correctly without visual glitches?▼

Set fillStyle or lineStyle before calling fill or stroke methods and use radians for arc-related APIs. This prevents incorrect visuals and ensures accurate graphics rendering in Phaser 4.

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

Graphics objects use a command-buffer workflow for procedural drawing, while Shape game objects are factories for UI and physics-ready geometry. Shape objects support game-object features like origin and bounds, whereas Graphics supports texture baking for static reuse.

Can I apply gradient fills to Phaser 4 geometry?▼

Yes, you can apply gradient fills and lines to Phaser 4 geometry when using the WebGL renderer. You can also bake Graphics drawings into textures for static reuse to optimize performance across repeated shape rendering.

How do I bake Phaser 4 Graphics drawings into textures for reuse?▼

You can generate textures from Phaser 4 Graphics drawings to reuse shapes when they are static. This texture baking process optimizes performance by avoiding repeated procedural drawing of identical static art in your game.

Why does my Phaser 4 arc render at the wrong angle?▼

Your Phaser 4 arc renders at the wrong angle because arc-related APIs require radians instead of degrees. Converting your angle measurements to radians before calling the arc drawing methods will fix the visual output.

Are Phaser 4 Shape game objects suitable for UI drawing?▼

Yes, Phaser 4 Shape game objects like Rectangle, Triangle, and Grid are ideal for UI drawing because they support game-object features including origin and bounds. They provide physics-ready geometry with proper fill and stroke setup.

Related Skills

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

groups-and-containers

Create Groups and Containers to organize Phaser 4 game objects.

Community
Intermediate
jallard-007jallard-007

graphics-and-shapes

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

Community
Advanced
Dominik-SteinwegDominik-Steinweg

game-object-components

Document Phaser 4 game object mixins for rendering, transforms, and WebGL features.

Community
Intermediate
Raphe-devRaphe-dev

graphics-and-shapes

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

Community
Advanced