Collision isnt working

[Faizy]

EDIT: THIS PROBLEM WAS SOLVED BY CUDABEAR ALREADY!. The fifth post includes a new problem in the same context though!

 

Could someone explain me why the collision isnt working? I expect(want) the "player.image" and "enemy.image" to not go "through" each other. What am I missing? Both(player.image and enemy.image) have the Aracde engine enabled.

//window.location.reload(true) //Clear Cache
var player;
var enemy;

var game = new Phaser.Game(800, 600, Phaser.Auto, '', 
	{
		preload: preload,
		create: create,
		update: update
	}
);

function preload() {
	game.load.image('player', 'assets/playerDefault.png')
	game.load.image('enemy', 'assets/enemyDefault.png')
}

function create() {
	game.stage.backgroundColor = '#3598db'
	game.physics.startSystem(Phaser.Physics.ARCADE);

	player = new Player();
	enemy = new Enemy();
}

function update() {
	game.physics.arcade.collide(player.image, enemy.image);

	if (player.cursor.left.isDown) {
		player.image.position.x -= 10;
	}
	else if (player.cursor.right.isDown) {
		player.image.position.x += 10;
	}
	else if (player.cursor.up.isDown) {
		player.image.position.y -= 10;
	}
	else if (player.cursor.down.isDown) {
		player.image.position.y += 10;
	}
}

Enemy = function () {
    var x = game.world.randomX;
    var y = game.world.randomY;

    this.health = 3;
    this.image = game.add.sprite(x, y, 'enemy');

    game.physics.arcade.enable(this.image);
}

Player = function() {
	var x = 200;
	var y = 75;

	this.health = 10;
	this.image = game.add.sprite(x, y, 'player');
	
	game.physics.arcade.enable(this.image);
	this.image.body.collideWorldBounds = true;
	this.cursor = game.input.keyboard.createCursorKeys();
};

 

Thank you

[Cudabear]

A common mistake!

Your problem is here:

if (player.cursor.left.isDown) {
		player.image.position.x -= 10;
	}
	else if (player.cursor.right.isDown) {
		player.image.position.x += 10;
	}
	else if (player.cursor.up.isDown) {
		player.image.position.y -= 10;
	}
	else if (player.cursor.down.isDown) {
		player.image.position.y += 10;
	}
}

 

When working with physics, you can't directly move sprites around with their positional values and expect them to collide with other sprites.  The reason for this is physics calculations require velocity, and if you directly move things around the velocity of these objects is 0, so no calculation can be done.

Change your code to something like this

if (player.cursor.left.isDown) {
	player.image.body.velocity.x = 10;
}
else if (player.cursor.right.isDown) {
	player.image.body.velocity.x = 10;
} 
else {
    player.image.body.velocity.x = 0;
}

if (player.cursor.up.isDown) {
	player.image.body.velocity.y = 10;
}
else if (player.cursor.down.isDown) {
	player.image.body.velocity.y = 10;
} 
else {
    player.image.body.velocity.y = 0;
}

And the collisions should work.  Also, position calculated via velocity is weird and might not be the same as moving sprites directly, so you might need to fidgit with the number 10 to something that feels better for your game.

Good luck!

[Faizy]

Hi Cudabear,

I changed my code like you suggested and it works perfectly fine now - thanks

 

Is it actually somewhere descibed, or at least some information about the fact, that ARACDE PHYSICS need velocity to work? I couldn´t find anything about this in the API Documentation.

 

[Cudabear]

I personally ran into this problem when I first started learning Phaser and I've helped dozens of people through it as well over the years, so it leads me to think there's a gap in the documentation there.  However, the examples do clearly show you need to use velocity, so who knows.  I think it's just an easy hole to fall in when first using Phaser, when you start with moving positionally and then try to throw in collision you naturally think your positional moving logic will just work.  If more tutorials skipped positional moving and just did stuff with velocity/tweens it would probably be less of an issue, but you never know.

[Faizy]

Thanks.

I got a new problem now though. Code:

//window.location.reload(true) //Clear Cache
var player, enemy;
var playerMovementX = 10;
var playerMovementY = 10;
var playerMovementStandbyX = 3;
var playerMovementStandbyY = 3;

var game = new Phaser.Game(800, 600, Phaser.Auto, '', 
	{
		preload: preload,
		create: create,
		update: update
	}
);

function preload() {
	game.load.image('player', 'assets/playerDefault.png')
	game.load.image('enemy', 'assets/enemyDefault.png')
	game.load.image('playerBullet', 'assets/playerBullet.png')
}

function create() {
	game.stage.backgroundColor = '#3598db'
	game.physics.startSystem(Phaser.Physics.ARCADE);
	
	player = new Player();
	enemy = new Enemy();
}

function update() {
	//Collision
	game.physics.arcade.collide(player.image, enemy.image, null, null, null);
	game.physics.arcade.collide(player.weapon.bullets, enemy.image, enemyKill, null, null);

	//Player: movement
	player.image.rotation = game.physics.arcade.angleToPointer(player.image)

	if (player.left.isDown) {
		player.image.body.velocity.x -= playerMovementX;
	}
	else if (player.right.isDown) {
		player.image.body.velocity.x += playerMovementX;
	} 
	/*else {
		player.image.body.velocity.x = playerMovementStandbyX;
	}*/
	
	if (player.up.isDown) {
		player.image.body.velocity.y -= playerMovementY;
	}
	else if (player.down.isDown) {
		player.image.body.velocity.y += playerMovementY;
	} 

	//Player: fire
	if (game.input.activePointer.leftButton.isDown) {
		console.log("Fire")
		player.weapon.fire();
	}
}

Enemy = function () {
    var x = game.world.randomX;
    var y = game.world.randomY;

    this.health = 3;
    this.image = game.add.sprite(x, y, 'enemy');
    game.physics.arcade.enable(this.image);
    this.image.body.collideWorldBounds = true;
}

Player = function() {
	var x = game.world.centerX -25;
	var y = game.world.centerY -25;
	
	this.left = game.input.keyboard.addKey(Phaser.KeyCode.A)
	this.right = game.input.keyboard.addKey(Phaser.KeyCode.D)
	this.up = game.input.keyboard.addKey(Phaser.KeyCode.W)
	this.down = game.input.keyboard.addKey(Phaser.KeyCode.S)
	this.fireButton = game.input.keyboard.addKey(Phaser.KeyCode.SPACEBAR);

	this.health = 10;
	this.image = game.add.sprite(x, y, 'player');
	this.image.anchor.setTo(0.5, 0.5)
	game.physics.arcade.enable(this.image);
	this.image.body.collideWorldBounds = true;
	
	this.weapon = game.add.weapon(30, 'playerBullet');
	this.weapon.bulletKillType = Phaser.Weapon.KILL_WORLD_BOUNDS;
	this.weapon.bulletSpeed = 600;
    this.weapon.fireRate = 100;
    this.weapon.trackSprite(this.image, 0, 0, true);
};

function enemyKill(bullet, enemy) { 
	enemy.kill();
}

 

 

 

If the players bullets(player.weapon.bullets) collide with the enemy(enemy.image) the function enemyKill should be executed as a callback:

function update() {
	//Collision
	game.physics.arcade.collide(player.image, enemy.image, null, null, null);
	game.physics.arcade.collide(player.weapon.bullets, enemy.image, enemyKill, null, null);

The collision signal works fine. However, the function will kill the bullet when it has enemy.kill() in it and will kill the enemy when it has bullet.kill().

function enemyKill(bullet, enemy) { 
	enemy.kill();
}

This doesnt makes sense to me, since the API Documentation says on the callback:

"An optional callback function that is called if the objects collide. The two objects will be passed to this function in the same order in which you specified them, unless you are colliding Group vs. Sprite, in which case Sprite will always be the first parameter."

 

Could someone help me out?

[samme]

http://phaser.io/tutorials/making-your-first-phaser-game/part5

[Faizy]

Hm, it says exactly what I have (said) above. Or am I missing something?