Phaser 3 Game Scale Plugin
Scale or resize the game canvas. Demo
This is for Phaser v3.15 (or earlier) only. Since Phaser 3.16 use the Scale Manager instead.
Modes
fit— scale the canvas up or down to fit the container, and within min/max lengths (if set).resize— change the game dimensions to fit the container, and within min/max lengths (if set).resize-and-fit— resize within min/max lengths, then scale the canvas to fit any remaining space within the container.none— set the canvas scale to 100%.
The default mode is fit.
Use
new Phaser.Game({
// ...
plugins: {
global: [{
key: 'GameScalePlugin',
plugin: Phaser.Plugins.GameScalePlugin,
mapping: 'gameScale',
data: {/* See 'Configuration' */}
}]
}
// ...
});If you're using ES6 modules, you can use the default export instead:
import GameScalePlugin from 'phaser-plugin-game-scale';
new Phaser.Game({
// ...
plugins: {
global: [{
key: 'GameScalePlugin',
plugin: GameScalePlugin,
mapping: 'gameScale',
data: {/* See 'Configuration' */}
}]
}
// ...
});Set the scale mode:
// Within a scene:
this.gameScale.setMode('resize');Listen to a scene's resize event to react to game size changes.
See the examples for details.
Configuration
These are the default settings:
{
debounce: false,
debounceDelay: 50, // Debounce interval, in ms
maxHeight: Infinity,
maxWidth: Infinity,
minHeight: 0,
minWidth: 0,
mode: 'fit',
resizeCameras: true, // Resize each scene camera when resizing the game
snap: null, // Snap interval, in px
}// Within a scene:
this.gameScale.configure({/* … */});