skills.rest
ckyeon
ckyeonCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

graphics-and-shapes

Draw rectangles, circles, ellipses, and polygons in Phaser 4 games.

Updated May 16, 2026
Search Tags:#game development#graphics#shapes#phaser 4#phaser objects
One-click install
npx skills add https://github.com/ckyeon/claude-code-settings --skill graphics-and-shapes-ckyeon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: graphics-and-shapes
Source: https://github.com/ckyeon/claude-code-settings/tree/main/project-templates/phaser/.claude/skills/graphics-and-shapes
Command: npx skills add https://github.com/ckyeon/claude-code-settings --skill graphics-and-shapes-ckyeon

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating graphics and shapes for Phaser 4 games, offering a comprehensive solution for artists and developers looking to add visual elements with ease.

Core Features & Use Cases

  • Drawing Primitives: Offers tools to draw various shapes like rectangles, circles, ellipses, and polygons.
  • Graphics and Shape Objects: Provides a distinction between Graphics Game Objects for dynamic drawing and Shape Game Objects for static, feature-rich shapes.
  • Quick Integration: Integrates directly into Phaser 4 game development for efficient graphic rendering.

Quick Start

Use the graphics-and-shapes skill to draw a rectangle and circle on the canvas with the following code snippet:

const rect = this.add.rectangle(100, 100, 200, 100, 0x00aa00);
const circle = this.add.circle(300, 300, 50, 0xff0000);

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?▼

To draw shapes in Phaser 4, call methods like `this.add.rectangle()` or `this.add.circle()` to programmatically render visual primitives directly onto the game canvas.

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

Graphics objects in Phaser 4 are used for dynamic drawing operations, whereas Shape objects are designed for rendering static, feature-rich visual elements in your game environment.

Can I programmatically create game graphics in Phaser 4?▼

Yes, you can programmatically create game graphics in Phaser 4 using a suite of drawing methods for primitives like rectangles, circles, ellipses, and polygons without needing external asset files.

Does Phaser 4 support drawing both circles and polygons?▼

Phaser 4 supports drawing both circles and polygons, providing a comprehensive suite of methods for rendering various geometric primitives for static and dynamic game visuals.

When should I use Graphics objects instead of Shape objects in Phaser 4?▼

Use Graphics objects in Phaser 4 when you need dynamic, real-time drawing, and use Shape objects when you need static, feature-rich shapes that do not change during gameplay.

Related Skills

Explore More Software Engineering Skills→
Joshua-AllenJoshua-Allen

particles

Create and configure particle emitters within the Phaser 4 game engine.

Community
Intermediate
mahirocokomahirocoko

physics-matter

Configure and run Matter.js physics inside Phaser 4 for 2D game scenes.

Community
Advanced
Dominik-SteinwegDominik-Steinweg

sprites-and-images

Create and configure Phaser 4 Sprite and Image game objects.

Community
Intermediate
pascallammerspascallammers
1

canvas-design

Generate visual designs and interactive layouts using the HTML Canvas API.

Community
Intermediate