Jump to content

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


Recommended Posts

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?


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Cheers again Lewster :D


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);
Link to comment
Share on other sites


  • Recently Browsing   0 members

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