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

game-setup-and-config

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Setting up a new Phaser 4 game requires navigating dozens of GameConfig options across renderer selection, scale modes, FPS limits, and input subsystems, where misconfigured values cause silent failures or unexpected rendering behavior. ## Core Features & Use Cases - Renderer and Canvas Setup: Choose between AUTO, CANVAS, WEBGL, and HEADLESS renderers, attach to existing canvas elements, and control DOM placement. - Scaling and Pixel Art: Apply scale modes like FIT, RESIZE, and EXPAND with centering, zoom constants, and pixel art or smoothPixelArt rendering presets. - Lifecycle and FPS Control: Configure FPS targets and limits, boot callbacks, pause/resume handling, and safe game destruction. - Use Case: When starting a new retro-style browser game, use this Skill to generate a complete GameConfig with pixelArt enabled, FIT scaling, and a 60 FPS target, avoiding common pitfalls like the WEBGL no-fallback behavior. ## Quick Start Create a new Phaser 4 game configuration for a pixel art game with FIT scaling and a custom FPS limit.

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 config object with type, dimensions, and a scene class, then pass it to new Phaser.Game(config). The constructor parses the config, creates the renderer, adds the canvas to the DOM, and starts the game loop after DOMContentLoaded.

How do I configure pixel art rendering in Phaser?▼

Set pixelArt: true in the config, which automatically sets antialias to false and roundPixels to true. For WebGL-only smooth edges between blocky pixels, use smoothPixelArt: true instead.

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.

Does Phaser scale mode FIT maintain aspect ratio?▼

Yes, Phaser.Scale.FIT fits the canvas inside the parent while keeping the aspect ratio, producing letterboxing. RESIZE fills the parent but ignores aspect ratio, while ENVELOP covers the parent and may overflow.

Why does my Phaser FPS limit not increase frame rate?▼

The fps.limit setting only caps the frame rate downward and never speeds it up. The browser display refresh rate is always the upper bound, so limit: 120 on a 60Hz display still yields 60 FPS.

How do I destroy a Phaser game instance properly?▼

Call game.destroy(true) to remove the canvas and clean up, noting destruction is asynchronous and completes on the next frame. Pass noReturn as true only if you will never create another Phaser instance on the page.

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
arnaudruffinarnaudruffin

loading-assets

Load and manage Phaser 4 assets with this.load methods and preload sequencing.

Community
Intermediate
DubDev720DubDev720
2

domain-gameplay-simulation

Manage gameplay simulation loops for movement, physics, navigation, and animation.

Community
Intermediate
githubgithub
38.5k

game-engine

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

Official
Advanced