Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/samme/phaser-plugin-game-scale
Scale or resize the game canvas. Phaser v3.15 only
https://github.com/samme/phaser-plugin-game-scale
phaser phaser-plugin phaser3 phaser3-plugin
Last synced: about 2 months ago
JSON representation
Scale or resize the game canvas. Phaser v3.15 only
- Host: GitHub
- URL: https://github.com/samme/phaser-plugin-game-scale
- Owner: samme
- Created: 2018-07-11T00:23:01.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-07-10T23:12:34.000Z (7 months ago)
- Last Synced: 2024-12-17T05:56:55.804Z (about 2 months ago)
- Topics: phaser, phaser-plugin, phaser3, phaser3-plugin
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/phaser-plugin-game-scale
- Size: 329 KB
- Stars: 37
- Watchers: 6
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Phaser 3 Game Scale Plugin
==========================
Scale or resize the game canvas. [Demo][1]
This is for Phaser v3.15 (or earlier) only. Since Phaser 3.16 use the [Scale Manager][2] instead.
[1]: https://codepen.io/samme/full/oQePbP/
[2]: https://photonstorm.github.io/phaser3-docs/Phaser.Scale.ScaleManager.html
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
---
```javascript
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:
```javascript
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:
```javascript
// Within a scene:
this.gameScale.setMode('resize');
```
Listen to a scene's `resize` event to react to game size changes.
See the [examples](./examples/) for details.
Configuration
-------------
These are the default settings:
```javascript
{
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
}
```
```javascript
// Within a scene:
this.gameScale.configure({/* … */});
```