skills.rest
phaserjs
phaserjsOFFICIAL
Explore all skills by this author →
Website𝕏@phaser_GitHub

scale-and-responsive

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

40.1k|7.2k|Updated Apr 12, 2013
Search Tags:#responsive#resize#orientation#scale#phaser#fullscreen
One-click install
npx skills add https://github.com/phaserjs/phaser --skill scale-and-responsive-phaserjs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: scale-and-responsive
Source: https://github.com/phaserjs/phaser/tree/main/skills/scale-and-responsive
Command: npx skills add https://github.com/phaserjs/phaser --skill scale-and-responsive-phaserjs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Scale-aware design for Phaser 4 ensures games adapt to varied screen sizes, preserve aspect ratios, and maintain a centered, consistent experience across devices and orientations.

Core Features & Use Cases

  • ScaleManager-based responsive sizing, auto-centering, and fullscreen handling.
  • Supports scale modes like FIT, ENVELOP, and RESIZE for common web-game layouts.
  • Real-world use: deliver a consistent UI and camera behavior on desktop, tablet, and mobile.

Quick Start

Create a Phaser game with a responsive scale configuration and handle 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 across desktop and mobile devices?▼

Make a Phaser 4 game responsive by configuring the ScaleManager to handle dynamic resizing, auto-centering, and orientation changes across desktops, tablets, and phones. This ensures consistent UI and camera behavior regardless of viewport size.

What scale modes does Phaser 4 support for web game layouts?▼

Phaser 4 supports FIT, ENVELOP, and RESIZE scale modes through the ScaleManager. These modes manage how the game canvas adapts to different viewport sizes while preserving aspect ratios or dynamically resizing the game area.

How do I handle orientation changes and fullscreen transitions in Phaser 4?▼

Handle orientation changes and fullscreen transitions in Phaser 4 by listening to ScaleManager events. This allows you to adjust cameras and UI elements dynamically when switching between landscape and portrait or entering fullscreen mode.

Does this responsive scaling approach work for both tablets and phones?▼

Yes, this responsive scaling approach applies to games deployed across desktops, tablets, and phones. The ScaleManager manages viewport size variations and auto-centering options to deliver a consistent experience across all these devices.

Why does my Phaser game UI misalign after resizing the browser window?▼

Phaser game UI misaligns after resizing the browser window if you do not handle resize events to adjust cameras and UI. Applying ScaleManager configurations like RESIZE mode ensures the layout updates correctly during dynamic viewport changes.

Related Skills

Explore More Software Engineering Skills→
Joshua-AllenJoshua-Allen

game-setup-and-config

Automate Phaser 4 game instance creation and configuration.

Community
Intermediate
dsifrydsifry
379

visual-review

Capture web page and UI screenshots with Playwright for visual inspection.

Community
Intermediate
simon-tannasimon-tanna

cameras

Manage camera effects, following, zooming, and viewport in Phaser 4.

Community
Intermediate
Joshua-AllenJoshua-Allen

scale-and-responsive

Automate responsive scaling and centering for Phaser 4 games.

Community
Intermediate