scale-and-responsive

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

Updated Apr 13, 2026
One-click install
npx skills add https://github.com/onemanking/the-operator --skill scale-and-responsive-onemanking
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: scale-and-responsive
Source: https://github.com/onemanking/the-operator/tree/main/.github/skills/scale-and-responsive
Command: npx skills add https://github.com/onemanking/the-operator --skill scale-and-responsive-onemanking

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 without distorted aspect ratios, misaligned input coordinates, or failed fullscreen requests. ## Core Features & Use Cases - Scale Mode Configuration: Apply FIT, RESIZE, ENVELOP, EXPAND, and other scale modes with auto-centering, zoom, snap values, and min/max constraints through the game config. - Runtime Resize Handling: Subscribe to resize and orientationchange events to reposition cameras and UI elements when the canvas dimensions change. - Fullscreen and Orientation Control: Implement fullscreen toggles triggered from pointerup gestures and lock or respond to device orientation on mobile. - Use Case: You are building a pixel-art game at 320x240 that must fill any browser window crisply. Use FIT mode with MAX_ZOOM and pixelArt enabled to get integer-scaled rendering centered in the parent container. ## Quick Start Configure my Phaser game to scale to fit its parent container while preserving aspect ratio and centering the canvas.

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 scale mode to Phaser.Scale.RESIZE with width and height as '100%' so the canvas matches its parent. Then listen for the scale 'resize' event in your scene to resize cameras and reposition UI elements when dimensions change.

How to scale a Phaser game to fit the screen while keeping aspect ratio?

Use Phaser.Scale.FIT mode with autoCenter set to Phaser.Scale.CENTER_BOTH in the scale config. The canvas scales to fit inside the parent while preserving aspect ratio, leaving letterbox or pillarbox space that you can style via the parent background.

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

FIT keeps the canvas element fixed and stretches it with CSS, preserving aspect ratio with possible empty bars. RESIZE changes the actual canvas dimensions to match the parent at 1:1 pixels, which requires repositioning game objects and can strain GPU fill-rate on large displays.

Why does Phaser fullscreen not work on mobile?

Fullscreen requests must originate from a pointerup event, not pointerdown, because touch devices block pointerdown-triggered requests. Also verify the iframe has the allowfullscreen attribute if the game is embedded.

Why is my Phaser canvas not centering in its parent div?

Centering fails when the parent element has no calculable dimensions, such as an unstyled div with zero height. Give the parent explicit CSS dimensions or rely on the default expandParent option, which sets the parent or body height to 100%.

How do I render crisp pixel art at low resolution in Phaser?

Set a small base resolution like 320x240, use FIT mode with zoom set to Phaser.Scale.MAX_ZOOM, and enable pixelArt: true in the config. MAX_ZOOM picks the largest integer multiplier that fits the parent, and pixelArt disables anti-aliasing.