Game Setup And Config

This walks you through spinning up a Phaser 4 game instance with the GameConfig object, which is more involved than you'd think. Covers renderer selection (AUTO, WEBGL, CANVAS), pixel art setup with proper antialiasing flags, FPS limits, canvas insertion, and the full boot sequence from DOMContentLoaded through the game loop. The pixel art patterns alone are worth having on hand since getting crisp pixels at scale requires specific combinations of antialias, antialiasGL, and roundPixels. Also useful for understanding why your transparent canvas isn't working or why your custom FPS target isn't kicking in. The config precedence rules between top-level and nested properties can bite you if you're not careful.

skills.sh installs: 1.4K
GitHub stars: 40.7K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add phaserjs/phaser --skill game-setup-and-config --agent claude-code

Installs into .claude/skills of the current project.

Files

Game Setup and Config

How to create a Phaser.Game instance with the right GameConfig options for renderer, scaling, pixel art, FPS, and canvas placement.

Key source paths: src/core/Game.js, src/core/Config.js, src/core/typedefs/GameConfig.js, src/const.js, src/scale/const/ Related skills: ../scenes/SKILL.md, ../loading-assets/SKILL.md, ../scale-and-responsive/SKILL.md

Quick Start

The simplest possible Phaser 4 game -- a single scene with the default 1024×768 canvas:

class MyScene extends Phaser.Scene {
    preload() {
        this.load.image('logo', 'assets/logo.png');
    }

    create() {
        this.add.image(400, 300, 'logo');
    }
}

const config = {
    type: Phaser.AUTO,
    scene: MyScene
};

const game = new Phaser.Game(config);

new Phaser.Game(config) triggers the entire boot sequence: config parsing (Config), renderer creation, DOM insertion, and the game loop (TimeStep). The game waits for DOMContentLoaded before booting.