~1 min read

Loader & Assets

How the asset pipeline works — queueing in preload, the typed cache, and patterns for large games.

Each scene has a Loader (this.load) that queues asset requests during preload(). When preload() returns, the loader runs to completion before create() is called.

The basic shape

preload() {
	this.load.image('player', 'assets/player.png');
	this.load.spritesheet('explosion', 'assets/explosion.png', { frameWidth: 64, frameHeight: 64 });
	this.load.audio('hit', ['assets/hit.ogg', 'assets/hit.mp3']);
	this.load.json('levels', 'assets/levels.json');
}

Each entry registers under a string key. The corresponding cache exposes typed accessors — this.textures.get('player'), this.cache.json.get('levels'), etc.

Loading progress

To show a progress bar, listen on the loader during preload:

this.load.on('progress', (p: number) => bar.setScale(p, 1));
this.load.on('complete', () => bar.destroy());

A common pattern is a tiny Boot scene that loads the loading bar’s own assets, then transitions to a Preload scene that loads everything else.

Loading after preload

You can call this.load.image(...) after preload, but you must explicitly start the loader:

this.load.image('boss', 'assets/boss.png');
this.load.once('complete', () => this.spawnBoss());
this.load.start();

Useful for streaming-in level data, but prefer eager loading where you can — the runtime cost of a mid-game stall is much higher than the memory cost of holding a texture.

Atlases

For non-trivial games, pack sprites into a texture atlas rather than loading each PNG individually:

this.load.atlas('ui', 'assets/ui.png', 'assets/ui.json');
this.add.image(0, 0, 'ui', 'button-play');

Fewer files, fewer draw calls, less GPU memory thrash.

  • Scenes — the lifecycle that owns the loader.
  • Game Objects — the consumers of loaded textures.