skills.rest
tja688
tja688COMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/tja688/WebGameDevPlace --skill scale-and-responsive-tja688
Or copy as Structured Prompt for Agent▼
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.

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
serverpodserverpod
8

shadcn_ui-responsive

Manage responsive Flutter layouts using shadcn_ui breakpoints and ShadResponsiveBuilder.

Official
Intermediate
quochung-cyouquochung-cyou

physics-arcade

Configure Arcade Physics in Phaser 4 projects including collision handling and body management.

Community
Intermediate
Dominik-SteinwegDominik-Steinweg

scale-and-responsive

Configure Phaser 4 canvas scaling and responsive layout via ScaleManager.

Community
Intermediate