Skip to main content
Game Development

Return to Answer

edited body
Source Link
nazimboudeffa
nazimboudeffa
  • 119
  • 3

I haven't tested Phaser Editor to see if it's possible to resize a game but if you want to resize your game in Phaser 2 (CE) with some code it's easy, in fact you have diffrent ways of doing that in the init() method using :

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

You can replace SHOW_ALL and play with this command by

  • EXACT_FIT
  • RESIZE
  • SHOW_ALL

Plus two other options for the command that I don't add to this list butbecause those are the most important and you can find in the documentation

In my opinion the best one and the most used is to scale it like the code below by using Phaser.ScaleManager.SHOW_ALL

var game = new Phaser.Game({
  state: {

    init: function() {
      game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
      game.scale.pageAlignHorizontally = true;
      game.scale.pageAlignVertically = true;
    },

    preload: function() {
      // This is equivalent to <https://examples.phaser.io/assets/>.
      this.load.baseURL = 'https://raw.githubusercontent.com/photonstorm/phaser-examples/tree/master/examples/assets/';
      this.load.crossOrigin = 'anonymous';
      this.load.image('einstein', 'pics/ra-einsteinra_einstein.png');
    },

    create: function() {
      this.add.image(0, 0, 'einstein');
    },

    update: function() {

    }

  }
});
html, body {
  padding: 0;
  margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/phaser.js"></script>

I haven't tested Phaser Editor to see if it's possible to resize a game but if you want to resize your game in Phaser 2 (CE) with some code it's easy, in fact you have diffrent ways of doing that in the init() method using :

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

You can replace SHOW_ALL and play with this command by

  • EXACT_FIT
  • RESIZE
  • SHOW_ALL

Plus two other options for the command that I don't add to this list but you can find in the documentation

In my opinion the best one and the most used is to scale it like the code below by using Phaser.ScaleManager.SHOW_ALL

var game = new Phaser.Game({
  state: {

    init: function() {
      game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
      game.scale.pageAlignHorizontally = true;
      game.scale.pageAlignVertically = true;
    },

    preload: function() {
      // This is equivalent to <https://examples.phaser.io/assets/>.
      this.load.baseURL = 'https://raw.githubusercontent.com/photonstorm/phaser-examples/tree/master/examples/assets/';
      this.load.crossOrigin = 'anonymous';
      this.load.image('einstein', 'pics/ra-einstein.png');
    },

    create: function() {
      this.add.image(0, 0, 'einstein');
    },

    update: function() {

    }

  }
});
html, body {
  padding: 0;
  margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/phaser.js"></script>

I haven't tested Phaser Editor to see if it's possible to resize a game but if you want to resize your game in Phaser 2 (CE) with some code it's easy, in fact you have diffrent ways of doing that in the init() method using :

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

You can replace SHOW_ALL and play with this command by

  • EXACT_FIT
  • RESIZE
  • SHOW_ALL

Plus other options for the command that I don't add to this list because those are the most important and you can find in the documentation

In my opinion the best one and the most used is to scale it like the code below by using Phaser.ScaleManager.SHOW_ALL

var game = new Phaser.Game({
  state: {

    init: function() {
      game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
      game.scale.pageAlignHorizontally = true;
      game.scale.pageAlignVertically = true;
    },

    preload: function() {
      // This is equivalent to <https://examples.phaser.io/assets/>.
      this.load.baseURL = 'https://raw.githubusercontent.com/photonstorm/phaser-examples/master/examples/assets/';
      this.load.crossOrigin = 'anonymous';
      this.load.image('einstein', 'pics/ra_einstein.png');
    },

    create: function() {
      this.add.image(0, 0, 'einstein');
    },

    update: function() {

    }

  }
});
html, body {
  padding: 0;
  margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/phaser.js"></script>

added 193 characters in body
Source Link
nazimboudeffa
nazimboudeffa
  • 119
  • 3

I haven't tested Phaser Editor to see if it's possible to resize a game but if you want to resize your game in Phaser 2 (CE) with some code it's easy, in fact you have diffrent ways of doing that butin the best oneinit() method using :

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

You can replace SHOW_ALL and play with this command by

  • EXACT_FIT
  • RESIZE
  • SHOW_ALL

Plus two other options for the command that I don't add to this list but you can find in the documentation

In my opinion the best one and the most used is to scale it like the code below by using Phaser.ScaleManager.SHOW_ALL

var game = new Phaser.Game({
  state: {

    init: function() {
      game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
      game.scale.pageAlignHorizontally = true;
      game.scale.pageAlignVertically = true;
    },

    preload: function() {
      // This is equivalent to <https://examples.phaser.io/assets/>.
      this.load.baseURL = 'https://raw.githubusercontent.com/sammephotonstorm/phaser-examples-mirror/tree/master/examples/assets/';
      this.load.crossOrigin = 'anonymous';
      this.load.image('einstein', 'pics/ra-einstein.png');
    },

    create: function() {
      this.add.image(0, 0, 'einstein');
    },

    update: function() {

    }

  }
});
html, body {
  padding: 0;
  margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/phaser.js"></script>

I haven't tested Phaser Editor to see if it's possible to resize a game but if you want to resize your game in Phaser 2 (CE) with some code it's easy, in fact you have diffrent ways of doing that but the best one in my opinion and the most used is to scale it like the code below

var game = new Phaser.Game({
  state: {

    init: function() {
      game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
      game.scale.pageAlignHorizontally = true;
      game.scale.pageAlignVertically = true;
    },

    preload: function() {
      // This is equivalent to <https://examples.phaser.io/assets/>.
      this.load.baseURL = 'https://raw.githubusercontent.com/samme/phaser-examples-mirror/master/assets/';
      this.load.crossOrigin = 'anonymous';
      this.load.image('einstein', 'pics/ra-einstein.png');
    },

    create: function() {
      this.add.image(0, 0, 'einstein');
    },

    update: function() {

    }

  }
});
html, body {
  padding: 0;
  margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/phaser.js"></script>

I haven't tested Phaser Editor to see if it's possible to resize a game but if you want to resize your game in Phaser 2 (CE) with some code it's easy, in fact you have diffrent ways of doing that in the init() method using :

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

You can replace SHOW_ALL and play with this command by

  • EXACT_FIT
  • RESIZE
  • SHOW_ALL

Plus two other options for the command that I don't add to this list but you can find in the documentation

In my opinion the best one and the most used is to scale it like the code below by using Phaser.ScaleManager.SHOW_ALL

var game = new Phaser.Game({
  state: {

    init: function() {
      game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
      game.scale.pageAlignHorizontally = true;
      game.scale.pageAlignVertically = true;
    },

    preload: function() {
      // This is equivalent to <https://examples.phaser.io/assets/>.
      this.load.baseURL = 'https://raw.githubusercontent.com/photonstorm/phaser-examples/tree/master/examples/assets/';
      this.load.crossOrigin = 'anonymous';
      this.load.image('einstein', 'pics/ra-einstein.png');
    },

    create: function() {
      this.add.image(0, 0, 'einstein');
    },

    update: function() {

    }

  }
});
html, body {
  padding: 0;
  margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/phaser.js"></script>

Source Link
nazimboudeffa
nazimboudeffa
  • 119
  • 3

I haven't tested Phaser Editor to see if it's possible to resize a game but if you want to resize your game in Phaser 2 (CE) with some code it's easy, in fact you have diffrent ways of doing that but the best one in my opinion and the most used is to scale it like the code below

var game = new Phaser.Game({
  state: {

    init: function() {
      game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
      game.scale.pageAlignHorizontally = true;
      game.scale.pageAlignVertically = true;
    },

    preload: function() {
      // This is equivalent to <https://examples.phaser.io/assets/>.
      this.load.baseURL = 'https://raw.githubusercontent.com/samme/phaser-examples-mirror/master/assets/';
      this.load.crossOrigin = 'anonymous';
      this.load.image('einstein', 'pics/ra-einstein.png');
    },

    create: function() {
      this.add.image(0, 0, 'einstein');
    },

    update: function() {

    }

  }
});
html, body {
  padding: 0;
  margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/phaser.js"></script>