setCollideWorldBounds on Retina Displays

[luschn]

I just tried to set the world bounds for a player sprite in a responsive game with the following config:

const config = {
	width: window.innerWidth * window.devicePixelRatio,
	height: window.innerHeight * window.devicePixelRatio,
	parent: 'canvas',
	type: Phaser.AUTO,
	physics: {
		default: 'arcade',
		arcade: {
			gravity: {y: 2500},
			debug: false
		}
	},
	scene: [
		Preloader,
		Game
	]
};

In the game itself, i created a player sprite like this:

this.player = this.physics.add.sprite(this.screenWidth * 0.2, this.screenHeight * 0.5, 'coin');
this.player.setCollideWorldBounds(true);

It places the object correctly, and on desktop the player object hits the ground and stops there. On mobile, it does not stop at the bottom though, because of the pixel ratio. Is that a bug? Or is there just some settings to use setCollideWorldBounds correctly on mobile devices and responsive games?

[PixelPicoSean]

You said the game is responsive, which may change the game size, I guess you forgot to call setBounds of the physics world after resize. It can be the problem with device ratio since physics engine does not relay on that at all. Your code does not tell any useful informations btw.

[samme]

11 hours ago, luschn said:

On mobile, it does not stop at the bottom though, because of the pixel ratio.

I think it's possible the canvas is extending past the right and bottom edges of the viewport.

Phaser doesn't scale the game canvas (yet), so if you multiply by devicePixelRatio you'll probably get a large game canvas overflowing a small screen.

[luschn]

4 hours ago, PixelPicoSean said:

You said the game is responsive, which may change the game size, I guess you forgot to call setBounds of the physics world after resize. It can be the problem with device ratio since physics engine does not relay on that at all. Your code does not tell any useful informations btw.

it even happens before resizing (did not even implement resizing yet), and there is not really more code. i thought that i included all the relevant parts, to be honest.

[PixelPicoSean]

Well, then I guess your canvas is too large and overflow the screen just like samme said. You'd write some CSS code to make sure the canvas itself is fulfill the whole screen.

Before your resize system is ready to use, try set your canvas to keep the ratio and scale it properly (like the SHOW_ALL scale mode of Phaser 2), here's a tutorial with code inside.

[luschn]

2 hours ago, samme said:

I think it's possible the canvas is extending past the right and bottom edges of the viewport.

Phaser doesn't scale the game canvas (yet), so if you multiply by devicePixelRatio you'll probably get a large game canvas overflowing a small screen.

that actually led me to the solution, thank you! i thought that i would have to multiply the devicePixelRatio on mobile to make it repsonsive (read about it in some phaser tutorial), but it´s still just window.innerWidth in the config. after that, everything works perfectly fine! not sure why i did not just try it...