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

scale-and-responsive

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

Updated Jul 13, 2026
Search Tags:#game development#responsive#resize#phaser#fullscreen#scalemanager#scale mode
One-click install
npx skills add https://github.com/russellmorgan/UnderConstruction --skill scale-and-responsive-russellmorgan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: scale-and-responsive
Source: https://github.com/russellmorgan/UnderConstruction/tree/main/.claude/skills/scale-and-responsive
Command: npx skills add https://github.com/russellmorgan/UnderConstruction --skill scale-and-responsive-russellmorgan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Phaser games need to adapt to different screen sizes, orientations, and parent containers, and misconfiguring the ScaleManager leads to stretched canvases, broken centering, or failed fullscreen requests. ## Core Features & Use Cases - Scale Mode Configuration: Set up FIT, RESIZE, ENVELOP, EXPAND, and other scale modes with correct width, height, zoom, and snap values. - Centering and Fullscreen: Apply auto-center modes and implement fullscreen toggles that respect the pointerup gesture requirement. - Responsive Resize Handling: Listen to resize and orientationchange events to reposition cameras and UI when the browser window changes. - Use Case: You are building a browser game that must letterbox correctly on desktop and mobile. Use this Skill to configure FIT mode with CENTER_BOTH, handle the resize event, and add a fullscreen button that works on touch devices. ## Quick Start Use the scale-and-responsive skill to make my Phaser 4 game scale to fit its container and stay centered on window resize.

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

Set scale mode to Phaser.Scale.RESIZE with width and height as '100%' so the canvas fills the parent. Then listen to the scale 'resize' event in your scene and reposition cameras and UI elements based on the new gameSize dimensions.

How to center a Phaser game canvas on the page?▼

Set autoCenter to Phaser.Scale.CENTER_BOTH in the scale config alongside a mode like FIT. The parent element must have calculable CSS dimensions, otherwise centering will not work correctly.

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

FIT scales the canvas via CSS to fit inside the parent while preserving aspect ratio, possibly leaving letterbox bars. RESIZE changes the actual canvas dimensions to match the parent with 1:1 pixel mapping, which can affect GPU fill-rate on large displays.

Why does Phaser fullscreen not work on mobile?▼

Fullscreen requests must be triggered from a pointerup handler, not pointerdown, because touch devices block pointerdown requests. Also, iframes require the allowfullscreen attribute or requests will silently fail.

Does Phaser ScaleManager support pixel art games?▼

Yes. Combine scale mode FIT with zoom set to Phaser.Scale.MAX_ZOOM and pixelArt: true in the game config. MAX_ZOOM picks the largest integer zoom that fits the parent, keeping pixel rendering crisp.

Related Skills

Explore More Software Engineering Skills→
simon-tannasimon-tanna

game-setup-and-config

Configure Phaser 4 game instances with rendering, scaling, and pixel art settings.

Community
Intermediate
Raphe-devRaphe-dev

cameras

Manage multiple Phaser 4 cameras for viewport, scrolling, and effects.

Community
Advanced
GrimblazGrimblaz
3

browser-canvas-testing

Translates game-space coordinates to CSS page coordinates for Playwright-based canvas interactions.

Community
Advanced
diegolinharesdiegolinhares

scale-and-responsive

Scale and resize Phaser 4 game canvas using ScaleManager.

Community
Intermediate