Scale or resize the game canvas
Switch branches/tags
Clone or download
Latest commit 84506ad Oct 27, 2018
Permalink
Failed to load latest commit information.
dist Fix event removal Oct 27, 2018
examples Add `data` configuration Sep 16, 2018
src Fix event removal Oct 27, 2018
.eslintrc.yml Hello Jul 11, 2018
README.md Add `data` configuration Sep 16, 2018
package-lock.json 1.2.1 Oct 27, 2018
package.json 1.2.1 Oct 27, 2018

README.md

Phaser 3 Game Scale Plugin

Scale or resize the game canvas.

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({/**/});