skills.rest
AmirOssanloo
AmirOssanlooCOMMUNITY
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 Sep 20, 2026
Search Tags:#game development#graphics#drawing#webgl#phaser#shapes#2d rendering
One-click install
npx skills add https://github.com/AmirOssanloo/helix-game --skill graphics-and-shapes-amirossanloo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: graphics-and-shapes
Source: https://github.com/AmirOssanloo/helix-game/tree/main/.claude/skills/graphics-and-shapes
Command: npx skills add https://github.com/AmirOssanloo/helix-game --skill graphics-and-shapes-amirossanloo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Drawing primitives in Phaser 4 involves two different APIs (the imperative Graphics object and standalone Shape game objects) with subtle differences in angles, styling order, and component support that cause frequent bugs. This Skill provides the correct patterns, API signatures, and gotchas so you draw rectangles, circles, arcs, polygons, and gradients correctly the first time. ## Core Features & Use Cases - Graphics Game Object: Imperative drawing with fillStyle, lineStyle, paths, arcs, gradients, rounded rectangles, canvas transforms, and generateTexture for baking drawings into reusable textures. - Shape Game Objects: Full reference for all 12 shape factories (arc, circle, curve, ellipse, grid, isobox, isotriangle, line, polygon, rectangle, star, triangle) with fill/stroke styling via setFillStyle and setStrokeStyle. - Gotcha Prevention: Covers the most common bugs, such as Graphics arc() using radians while the arc factory uses degrees, styles not being retroactive, and Shape objects lacking tint methods. - Use Case: You need a health bar, a targeting circle, and a star icon for your Phaser game. Use this Skill to pick the right object type, draw them with correct fill and stroke calls, and bake static shapes into textures for performance. ## Quick Start Use the graphics-and-shapes skill to draw a filled rounded rectangle with a stroked circle outline in my 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 fillTriangle, or use Shape factory methods like this.add.rectangle() and this.add.circle() for standalone game objects. Set fillStyle or lineStyle before calling the corresponding draw method.

Phaser Graphics vs Shape objects: which should I use?▼

Use Graphics for dynamic drawing, complex paths, multiple shapes on one object, gradients, or generating textures. Use Shape objects for individual UI elements, physics-enabled shapes, or anything needing origin, bounds, input, or tweening support.

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 them in degrees (0-360). Mixing these two conventions is the most common shape-drawing bug in Phaser.

How do I convert a Phaser Graphics drawing to a texture?▼

Call generateTexture(key, width, height) on the Graphics object, then destroy it and use the key with this.add.image(). Note that gradient fills from fillGradientStyle will not appear in generated textures due to a Canvas API limitation.

Can I use setTint on Phaser Shape objects?▼

No, 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.

Why is my Phaser Graphics rendering slowly?▼

Graphics replays its command buffer and rebuilds geometry every frame, which is expensive for complex shapes. For static drawings, bake them with generateTexture and use a Sprite, and group Graphics objects together to minimize batch flushes.

Related Skills

Explore More Software Engineering Skills→
diegolinharesdiegolinhares

scenes

Manage Phaser 4 scene lifecycle, transitions, and communication.

Community
Intermediate
arnaudruffinarnaudruffin

graphics-and-shapes

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

Community
Intermediate
WanderTheWeebWanderTheWeeb
1

game-object-components

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

Community
Intermediate
claretagrapelike32claretagrapelike32

asset-spec

Generate per-asset visual specifications and AI generation prompts from game design documents.

Community
Advanced