Game resizing woes after deviceReady

[tidelake]

Hello, I'm having a rough time getting the game to resize to fit the screen on my android tablet.  The game insists on anchoring to the bottom left of the screen in portrait mode, at the minimum width and height.  (Please see the attached picture.)

Here are my initialized vars when the file loads.

/* DEFAULTS OPTIMIZED FOR 16x9 */
var standard_width = 360;
var standard_height = 640;
var screen_16_9_ratio = 1.777777778;
var game_width  = Math.floor(
            Math.round(pixel_ratio * standard_width / 2 * screen_16_9_ratio));
var game_height = Math.floor(
            Math.round(pixel_ratio * standard_height / 2 * screen_16_9_ratio));

var max_game_width  = 960;  // 3x @ 16X9
var max_game_height = 1706;

/* end default dimensions */

And then, in my create() method, which runs before deviceReady() callback.

  game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
  game.scale.pageAlignHorizontally = true;
  game.scale.pageAlignVertically = true;
  game.scale.setMinMax(game_width, game_height,
                          max_game_width, max_game_height);
  game.scale.updateLayout();
  game.scale.refresh();

Here's my deviceReady() callback.

function deviceReady() {
  device_ready     = true;

  game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
  game.scale.pageAlignHorizontally = true;
  game.scale.pageAlignVertically = true;
  game.scale.setMinMax(game_width, game_height,
                          max_game_width, max_game_height);
  game.scale.forceOrientation(false, true);
  game.scale.updateLayout();
  game.scale.refresh();
}

And finally, the loadGame() method which runs right after the deviceready listener is set. IOW, the game loads before deviceReady. (Please correct me if I'm going about this badly, but I can find precious little info on how to load the game on deviceready.

window.onload = function() {
  document.addEventListener("deviceready", deviceReady, false);
  loadGame();
}

function loadGame() {
  game = new Phaser.Game(game_width, game_height, Phaser.AUTO, 'game');
  game.state.add("play", playGame);
	game.state.start("play");
}

 

[VitaZheltyakov]

It is not right:

var standard_width = 360;
var standard_height = 640;
var screen_16_9_ratio = 1.777777778;
var game_width  = Math.floor(
            Math.round(pixel_ratio * standard_width / 2 * screen_16_9_ratio));
var game_height = Math.floor(
            Math.round(pixel_ratio * standard_height / 2 * screen_16_9_ratio));

When:

game = new Phaser.Game(game_width, game_height, Phaser.AUTO, 'game');

Phaser create small canvas-element

[tidelake]

I understand it's not right. I'm asking for help to solve it. Thank you.

[tidelake]

My tablet is 2x pixel ratio at 1200x1920. I don't know how to write the code so the game loads the correct size in multiple devices, not just my own tablet.

[VitaZheltyakov]

3 minutes ago, tidelake said:

My tablet is 2x pixel ratio at 1200x1920. I don't know how to write the code so the game loads the correct size in multiple devices, not just my own tablet.

var game_width  = Math.floor(Math.round(pixel_ratio * standard_width / 2 * screen_16_9_ratio));

game_width = 2*360/2*1.777 = 640px

640 <> 1920

[tidelake]

I still don't know how you're helping me. I understand the canvas size isn't right. How do you propose I load the game correctly in different screen sizes?

[tidelake]

This runs in create.  Why is it not working?

  game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
  game.scale.pageAlignHorizontally = true;
  game.scale.pageAlignVertically = true;
  game.scale.setMinMax(game_width, game_height,
                       max_game_width, max_game_height);

  game.scale.updateLayout();

 

[tidelake]

Alright, so if just I set the dimensions to fit my tablet. Then it runs on my tablet, but it's broken on every other device. Do you understand the question?

[VitaZheltyakov]

8 hours ago, tidelake said:

This runs in create.  Why is it not working?

  game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
  game.scale.pageAlignHorizontally = true;
  game.scale.pageAlignVertically = true;
  game.scale.setMinMax(game_width, game_height,
                       max_game_width, max_game_height);

  game.scale.updateLayout();

 

This code scales the game on the canvas element. But you create a canvas element is small. Try this:

game = new Phaser.Game(window.screen.availWidth * window.devicePixelRatio, window.screen.availHeight * window.devicePixelRatio, Phaser.CANVAS, 'gamewindow');