skills.rest
ArtRiv
ArtRivCOMMUNITY
Explore all skills by this author →
GitHub

scale-and-responsive

Configure Phaser ScaleManager for responsive canvas sizing and centering.

Updated Feb 11, 2026
Search Tags:#phaser#fullscreen#canvas layout#responsive scaling#orientation change#ui reflow
One-click install
npx skills add https://github.com/ArtRiv/game-topicos-especiais --skill scale-and-responsive-artriv
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: scale-and-responsive
Source: https://github.com/ArtRiv/game-topicos-especiais/tree/main/skills/scale-and-responsive
Command: npx skills add https://github.com/ArtRiv/game-topicos-especiais --skill scale-and-responsive-artriv

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Phaser games often look stretched, cut off, or misaligned across different browsers, window sizes, and device orientations; this skill helps you reliably scale the canvas and keep it centered so UI and gameplay stay correct.

Core Features & Use Cases

  • ScaleManager-driven responsive scaling: Maintains base vs display sizing so the canvas renders consistently while CSS scales it to match the parent.
  • Choose the right scale mode: Supports FIT, ENVELOP, RESIZE, EXPAND, and fixed NONE setups depending on whether you want letterboxing, cropping, or 1:1 pixel mapping.
  • Centering and dynamic resize support: Auto-centers using autoCenter, updates bounds on parent/browser changes, and provides resize/orientation/fullscreen events for UI reflow.
  • Fullscreen and orientation handling: Includes startFullscreen/stopFullscreen/toggleFullscreen, orientation change hooks, and iOS/mobile considerations.

Quick Start

Use the ScaleManager with Phaser.Scale.FIT and Phaser.Scale.CENTER_BOTH so your game keeps aspect ratio while staying centered inside your parent element.

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 and fit every screen size?▼

Phaser responsive scaling uses the ScaleManager to maintain base versus display sizing, ensuring the canvas renders consistently while CSS scales it to match the parent element across different browsers.

What is the difference between Phaser Scale modes like FIT, ENVELOP, and RESIZE?▼

Phaser Scale modes determine canvas fitting behavior: FIT preserves aspect ratio with letterboxing, ENVELOP crops to fill the screen, and RESIZE dynamically updates the game size to match the parent container dimensions exactly.

How do I handle orientation change and fullscreen toggling in Phaser?▼

Handle orientation change and fullscreen in Phaser by attaching event-driven callbacks to ScaleManager events, allowing you to trigger UI reflow and correctly calculate displaySize and baseSize on mobile devices and fullscreen toggles.

Why does my Phaser canvas look stretched or misaligned after resizing the window?▼

A Phaser canvas looks stretched or misaligned after resizing when the ScaleManager config lacks proper autoCenter settings or event listeners for dynamic window resizing, preventing correct viewport updates and UI reflow.

Do I need specific Phaser scale config properties to center my game canvas?▼

You need the autoCenter property, such as Phaser.Scale.CENTER_BOTH, along with parent and mode settings in your Phaser scale config to reliably keep the canvas centered inside its parent element during responsive scaling.

Related Skills

Explore More Software Engineering Skills→
WanderTheWeebWanderTheWeeb
1

scale-and-responsive

Configure Phaser 4 ScaleManager for responsive canvas scaling and centering.

Community
Intermediate
simon-tannasimon-tanna

scale-and-responsive

Manage responsive scaling, centering, and fullscreen handling for Phaser 4 games.

Community
Intermediate
tja688tja688

scale-and-responsive

Configure Phaser 4 canvas scaling, responsive layouts, and fullscreen transitions.

Community
Intermediate
Joshua-AllenJoshua-Allen

scale-and-responsive

Automate responsive scaling and centering for Phaser 4 games.

Community
Intermediate