Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Issue with resize and gravity


Rydez
 Share

Recommended Posts

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');

 

dude.png

index.html

phaser.min.js

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. :huh: 

Link to comment
Share on other sites

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 :D

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...