Input scale not persisting

[johncintron]

Hey folks,

I have a webpage with a game and a form where a user can enter a height and width to scale the game via CSS transforms. When the entire game is scaled, this causes some problems with mouse input, so there is some code to remedy this. Here's a snippet:

const DEFAULT_WIDTH = 800;
const DEFAULT_HEIGHT = 600;
var USER_DEFINED_WIDTH = 800;
var USER_DEFINED_HEIGHT = 600;

function adjustDimensions() {
    var f = document.getElementById("dimension-adjust");
    USER_DEFINED_WIDTH = parseInt(f.children[0].value);
    USER_DEFINED_HEIGHT = parseInt(f.children[1].value);
    document.getElementById("game-border").style.transform = "scale(" + USER_DEFINED_WIDTH/DEFAULT_WIDTH + ", " + USER_DEFINED_HEIGHT/DEFAULT_HEIGHT + ")";
    game.input.scale.set(USER_DEFINED_WIDTH/DEFAULT_WIDTH, USER_DEFINED_HEIGHT,DEFAULT_HEIGHT);
}

game.state.add("screen1", screen1);
game.state.start("screen1");

function screen1() {
    this["render"] = function() {
        game.debug.inputInfo(30, 30);
    };
}

I can see from the render that this scales the game, but only for a second or so before it reverts back to (1, 1) scaling, i.e. the scaling doesn't persist.

 

However, if I include an update loop repeatedly scales the game, there's no problem. For example:

function screen1() {
    this["update"] = function() {
        game.input.scale.set(USER_DEFINED_WIDTH/DEFAULT_WIDTH, USER_DEFINED_HEIGHT,DEFAULT_HEIGHT);
    };
    this["render"] = function() {
        game.debug.inputInfo(30, 30);
    };
}

this seems to solve the problem.

 

Why is it not the case that the scaling is set once and preserved indefinitely in the adjustDimensions function? Why do I have to update it every time? I'm using Phaser 2.6.2 by the way.

[stupot]

I think if you are using one of Phasers built in scale modes, then it will constantly try to keep that happy, ie if you adjust the html layout manualy then phaser will put it back to satisfy itself.  If this is the case, then you need to decide if you are handling the scaling or Phaser is, you can't both do it.

[ForgeableSum]

1. Scale the renderer with:

game.renderer.resize(width, height);

2. Then scale the game world width and height by manually setting the new width/height (game.width/height, game.stage.width/height, game.camera.width/height). 

3. Then scale input with game.input.scale. 
 

That's the gist of it. 

[johncintron]

I've tried this, but it doesn't work.

if (!!game) {
    game.renderer.resize(DEFAULT_WIDTH, DEFAULT_HEIGHT);
    game.width = DEFAULT_WIDTH;
    game.height = DEFAULT_HEIGHT;
    game.stage.width = DEFAULT_WIDTH;
    game.stage.height = DEFAULT_HEIGHT;
    game.camera.width = DEFAULT_WIDTH;
    game.camera.height = DEFAULT_HEIGHT;
    game.input.scale.set(DEFAULT_WIDTH/USER_DEFINED_WIDTH, DEFAULT_HEIGHT/USER_DEFINED_HEIGHT);
}

 

Maybe I should have been clear about my objective in the first place: I want the game to always be of 800x600 resolution, but make it possible via CSS transitions (or whatever else) to scale the game up or down without affecting the 800x600. The Phaser API makes it possible to scale/resize the game, but this will affect every call that draws something on the canvas. For example, if I want to draw something in the center, I'd do game.add.image(400, 300), but if I resize the game, I would have to do game.add.image(USER_DEFINED_WIDTH / 2, USER_DEFINED_HEIGHT / 2). Basically, I want Phaser to always believe my game is 800x600 regardless of how wide or tall the game actually appears to the user. So that, for example, the user stretches the game to appear as 1440x900 but the game itself is still 800x600.

[samme]

5 hours ago, johncintron said:

Basically, I want Phaser to always believe my game is 800x600 regardless of how wide or tall the game actually appears to the user.

I think you just need scaleMode = SHOW_ALL.

[johncintron]

That doesn't do it for me. I forgot to mention that aspect ratio intentionally should not be preserved. For example, if the user goes from 800x600 to 1600x600, then it should be twice as wide and retain its original height, while still "being" a 800x600 game.

 

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

This snippet maintains the aspect ratio, e.g. updating the width to 1600 also updates the height to 1200.

[samme]

Try EXACT_FIT?

[johncintron]

That seems to do the trick, thanks. I was about to comment that I'd exhaustively tried every option here http://phaser.io/docs/2.6.2/Phaser.ScaleManager.html#scaleMode until I changed my code to not use CSS transforms. Here's how the code looks now:

 

//before
document.getElementById("game-border").style.transform = "scale(" + USER_DEFINED_WIDTH/DEFAULT_WIDTH + ", " + USER_DEFINED_HEIGHT/DEFAULT_HEIGHT + ")";



//after
game.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT;
var g = document.getElementById("game-border");
g.style.width = USER_DEFINED_WIDTH + "px";
g.style.height = USER_DEFINED_HEIGHT + "px";

 

I completely overlooked this alternative and should not have used CSS scaling. Thanks again; your help saved me a lot of frustration.