Jump to content

Game scaling help


ForgeableSum
 Share

Recommended Posts

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. 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...