scale-and-responsive

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

Updated Mar 27, 2026

Search Tags:#canvas #responsive #scaling #gamedev #phaser #fullscreen

Ready to run

npx skills add https://github.com/tja688/WebGameDevPlace --skill scale-and-responsive-tja688

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: scale-and-responsive
Source: https://github.com/tja688/WebGameDevPlace/tree/main/.claude/skills/scale-and-responsive
Command: npx skills add https://github.com/tja688/WebGameDevPlace --skill scale-and-responsive-tja688

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill resolves the complexity of managing game canvas dimensions, aspect ratios, and device orientation across various screen sizes and browser environments.

Core Features & Use Cases

Dynamic Scaling Modes: Implements FIT, RESIZE, EXPAND, and ENVELOP modes to ensure games look perfect on any display.
Fullscreen & Orientation: Provides robust handling for browser fullscreen toggles and mobile device orientation changes.
Use Case: Use this skill to configure a game that automatically letterboxes on desktop while expanding to fill the screen on mobile devices, ensuring consistent input coordinates.

Quick Start

Configure your game scale object with mode Phaser.Scale.FIT and autoCenter Phaser.Scale.CENTER_BOTH to ensure your game maintains its aspect ratio while centering within the browser window.

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 mobile and desktop viewports?▼

To make a Phaser 4 game responsive, you configure the ScaleManager with scaling modes like FIT or RESIZE and handle dynamic resize events to ensure consistent rendering across mobile and desktop viewports.

What Phaser scaling mode should I use to maintain aspect ratio while centering the canvas?▼

Using Phaser.Scale.FIT mode with autoCenter set to Phaser.Scale.CENTER_BOTH maintains your game's aspect ratio while centering the canvas, effectively letterboxing the display on mismatched screens.

How does Phaser handle device orientation changes and fullscreen transitions?▼

Phaser handles orientation and fullscreen transitions by applying robust ScaleManager configurations that manage browser fullscreen toggles and mobile device orientation changes dynamically.

What is the difference between FIT, RESIZE, EXPAND, and ENVELOP scaling modes in game development?▼

FIT letterboxes the game to maintain aspect ratio, RESIZE adjusts the canvas dimensions dynamically, EXPAND stretches the canvas, and ENVELOP scales the game to fill the screen while cropping edges.

Why are input coordinates misaligned after resizing my Phaser game canvas?▼

Misaligned input coordinates after resizing occur when the canvas scaling mode lacks proper resize event management, which this skill resolves by applying consistent ScaleManager configuration across viewports.