Issue: Button Hitboxes don't scale with rest of the game

[christianstrang]

Hello everyone

I'm currently having an issue with button-hitboxes after I scale the game down, the buttons scale down as well but the hitboxes for the buttons remain at their original position.

 

I create my phaser game with the following line of code:

var game = new Phaser.Game(480, 640, Phaser.AUTO, 'gameCanvas', { preload: preload, create: create, update: update, render: render });

The scaling is done through css (giving the canvas object a width of 100%):

canvas  {width: 100%; max-width: 480px;}

Is anyone familiar with this issue? Is it maybe the wrong scaling approach using css? Any help is greatly appreciated!

[christianstrang]

Is there maybe some other, more appropriate way to scale a game/make it responsive?

Is scaling usually done with "game.scale"?

[ram64]

I think you should use minWidth/minHeight and maxWidth/maxHeight properties of the ScaleManager.  I have also noticed that if you use CSS on the game canvas element it will mess up the hit areas (I added padding on the canvas). This is probably due to some internal calculations that the ScaleManager does.

[clark]

Does anyone know if there is a specific part of phaser which can be refreshed to deal with the mapping issue?

We finally managed to support multiple resolutions with the pixelRatio and some CSS, but yeah, the button mapping goes crazy.  

[clark]

bump

[Tweeper]

I'm having exactly the same problem. Seems indeed the hitarea is not scaled with the canvas. Trying to fix this with the scalemanager and that seems to work, except for when the game is in fullscreen mode (html document is running from within an iframe and the iframe is the element going to fullscreen). Guess I have to dig into the manual