scale-and-responsive

What problem does it solve?

This Skill addresses the challenge of making Phaser 4 games responsive and handling display scaling, ensuring a consistent experience across different devices and screen sizes.

Core Features & Use Cases

• Responsive Scaling: Adapts game size and scaling mode to fit any screen size while maintaining aspect ratio.
• Scale Modes: Offers various scale modes like FIT, RESIZE, EXPAND, and ENVELOP to suit different design requirements.
• Centering: Provides options for centering the game within the screen.
• Fullscreen and Resize Handling: Manages fullscreen transitions and browser window resize events.
• Use Case: A game developer uses this Skill to create a responsive game that looks great on mobile, tablet, and desktop devices.

Quick Start

Use the scale-and-responsive skill to set up responsive scaling for your Phaser 4 game with the following configuration:

const config = {
    type: Phaser.AUTO,
    scale: {
        parent: 'game-container',
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH,
        width: 800,
        height: 600
    },
    scene: MyScene
};
const game = new Phaser.Game(config);