skills.rest
WanderTheWeeb
WanderTheWeebCOMMUNITY
Explore all skills by this author →
GitHub

scale-and-responsive

Configure Phaser 4 ScaleManager for responsive canvas scaling and centering.

1|Updated May 3, 2026
Search Tags:#responsive design#fullscreen#phaser4#scalemanager#orientation handling#canvas scaling#resize events
One-click install
npx skills add https://github.com/WanderTheWeeb/papas_trauma --skill scale-and-responsive-wandertheweeb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: scale-and-responsive
Source: https://github.com/WanderTheWeeb/papas_trauma/tree/main/skills/scale-and-responsive
Command: npx skills add https://github.com/WanderTheWeeb/papas_trauma --skill scale-and-responsive-wandertheweeb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves inconsistent canvas sizing and broken layout when building a responsive Phaser 4 game for different screen sizes, aspect ratios, and fullscreen states.

Core Features & Use Cases

  • ScaleManager-based responsive scaling: Apply Phaser ScaleManager logic to keep world/camera sizing consistent while the canvas is visually scaled by CSS.
  • Mode coverage for real scenarios: Use FIT for letterboxed layouts, ENVELOP for full-bleed covered layouts, RESIZE for true 1:1 pixel canvases, and NONE when you manage sizing yourself.
  • Centering and input correctness: Enable auto-centering (margins) and keep coordinate mapping stable via ScaleManager’s displayScale.
  • Fullscreen and orientation handling: Listen for fullscreen enter/leave and orientation changes, and optionally lock orientation on supported mobile browsers.

Quick Start

Configure your Phaser game with a parent element, set scale.mode to Phaser.Scale.FIT, enable scale.autoCenter to Phaser.Scale.CENTER_BOTH, and use the ScaleManager’s resize/orientation/fullscreen events to update cameras and UI when the viewport changes.

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 4 game responsive and scale to fit different screen sizes?▼

To make a Phaser 4 game responsive, configure the ScaleManager with a parent container, set scale.mode to Phaser.Scale.FIT, and enable scale.autoCenter to CENTER_BOTH. This keeps the canvas visually scaled by CSS while maintaining correct coordinate mapping.

What's the difference between FIT, ENVELOP, RESIZE, and NONE scaling modes in Phaser?▼

Phaser scaling modes serve different layouts: FIT creates letterboxed views by preserving aspect ratio, ENVELOP provides full-bleed coverage, RESIZE yields true 1:1 pixel canvases, and NONE leaves sizing entirely to manual management.

How do I handle orientation changes and fullscreen toggling in a Phaser canvas?▼

Handle orientation changes and fullscreen toggling in Phaser by listening to the ScaleManager’s dedicated orientation and fullscreen events. You can also optionally lock orientation on supported mobile browsers to maintain layout stability.

Why are my game inputs misaligned after resizing the Phaser canvas?▼

Misaligned inputs after resizing usually occur when coordinate mapping is incorrect. Using ScaleManager’s displayScale and enabling auto-centering margins keeps coordinate mapping stable and ensures inputs map correctly to the visually scaled canvas.

Does Phaser ScaleManager require a parent element to handle resize events correctly?▼

Yes, configuring a parent element is required for correct ScaleManager operation. Setting width, height, and parent allows the ScaleManager to calculate proper canvas scaling and centering based on varying parent dimensions and display environments.

Related Skills

Explore More Software Engineering Skills→
ArtRivArtRiv

scale-and-responsive

Configure Phaser ScaleManager for responsive canvas sizing and centering.

Community
Intermediate
jallard-007jallard-007

scale-and-responsive

Configure Phaser 4 ScaleManager scale modes and auto-centering for responsive games.

Community
Advanced
kehwarkehwar

cameras

Manage Phaser 4 camera viewports, scrolling, and effects.

Community
Advanced
Dominik-SteinwegDominik-Steinweg

scale-and-responsive

Configure Phaser 4 canvas scaling and responsive layout via ScaleManager.

Community
Intermediate