Canvas objects are not clickable when canvas is transformed

Phaser 3
1

Hi , I have problem when canvas is rotated , its objects show in correct place , but they are not clickable anymore , the click is received way off to the object , how can I solve this issue?

2

Can you rotate the main camera instead?

3

Hi , I have card game where I want user to play landscape even when mobile is in portrait , I have transformed the canvas when in portrait mode, game fits well. all objects are not clickable, click bounds are somewhere else in screen. I have used below code for rotating in portrait mode

canvas.style.webkitTransform = “rotate(90deg)”;
setTimeout(function () {
canvas.style.width = window.innerHeight + ‘px’;
canvas.style.height = window.innerWidth + ‘px’;

      var topmargin = (window.innerHeight - window.innerWidth) / 2;
      var leftmargin = (window.innerWidth - window.innerHeight) / 2;
 
      canvas.style['margin-left'] = leftmargin + "px";
      canvas.style['margin-top'] = topmargin + "px";
    }, 1000);
4

Hi Can any one help on this ?

5

I just don’t think that’s going to work. If you need rotation with input, you have to rotate a camera instead.

6

Hi I have rotated camera , but screen does not fit in portrait mode. Screen in portrait looks as below
Screen Shot 2020-01-26 at 1.20.34 AM

below is my config:

var gameWidth = 1920;
var gameHeight = 1080;
const config = {
type: Phaser.AUTO,
pixelArt: false,
width: gameWidth,
height: gameHeight,
scale: {
mode: Phaser.Scale.AUTO,
pageAlignVertically: true,
orientation: [‘landscape’, ‘landscape-primary’]
},

};

when in Portrait mode I am rotating using camera in canvas scene as below
cam = this.cameras.main;
cam.rotation = 1.576;

7

Try scale mode Phaser.Scale.FIT.

8

Thankyou It helped