phaser-plugin-game-scale's Introduction

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

phaser-plugin-game-scale's People

Contributors

Stargazers

Watchers

phaser-plugin-game-scale's Issues

this.game.resize seems broken in phaser 3.16.2

Hi, samme! first of all, thank you for making this awesome plugin :)

The plugin was working very well until I update phaser to 3.16.2. It is showing error in GameScenePlugin.js on line this.game.resize(width, height);

In new phaser resize function has been removed & we need to use scale manager resize function instead. I try to update it with same and resolved the error but now the game is not getting resized.

can you please look into this?

Thank you.

Webpack compatibility

Thank you for making this.

I am having issue getting this to work with webpack. I'm importing like this:

import 'phaser';
import ControlPlugin from './plugins/control';
import GameScalePlugin from './plugins/GameScalePlugin';
import BootScene from './scenes/BootScene'
import PreloadScene from './scenes/PreloadScene'
import StageScene from './scenes/StageScene'

const config = {
	type: Phaser.AUTO,
	parent: 'wrapper',
	width: 800,
	height: 600,
	scaleMode: 0,
	pixelArt: true,
	clearBeforeRender: false,
	physics: {
		default: 'matter',
		matter: {
			gravity: { y: 1 },
			debug: false,
			enableSleep: false
		}
	},
	plugins: {
		scene: [
			{ key: 'ControlPlugin', plugin: ControlPlugin, mapping: 'Controls' }
		],
		global: [
			{ key: 'GameScalePlugin', plugin: GameScalePlugin, mapping: 'gameScale' }
		]
	},
	scene: [
		BootScene,
		PreloadScene,
		StageScene
	]
};

const game = new Phaser.Game(config);

I can see the plugin in the bundle but it isn't getting mapped to the scenes.