Mouse position and button in a css scaled canvas

[saltemishel]

Hi All,

Is there a way for us to edit the game's pointer position according to the css scaled canvas?

I'm setting my phaser game canvas size to 200% screen size and scale my game down to 100% screen size using css.

I need to make the mouse position times 2 but not sure where I can make the changes that the phaser button will work.

Thanks.

 

 

 

 

[saltemishel]

In case anyone needs it, I added the following code in each of the game state's resize function to update the mouse position. (I don't guarantee that it won't cause any unwanted problem though)

this.game.input.scale.x=this.game.width/window.innerWidth;
this.game.input.scale.y=this.game.height/window.innerHeight;

I'm using this scale mode, the game will resize game canvas to fit the game canvas always.

this.game.scale.scaleMode = Phaser.ScaleManager.RESIZE;

 

[samme]

6 hours ago, saltemishel said:

I'm setting my phaser game canvas size to 200% screen size and scale my game down to 100% screen size using css.

Did you try

new Phaser.Game({resolution: 2})

?

[saltemishel]

ooh cool @samme never know about that.

Where should I put the resolution parameter?

it seems there's no resolution setting in the parameters.

new Game(width, height, renderer, parent, state, transparent, antialias, physicsConfig)

 

 

[samme]

It's not in the positional arguments but you can put it in a config object:

new Phaser.Game({
  antialias:             true,
  enableDebug:           true,
  height:                600,
  physicsConfig:         null,
  preserveDrawingBuffer: false,
  renderer:              Phaser.AUTO,
  resolution:            1,
  scaleMode:             Phaser.ScaleManager.NO_SCALE,
  seed:                  null,
  transparent:           false,
  width:                 800,
})

The object config isn't documented in 2.6.2 but you can read v2/src/core/Game.js#L446.

[saltemishel]

Ow cool, learn something new. Thanks!