Issue with resize and gravity

[Rydez]

I would like my player position to be reset to the center of the browser when the game is resized. I have it working for gradual browser resizes, but then I found out that when the browser is resized from large to small, quickly, the player is not centered. I've attached a working sample and I've pasted the main JS code from the sample. To test: Make the browser small, then click the maximize button to make the browser fit to screen, then click the minimize button to make the browser become small quickly. The player will not have been centered.

var Game = new Phaser.Game('100%', '100%', Phaser.AUTO);

var player;
var gameState = {
	preload: function () {
		Game.load.spritesheet('dude', 'dude.png', 32, 48);
	},
    create: function() {
        Game.scale.scaleMode = Phaser.ScaleManager.RESIZE;  
        Game.physics.startSystem(Phaser.Physics.ARCADE);

	    player = Game.add.sprite(0.5*Game.width, 0.5*Game.height, 'dude');
	    player.anchor.setTo(0.5, 0.5);
	    player.frame = 4;

	    Game.physics.arcade.enable(player);

	    player.body.gravity.y = 800;
	    player.body.collideWorldBounds = true;

    },
    resize: function () {
    	player.x = Game.width/2;
    	player.y = Game.height/2;
    }
};

Game.state.add('gameState', gameState);
Game.state.start('gameState');

 

index.html

phaser.min.js

[samme]

Try

resize: function (width, height) {
    player.x = width  / 2;
    player.y = height / 2;
}

 

[samme]

3 hours ago, Rydez said:

To test: Make the browser small, then click the maximize button to make the browser fit to screen, then click the minimize button to make the browser become small quickly. The player will not have been centered.

The player is never centered, or it's not centered immediately after resizing?

[Rydez]

Thanks for the reply!

10 hours ago, samme said:

Try

resize: function (width, height) {
    player.x = width  / 2;
    player.y = height / 2;
}

This didn't fix the issue .

10 hours ago, samme said:

The player is never centered, or it's not centered immediately after resizing?

Hmm, it should be. When I run the code provided, the player is centered after slowly resizing the browser.

When the browser is resized the game canvas is also resized, and then the player's position is set to the center of the new canvas dimensions. If you run the sample and resize the browser slowly, then the player will be moved to the center of the browser. When you stop resizing the browser, then the player will fall to the ground. This is exactly what I want to happen. But, it only works when the browser is resized slowly. If instead, I resize the browser very quickly from large to small, then the player will be moved to the upper left corner (instead of the center) of the browser and then fall to the ground.

I hope I've been clear enough to reproduce the issue.

[samme]

I only see the problem when I make the window narrower than the player (very narrow), and that's because he's pinched between the World bounds on the left and right.

You can skip bounds checks on the left/right edges to avoid that.

 

[Rydez]

Hm, I see what you mean. That's not quite the problem that I'm referring to though. It seems that the problem doesn't occur when you run it in Codepen. Would you mind running the stuff that I originally attached alone in a browser? Then attempt the resizing?

I've uploaded a screen capture of the problem so that you can see what I mean.

screenCapture.mp4

[samme]

Can you try

var checkCollision = Game.physics.arcade.checkCollision;
checkCollision.left = false;
checkCollision.right = false;

in your example?

[Rydez]

Okay I put your code in the create function and it changed the behavior. It partially fixed the problem. After resizing, the player is now centered horizontally, but not vertically. It's centered horizontally and vertically if I extend your code to:

checkCollision.left = false;
checkCollision.right = false;
checkCollision.up = false;
checkCollision.down = false;

But, this won't work as a solution because now there's no collision handling. 

Would you mind explaining how you came about this? I'm pretty confused.  

[Rydez]

Hey samme, wanted to let you know that I've been able to resolve the problem by turning off collision checking at the beginning of the resize function, and turning it back on at the beginning of the update function. I still am not exactly sure why it's necessary to mess with the collision checking, so it feels pretty hackish to me.

But it works! 

Thank you 

[samme]

That's actually a pretty good solution. You might also try

resize: function() {
    player.reset(Game.width / 2, Game.height / 2);
}

The problem is that when the window/game is shrunk, the player is immediately put (far) out of bounds and the physics engine moves it inside the boundary, just as if it had collided on that edge.

[Rydez]

Oooooh, I see. Thanks so much for your help!