skills.rest
onemanking
onemankingCOMMUNITY
Explore all skills by this author →
GitHub

graphics-and-shapes

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

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

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. This Skill provides the correct methods, parameters, and gotchas so shapes render as intended without trial and error. ## 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, and shape-specific methods. - Use Case: When building a game HUD, use this Skill to draw a health bar with fillRect and strokeRect, create a star rating indicator with this.add.star, and generate a texture from a Graphics drawing to use as a sprite. ## Quick Start Use the graphics-and-shapes skill to draw a filled rounded rectangle with a stroked circle inside a Phaser 4 scene.

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 Graphics and Shape objects in Phaser?▼

Graphics is an imperative drawing surface supporting paths, gradients, and generateTexture, but lacks Origin and GetBounds components. 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 start and end angles in radians, while the this.add.arc factory takes angles in degrees from 0 to 360. Mixing these units is the most common cause of incorrectly rotated arcs.

Can I generate a texture from a Phaser Graphics drawing?▼

Yes, call generateTexture(key, width, height) on a Graphics object to bake the drawing into a texture usable with this.add.image. Note that gradient fills from fillGradientStyle will not appear because generation uses the Canvas API.

Why does setTint not work on Phaser Shape objects?▼

Shape game objects do not include tint methods like Sprites do. Change their appearance with setFillStyle(color, alpha) and setStrokeStyle(lineWidth, color, alpha), or set fillColor and strokeColor properties directly.

How do I improve performance when drawing many shapes in Phaser?▼

Graphics replays its command buffer every frame, which is expensive for complex drawings. For static shapes, call generateTexture and use the result as a Sprite, and group Graphics objects together to minimize WebGL batch flushes.

Related Skills

Explore More Software Engineering Skills→
dzyamikdzyamik

graphics-and-shapes

Draw and manage shapes in Phaser 4 using Graphics and Shape objects.

Community
Intermediate
GiantCroissant-LunarGiantCroissant-Lunar

graphics-and-shapes

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

Official
Intermediate
WanderTheWeebWanderTheWeeb
1

game-object-components

Resolve Phaser 4 Game Object component mixin rendering and transform behaviors.

Community
Intermediate
CesiumGSCesiumGS
112

cesiumjs-primitives

Batch CesiumJS geometry instances with primitives to optimize draw calls.

Official
Advanced