skills.rest
AmirOssanloo
AmirOssanlooCOMMUNITY
Explore all skills by this author →
GitHub

scale-and-responsive

Configures Phaser 4 ScaleManager for responsive scaling, centering, fullscreen, and resize handling.

Updated Sep 20, 2026
Search Tags:#game development#responsive#resize#phaser#fullscreen#scalemanager#scale mode
One-click install
npx skills add https://github.com/AmirOssanloo/helix-game --skill scale-and-responsive-amirossanloo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: scale-and-responsive
Source: https://github.com/AmirOssanloo/helix-game/tree/main/.claude/skills/scale-and-responsive
Command: npx skills add https://github.com/AmirOssanloo/helix-game --skill scale-and-responsive-amirossanloo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Making a Phaser 4 game adapt to different screen sizes, parent containers, and device orientations requires correctly configuring the ScaleManager, choosing among seven scale modes, and wiring resize and fullscreen events, which is error-prone without a reference. ## Core Features & Use Cases - Scale Mode Configuration: Set up FIT, RESIZE, ENVELOP, EXPAND, and other scale modes with auto-centering, zoom, snap values, and min/max constraints. - Responsive Resize Handling: Subscribe to the resize event to reposition cameras and UI elements when the browser or parent container changes size. - Fullscreen and Orientation: Implement fullscreen toggles triggered from pointerup gestures and respond to device orientation changes on mobile. - Use Case: You are building a browser game that must letterbox correctly on desktop, fill the screen on mobile, and show a rotate-device prompt in portrait mode. Use this Skill to configure the scale config object and event handlers correctly. ## Quick Start Configure my Phaser 4 game to scale to fit its parent container, stay centered, and handle browser resize events.

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 to window resizing?▼

Set scale mode to Phaser.Scale.RESIZE with width and height as '100%' so the canvas fills the parent. Then listen to the scale 'resize' event in your scene and reposition cameras and UI elements using the new gameSize dimensions.

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

FIT scales the canvas via CSS to fit inside the parent while preserving aspect ratio, possibly leaving letterbox bars. RESIZE changes the actual canvas dimensions to match the parent with 1:1 pixel mapping, which can affect GPU fill-rate on large displays.

How do I center a Phaser game canvas on the page?▼

Set autoCenter to Phaser.Scale.CENTER_BOTH in the scale config, which applies CSS margins to center the canvas. The parent element must have calculable dimensions, or centering will not work correctly.

Why does Phaser fullscreen not work on pointerdown?▼

Browsers block fullscreen requests from pointerdown on touch devices unless the document already received touch input. Always call startFullscreen or toggleFullscreen from a pointerup handler for reliable behavior.

Does Phaser ScaleManager work when the parent div has no height?▼

No, the ScaleManager relies on the parent's computed CSS size, and an unstyled div has zero height, breaking scaling and centering. Give the parent explicit dimensions or rely on the default expandParent option to set heights to 100%.

When should I use resize() versus setGameSize() in Phaser?▼

Use resize() only in NONE scale mode, where it sets game, base, and display sizes directly. Use setGameSize() with scaled modes like FIT or ENVELOP so the scale mode calculations are preserved and re-applied.

Related Skills

Explore More Software Engineering Skills→
diegolinharesdiegolinhares

scale-and-responsive

Scale and resize Phaser 4 game canvas using ScaleManager.

Community
Intermediate
travispwingotravispwingo

scale-and-responsive

Configures Phaser 4 ScaleManager for responsive scaling, centering, fullscreen, and orientation handling.

Community
Intermediate
phaserjsphaserjs
40.1k

scale-and-responsive

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

Official
Intermediate
jallard-007jallard-007

scale-and-responsive

Configure Phaser 4 ScaleManager scale modes and auto-centering for responsive games.

Community
Advanced