game-setup-and-config

# 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: ```js 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. ## Core Concepts ### Boot Sequence (src/core/Game.js) 1. `new Phaser.Game(config)` -- parses config into a `Phaser.Core.Config` instance. 2. Creates global managers: `AnimationManager`, `TextureManager`, `CacheManager`, `InputManager`, `SceneManager`, `ScaleManager`, `SoundManager`, `TimeStep`, `PluginManager`. 3. Waits for `DOMContentLoaded`, then calls `boot()`. 4. `boot()` creates the renderer (`CreateRenderer`), adds the canvas to the DOM (`AddToDOM`), prints the debug header, emits `BOOT`....