Buttons - does not work after browser resizing or changing page orientation

Phaser 3
1

Hi @All,

I’m quite new to Phaser and I’ve got some problems with my generated buttons.
In case I open my game, everything works fine.

When I resize my window by double-clicking the browsers head, the game keeps it’s size => That’s good!
But when I want to click on the button, it’s hit area moves to anywhere else in the window.
Same effect when I change page orientation in any of my mobile devices… no button is working.
Everything else works fine.

I’m not sure if this snippet of my code is enough to have an idea of what may be the reason for that?
Thanks for any ideas! :slightly_smiling_face:

var config = {
	type: Phaser.AUTO,
	scale: {
    parent: 'slot_parent',
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
    width: 660,
    height: 575
	},
	scene: {
    preload: preload,
    create: create
    },
	transparent: true
};

function isMobile() {
  try{ document.createEvent("TouchEvent"); return true; }
  catch(e){ return false; }
}

if(isMobile() ==false ){
	config.scale.autoCenter = Phaser.Scale.NO_CENTER;
	config.scale.mode = Phaser.Scale.NONE;
}    


function setSprite(obj, paramsObj){
	var newImageObj = obj.add.sprite(paramsObj.xpos, paramsObj.ypos, paramsObj.imageName).setOrigin(0, 0);
	newImageObj.setDepth(paramsObj.setZIndex);
	
	return newImageObj;
}


myButton = setSprite(self, {xpos: 560, ypos: 515, imageName: "buttonImage", setZIndex: 500}).setInteractive({ useHandCursor: true  })
.on('pointerover',	function(){ 	doSomething();	})
.on('pointerout',	function(){ 	doSomething();    })
.on('pointerdown',	function(){ 	doSomething();    })
.on('pointerup',	function(){ 	doSomething();    });
2 Likes
2

I would try removing any extra CSS or HTML and see if the problem persists.

3

Thanks for your reply.
Well, I’ve removed all CSS except of this one:

<style media='screen' type='text/css'>
@font-face {  
font-family:TektonPro-Ext;
src: url("./games/busch/fonts/TektonPro-Ext.otf");  /* EOT for IE */
src: local("TektonPro-Ext"), url(./games/busch/fonts/TektonPro-Ext.otf) format("truetype"); /* non-IE */  
} 
</style>

The same effect :frowning:

4

Hi, here an interesting case, just in case it could help…