skills.rest
GiantCroissant-Lunar
GiantCroissant-LunarOFFICIAL
Explore all skills by this author →
GitHub

scale-and-responsive

Scale and center Phaser 4 games to fit any display using ScaleManager.

Updated Apr 16, 2026
Search Tags:#responsive#resize#game-development#centering#fullscreen#phaser4#scale-manager
One-click install
npx skills add https://github.com/GiantCroissant-Lunar/proto-breakout --skill scale-and-responsive-giantcroissant-lunar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: scale-and-responsive
Source: https://github.com/GiantCroissant-Lunar/proto-breakout/tree/main/.agent/skills/01-phaser/scale-and-responsive
Command: npx skills add https://github.com/GiantCroissant-Lunar/proto-breakout --skill scale-and-responsive-giantcroissant-lunar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers ensure Phaser 4 games render correctly across devices by automating scale management, centering, and responsive resizing.

Core Features & Use Cases

  • ScaleManager access via game.scale for centralized control
  • Support for multiple scale modes: FIT, ENVELOP, RESIZE, and NONE (as appropriate)
  • Auto-centering and fullscreen handling to improve UX
  • Responsive resize handling to adjust cameras and UI on browser and device orientation changes
  • Real-world use: deploy to mobile and desktop, adapting to dynamic container sizes

Quick Start

Configure the game with a FIT scale and autoCenter, then listen for resize events to adjust cameras and UI.

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 auto-center on any screen?▼

To make a Phaser 4 game responsive, configure the ScaleManager with a FIT scale mode and enable autoCenter. This automatically scales and centers the game canvas to fit any display.

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

Phaser 4 scale modes determine viewport calculation: FIT scales the game to fit the container, ENVELOP covers the entire area, and RESIZE dynamically adjusts the game dimensions to match the display.

How do I handle browser resize and device orientation changes in Phaser 4?▼

Handle browser resize and orientation changes in Phaser 4 by listening to ScaleManager resize events. This allows you to dynamically adjust cameras and UI elements without disrupting ongoing gameplay.

Can I use the RESIZE scale mode for mobile and desktop Phaser 4 deployments?▼

Yes, you can use the RESIZE scale mode for mobile and desktop Phaser 4 deployments. It handles dynamic container sizes by computing viewports and adjusting the game to match the display dimensions.

Why does my Phaser 4 game viewport break when the browser resizes?▼

Your Phaser 4 game viewport breaks on browser resize because the ScaleManager is not configured to handle resize events. You must specify scale modes and listen to resize events to adjust cameras and UI properly.

How do I configure fullscreen handling in Phaser 4?▼

Configure fullscreen handling in Phaser 4 by accessing the ScaleManager via game.scale. This centralizes control over fullscreen transitions, auto-centering, and responsive scaling for improved user experience.

Related Skills

Explore More Software Engineering Skills→
quochung-cyouquochung-cyou

game-setup-and-config

Configures Phaser 4 game initialization with optimized pixel art and performance settings.

Community
Intermediate
phaserjsphaserjs
40.1k

scale-and-responsive

Configure Phaser 4 ScaleManager for responsive scaling, centering, and fullscreen transitions.

Official
Intermediate
Joshua-AllenJoshua-Allen

physics-arcade

Enable Arcade Physics in Phaser 4 games with sprite and group physics.

Community
Intermediate
tja688tja688

scale-and-responsive

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

Community
Intermediate