skills.rest
mudman1986
mudman1986COMMUNITY
Explore all skills by this author →
GitHub

scale-and-responsive

Configures Phaser ScaleManager for responsive scaling, centering, fullscreen, and orientation handling.

Updated Jun 10, 2026
Search Tags:#game development#responsive design#resize#phaser#fullscreen#canvas scaling#scale manager
One-click install
npx skills add https://github.com/mudman1986/quarterless --skill scale-and-responsive-mudman1986
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: scale-and-responsive
Source: https://github.com/mudman1986/quarterless/tree/main/.github/skills/scale-and-responsive
Command: npx skills add https://github.com/mudman1986/quarterless --skill scale-and-responsive-mudman1986

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Phaser games often break visually when the browser window resizes, the device rotates, or the canvas parent lacks dimensions. This Skill provides the ScaleManager knowledge needed to make a Phaser game scale correctly across screen sizes, orientations, and fullscreen transitions. ## Core Features & Use Cases - Scale Mode Configuration: Choose between FIT, RESIZE, ENVELOP, EXPAND, and other scale modes with correct width, height, zoom, min/max, and snap settings. - Responsive Resize Handling: Subscribe to resize and orientationchange events to reposition cameras and UI when the canvas size changes. - Fullscreen and Centering: Implement fullscreen toggles triggered from pointerup, auto-centering within a parent element, and pixel-art zoom with MAX_ZOOM. - Use Case: You are building a pixel-art Phaser game that must fill the browser window while preserving aspect ratio. Use this Skill to configure FIT mode with CENTER_BOTH and MAX_ZOOM, then handle resize events to keep UI anchored. ## Quick Start Ask the AI to configure my Phaser game to scale to fit its parent container, stay centered, and handle browser resize events.

Frequently Asked Questions about scale-and-responsive

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

FAQPage Schema
How do I make a Phaser game responsive to window resizing?▼

Set the scale mode to Phaser.Scale.RESIZE with percentage width and height, then listen to the scale resize event in your scene. In the handler, resize cameras and reposition UI elements based on the new gameSize dimensions.

What is the difference between Phaser FIT and RESIZE scale modes?▼

FIT keeps the canvas at its base resolution and scales it with CSS to fit the parent while preserving aspect ratio, leaving letterbox space. RESIZE changes the actual canvas dimensions to match the parent, giving 1:1 pixels but requiring you to handle layout changes.

Why is Phaser fullscreen not working on mobile?▼

Fullscreen requests must be triggered from a pointerup event, not pointerdown, because browsers block fullscreen without a qualifying user gesture. In iframes, the allowfullscreen attribute is also required or the request silently fails.

How do I center a Phaser canvas inside its parent element?▼

Set autoCenter to Phaser.Scale.CENTER_BOTH in the scale config. The parent element must have calculable dimensions, since centering relies on the parent's computed CSS size to set canvas margins.

Can Phaser scale pixel art games without blurring?▼

Yes. Combine pixelArt: true in the game config with a low base resolution and zoom set to Phaser.Scale.MAX_ZOOM. This disables anti-aliasing and applies the largest integer zoom that fits the parent for crisp pixels.

Related Skills

Explore More Software Engineering Skills→
Dominik-SteinwegDominik-Steinweg

game-setup-and-config

Configure Phaser 4 game instances with GameConfig properties and lifecycle events.

Community
Intermediate
mahirocokomahirocoko

cameras

Manage Phaser 4 cameras, viewports, and effects across scenes.

Community
Advanced
travispwingotravispwingo

scale-and-responsive

Configures Phaser 4 ScaleManager for responsive scaling, centering, fullscreen, and orientation handling.

Community
Intermediate
diegolinharesdiegolinhares

scale-and-responsive

Scale and resize Phaser 4 game canvas using ScaleManager.

Community
Intermediate