How to update the Button Mappings when the Canvas is resized with CSS?

[clark]

Note see #3 CSS is not the issue.

 

After a rather long process of coding all the possible layouts for devices in different orientations and so on, everything is looking good.  

 

One of the modes possible is native resolution on a mobile device.  I am aware of the performance concerns, but since this is a Framework, I would like to have it in place and forget about it.

 

On a Ipad 3/4 for example, the resolution of the device is 1024 x 768 with a PixelRatio of @2 so actually 2048 x 1536  is the size of the Canvas which Phaser will in turn create. 

We then use CSS to scale the canvas by 50%, so now we have our 1024x768 @ 2x res. 

This is all good.

 

But my mappings are not updated.  For example, none of the buttons are clickable any more but they remain clickable at 2X size.  So imagine a put a Button in the middle of the screen at 2X,  after CSS resize, my button is visually in the center of the device, but I can click it at the bottom right of the screen.... 

I understand attacking the canvas outside of the scope of Phaser is going to be unwise, but, I wondered is there any way to refresh the mappings of the buttons?  It is clearly unrelated to Textures, so I was trying stuff like "input.reset()" but having no luck. 

OR if I am going to resize the canvas, is there is a way I should do it from within Phaser in a way that would solve this issue?

Thanks! 

[lewster32]

I think resizing the canvas with CSS is going to be problematic; hence why Phaser offers built-in functions to resize the canvas from within. I think game.scale.setSize() refreshes the size calculation values, but I don't know if that's enough to also update the inputs.

[clark]

Cheers again Lewster

 

I messed around with the various methods of scaling and got rid of the external CSS. 

I can achieve something similar but yeah no luck with the mappings.  I might write a bug real soon after messing around with it a little more.  
 

var tx : number = this.game.canvas.width / this.game.device.pixelRatio;var ty : number = this.game.canvas.height / this.game.device.pixelRatio;this.game.scale.maxWidth = tx;this.game.scale.maxHeight = ty;this.game.scale.minWidth = tx;this.game.scale.minHeight = ty;this.game.scale.setSize();

Edit: When scoping out the scale class, I noticed that input.scale is being set.  So I tried to do something similar but no luck either. 
 

this.game.input.scale.setTo(1/this.game.device.pixelRatio, 1/this.game.device.pixelRatio);

[lewster32]

I have a funny feeling the input handler may listen for a resize signal and do something appropriate, but at a glance I can't find a listener. I'll take a look when I get home later.