skills.rest
russellmorgan
russellmorganCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

game-setup-and-config

Configures Phaser 4 game instances with renderer, scaling, pixel art, and FPS options.

Updated Jul 13, 2026
Search Tags:#game development#javascript#scaling#pixel art#renderer#phaser#gameconfig
One-click install
npx skills add https://github.com/russellmorgan/UnderConstruction --skill game-setup-and-config-russellmorgan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: game-setup-and-config
Source: https://github.com/russellmorgan/UnderConstruction/tree/main/.claude/skills/game-setup-and-config
Command: npx skills add https://github.com/russellmorgan/UnderConstruction --skill game-setup-and-config-russellmorgan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Setting up a new Phaser 4 game requires navigating dozens of GameConfig options across renderer selection, canvas placement, scale modes, and frame rate settings, with subtle interactions (like pixelArt overriding antialias) that cause silent misconfiguration. ## Core Features & Use Cases - Renderer and Boot Configuration: Choose between AUTO, CANVAS, WEBGL, and HEADLESS renderers and understand the full boot sequence from config parsing to the game loop. - Scaling and Canvas Setup: Apply scale modes (FIT, RESIZE, EXPAND), centering, zoom constants, and parent DOM placement for responsive or fixed-aspect layouts. - Pixel Art and FPS Tuning: Enable pixelArt or smoothPixelArt rendering and configure fps limits, smoothing, and timeout fallbacks. - Use Case: When starting a new browser game, use this Skill to generate a complete GameConfig with WebGL rendering, FIT scaling centered in a container, and a 30 FPS cap, while avoiding gotchas like fps.target not enforcing frame rate. ## Quick Start Create a new Phaser.Game config for a pixel art game that fits a 320x240 canvas centered in the page with 2x zoom.

Frequently Asked Questions about game-setup-and-config

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a new Phaser 4 game instance?▼

Create a Phaser.Game instance by passing a GameConfig object with type, dimensions, and a scene class. The constructor parses the config, creates global managers, waits for DOMContentLoaded, creates the renderer, and starts the game loop automatically.

What is the difference between Phaser.AUTO and Phaser.WEBGL?▼

Phaser.AUTO uses WebGL when supported and falls back to Canvas otherwise. Phaser.WEBGL forces WebGL with no fallback, so the game fails silently if WebGL is unavailable. Phaser.CANVAS forces the Canvas renderer.

How do I make a Phaser game scale to fit the browser window?▼

Set scale.mode to Phaser.Scale.FIT to keep aspect ratio with letterboxing, or Phaser.Scale.RESIZE to fill the parent ignoring aspect ratio. Combine with autoCenter: Phaser.Scale.CENTER_BOTH and a parent element for centered responsive layouts.

Does fps.target limit the frame rate in Phaser?▼

No, fps.target is advisory only and does not enforce frame rate. Use fps.limit to actually cap FPS, and note the limit can only slow the game down since the browser display refresh rate is always the upper bound.

Why does my transparent Phaser canvas ignore backgroundColor?▼

When transparent is true, Phaser forces the background color to rgba(0,0,0,0) regardless of the backgroundColor value you set. Remove the transparent flag if you need a visible background color.

What changed in Phaser 4 game config compared to v3?▼

Phaser 4 changed default dimensions to 1024x768, added the EXPAND scale mode, introduced smoothPixelArt for WebGL, and added render.renderNodes, skipUnreadyShaders, and pathDetailThreshold options. Loader maxRetries now defaults to 2.

Related Skills

Explore More Software Engineering Skills→
Yakoub-aiYakoub-ai
17

phaser-init

Scaffold a Phaser 4 project with TypeScript and Vite configuration.

Official
Intermediate
mudman1986mudman1986

loading-assets

Loads images, audio, atlases, tilemaps, and fonts through the Phaser Loader plugin.

Community
Intermediate
phaserjsphaserjs
40.1k

input-keyboard-mouse-touch

Unify keyboard, mouse, touch, pointer, drag, and gamepad input for Phaser 4 scenes.

Official
Advanced
githubgithub
38.5k

game-engine

Build web-based games and game engines using HTML5 Canvas, WebGL, and JavaScript.

Official
Advanced