Game scaling help

[ForgeableSum]

When I scale the entire game world, my input is thrown off - i.e. where phaser thinks the mouse is is not where the mouse is. 

 

 

When you zoom in (increase the game scale), the true position of the pointer is up and to the left of where phaser thinks the pointer is in the game world. the opposite is true when you zoom out (down and to the right). 

 

I can't seem to figure out how to scale me input so that it works when the game world scales. I've tried setting the game.input scale to the same as the game.world scale and I've also tried the following formula:

 

 

 var inputScale;    if (scale > 1) {        inputScale = 1 - (scale - 1);    } else {        inputScale = (1 - scale) + 1;    }    game.input.scale.set(inputScale);    game.world.scale.set(scale);

Nothing seems to work. I don't know what sort of relationship the scale of the game input has with the scale of the game world. you would thing the relationship would be =, i.e. whatever the game input scale is, the game world should be the same. but apparently that's not the case. 

[wayfinder]

have you tried just leaving it at 1? what happens then? what about 1/world.scale?

[GBeebe]

I dont use phaser but when I scale my canvas, I do the opposite to my mouse coordinates.

[ForgeableSum]

have you tried just leaving it at 1? what happens then? what about 1/world.scale?

That's interesting. When I do 1 / world.scale, it works as intended with the mouse coordinates matching the scaled world. However, when I move the camera, everything is thrown off. Another thing that works is dividing everything by the world scale. For example, if I place an object in the game, I can get it to place in the correct spot if I divide the placeX and placeY by the world scale. It seems to me though that there would be some kind of central place i could apply this transformation (like in game.input) so I don't have to do it on each action that uses pointer x/y.

 

 

I dont use phaser but when I scale my canvas, I do the opposite to my mouse coordinates.

 

Can you elaborate on how you achieve this? What formulas do you use i mean?

[wayfinder]

have you tried using pointer.worldX/worldY instead of x/y—this would probably be completely unscaled

[ForgeableSum]

have you tried using pointer.worldX/worldY instead of x/y—this would probably be completely unscaled

I always use worldX/worldY when reading the coordinates on activePointer. 

[ForgeableSum]

hmmm I just don't understand what the game camera has to do with any of it. I tried scaling the game camera - no effect. I feel like there's something else that needs to be scaled when you do:

 

   game.world.scale.set(scale); 

   game.input.scale.set(1 /scale);

[wayfinder]

in my code, i scale just the camera and not the world...

[ForgeableSum]

in my code, i scale just the camera and not the world...

When you do scale the camera, what do you do to game.input? I've tried everything (scaling the same, no scaling, scaling inverse) and the inputs are always off when I scale the camera. 

[wayfinder]

I don't scale game.input. my setup is a bit more complicated than yours, i think—since i have per-object parallaxing, i keep a separate camera focus and camera pan position and assemble them each frame, calculating each object's position according to its parallax depth. it took me a big long while to puzzle out all the relationships between values so that everything worked, and i'm not gonna lie, for a while i thought i'd have to scrap the whole idea, but i guess I grew with the challenge and my perseverance paid off

 

here are two very useful functions i am using, perhaps they will be useful to you as well:

 

    inGameCoords: function(browserCoordinates) {                if (browserCoordinates) {                        var ret = new Phaser.Point();                        ret.setTo((browserCoordinates.x + this.camera.x) * this.inverseCamScale, (browserCoordinates.y + this.camera.y) * this.inverseCamScale);                         return ret;                 } else return null;            },        inBrowserCoords: function(gameCoordinates) {                if (gameCoordinates) {                        var ret = new Phaser.Point();                        ret.setTo(gameCoordinates.x * this.camera.scale.x - this.camera.x, gameCoordinates.y * this.camera.scale.y - this.camera.y);                        return ret;                 } else return null;            }

 

 

edit: these assume that your game uses the whole browser