skills.rest
travispwingo
travispwingoCOMMUNITY
Explore all skills by this author →
GitHub

graphics-and-shapes

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

Updated May 7, 2021
Search Tags:#game development#graphics#javascript#drawing#webgl#phaser#shapes
One-click install
npx skills add https://github.com/travispwingo/travispwingo.github.io --skill graphics-and-shapes-travispwingo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: graphics-and-shapes
Source: https://github.com/travispwingo/travispwingo.github.io/tree/main/mario/docs/skills/graphics-and-shapes
Command: npx skills add https://github.com/travispwingo/travispwingo.github.io --skill graphics-and-shapes-travispwingo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Drawing rectangles, circles, polygons, and other primitives in Phaser 4 requires choosing between the imperative Graphics object and standalone Shape game objects, each with different APIs, angle units, and component support. This Skill provides the correct patterns, method signatures, and gotchas so you avoid common bugs like mixing radians with degrees or expecting tint support on shapes. ## Core Features & Use Cases - Graphics Drawing: Use fillStyle, lineStyle, fillRect, strokeCircle, paths, arcs, gradients, rounded rectangles, and canvas transforms on the Graphics game object. - Shape Game Objects: Create Arc, Circle, Ellipse, Grid, IsoBox, IsoTriangle, Line, Polygon, Rectangle, Star, and Triangle objects with full game object features like origin, bounds, input, and physics. - Texture Generation: Bake Graphics drawings into reusable textures with generateTexture for better rendering performance. - Use Case: Build a game HUD with health bars, minimap indicators, and debug overlays by combining filled rectangles, stroked circles, and gradient backgrounds without loading any image assets. ## Quick Start Ask the AI to draw a filled green rectangle and a red-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() to get a Graphics object, call fillStyle or lineStyle first, then call drawing methods like fillRect, strokeCircle, or fillTriangle. Alternatively, create standalone Shape objects with factories like this.add.rectangle() or this.add.circle().

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

Graphics is an imperative drawing surface supporting paths, gradients, and texture generation but lacks Origin and GetBounds. Shape objects are individual game objects with origin, bounds, input, and physics support, but no gradients or canvas transforms.

Why is my Phaser arc drawing at the wrong angle?▼

The Graphics arc() method takes 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 use setTint on Phaser Shape objects?▼

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

How do I improve Graphics rendering performance in Phaser?▼

For static drawings, call generateTexture to bake the Graphics into a texture and use it as a Sprite. Also group Graphics objects together to minimize batch flushes, and use pathDetailThreshold to reduce geometry complexity.

Why do gradients not appear in my generated Phaser texture?▼

generateTexture uses the Canvas API, which cannot capture WebGL-only fillGradientStyle and lineGradientStyle effects. Only Canvas-compatible drawing operations appear in generated textures.

Related Skills

Explore More Software Engineering Skills→
diegolinharesdiegolinhares

scenes

Manage Phaser 4 scene lifecycle, transitions, and communication.

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

sprites-and-images

Create and manipulate Phaser 4 Sprites and Images with transforms, tint, alpha, origin, and depth.

Community
Intermediate
forgefabrikforgefabrik

pixel-art-creator

Create pixel art sprites and canvases with layers and drawing primitives.

Community
Advanced