skills.rest
mudman1986
mudman1986COMMUNITY
Explore all skills by this author →
GitHub

graphics-and-shapes

Draw primitives and shape game objects with the Phaser 4 Graphics API.

Updated Jun 10, 2026
Search Tags:#game development#graphics#drawing#canvas#webgl#phaser#shapes
One-click install
npx skills add https://github.com/mudman1986/quarterless --skill graphics-and-shapes-mudman1986
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: graphics-and-shapes
Source: https://github.com/mudman1986/quarterless/tree/main/.github/skills/graphics-and-shapes
Command: npx skills add https://github.com/mudman1986/quarterless --skill graphics-and-shapes-mudman1986

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Drawing rectangles, circles, polygons, and custom paths in Phaser 4 requires choosing between the imperative Graphics object and standalone Shape game objects, each with different APIs, angle units, and component support that are easy to mix up. ## Core Features & Use Cases - Graphics Drawing: Covers fillStyle, lineStyle, gradients, paths, arcs, rounded rectangles, canvas transforms, and generateTexture for baking drawings into reusable textures. - Shape Game Objects: Documents all 12 shape factories (arc, circle, curve, ellipse, grid, isobox, isotriangle, line, polygon, rectangle, star, triangle) with fill/stroke styling and shape-specific methods. - Gotcha Reference: Explains radians vs degrees in arc APIs, missing Origin/GetBounds on Graphics, stroke-only Line shapes, and generateTexture gradient limitations. - Use Case: When building a Phaser HUD, you can draw a rounded-rectangle panel with Graphics, generate a texture from it, and place interactive star and circle Shape objects on top with input enabled. ## Quick Start Ask the AI to draw a filled rounded rectangle and a stroked circle in a Phaser 4 scene 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 shapes in Phaser 4?▼

Use this.add.graphics() for imperative drawing with methods like fillRect, strokeCircle, and fillRoundedRect, or use Shape factories like this.add.rectangle() and this.add.circle() for standalone game objects. Set fillStyle and lineStyle before calling draw methods on Graphics.

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

Graphics is an imperative command-buffer surface supporting paths, gradients, and generateTexture, but lacks Origin and GetBounds. Shape objects are full game objects with origin, bounds, input, and physics support, but no gradients or canvas transforms.

Why does my Phaser arc draw at the wrong angle?▼

The Graphics arc() method takes start and end angles in radians, while the this.add.arc() factory takes degrees from 0 to 360. Mixing these units is the most common shape-drawing bug in Phaser.

Can I generate a texture from Phaser Graphics drawing?▼

Yes, call generateTexture(key, width, height) on a Graphics object to bake the drawing into a reusable texture for sprites or images. Note that gradient fills from fillGradientStyle will not appear because generation uses the Canvas API.

Why is setTint not working on Phaser Shape objects?▼

Shape game objects do not support setTint or tint properties like Sprites and Images do. Use setFillStyle(color, alpha) and setStrokeStyle(lineWidth, color, alpha) to change their colors instead.

Related Skills

Explore More Software Engineering Skills→
simon-tannasimon-tanna

game-setup-and-config

Configure Phaser 4 game instances with rendering, scaling, and pixel art settings.

Community
Intermediate
GiantCroissant-LunarGiantCroissant-Lunar

graphics-and-shapes

Draw dynamic shapes and graphics in Phaser 4 using Graphics and Shape objects.

Official
Intermediate
Raphe-devRaphe-dev

game-object-components

Apply shared component mixins to Phaser 4 game objects.

Community
Intermediate
HubDev-AIHubDev-AI
8

godot-assets

Generate layered procedural visuals for Godot games with shaders and templates.

Official
Advanced