Scale to fill the screen

Phaser 2 / CE
1

Hi
I want to scale my game to fullscreen without stretching. I use this code

this.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT;

it looks stretched.How to solve this.Guys help me.Thanks in advance.

2

You can try this:
this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.scale.refresh()

3

Hi thanks,If i use this

this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

it show with full screen but there is a space in sides.i want to show the full window size without stretching.

4

You see spaces because it tries to maintain aspect ratio. If you want to fully fill the screen to any size you want to set the game size directly, for example:

class Boot extends Phaser.State {
  init() {
    // Dynamically resize game if the window size changes
    this.scale.scaleMode = Phaser.ScaleManager.RESIZE
  }
}

const config = {
  width: window.innerWidth,
  height: window.innerHeight,
  state: Boot
}

const game = new Phaser.Game(config)

However doing this way, you probably not going to hard code the positioning of your game objects. And it will be very problematic if you have to support to dynamically resize game if the window size changes.

If you still want to code your game in fixed resolution and position, I do have an idea but have no example for this. You put an full window iframe as a viewport to the game which can allow some parts of the be to cropped slightly to fit the browser window using quite abit of css and possibly also js, usually 16:9 should be minimal impact nowadays unless you need to support mobile devices in both portrait and landscape it will be very problematic.