Forums » Help » Bouncing back player after colliding with specific enemy?

Hi,

I've made quite a bit of progress (for me as a total beginner, anyway :D) since my last post here. I am now working on collisions with enemy entities and have some trouble getting the player entity to bounce back from the enemy entity upon collision. Here are the basics:

Right now: If the player entity collides with the enemy entity from the side, the player entity loses 1 life. If the player entity collides with the enemy entity while they're falling (as in after a jump, for example), the enemy entity dies and the player gains 1 point to the total score.

Both the player and enemy entities are set to PASSIVE.

Right now if the player collides with the enemy from the side their life drains so quickly that they are killed seemingly instantly as the two continue to collide. What I want to do is make the player be forced back about 30px when they first collide with the enemy. I tried playing around with bounce and setting the enemy collision to ACTIVE, and 'collideWith', but can't seem to get this working.

In addition, the player also needs to collide with other entities in the game (right now it can 'eat' another entity to gain points, which works) so I don't need all entities to push the player back like this, just this enemy entity (and in the future another enemy entity, but that isn't built in yet).

Here is my enemy entity file:

ig.module( 
	'game.entities.bug'
)
.requires(
	'impact.entity'
)
.defines(function(){
EntityBug = ig.Entity.extend({
	size: {x: 39, y:24},
	health:5,
	friction: {x: 150, y: 0},
	speed: 100,
	flip: false,

    
	type: ig.Entity.TYPE.B, // Player enemy group
	checkAgainst: ig.Entity.TYPE.A,
	collides: ig.Entity.COLLIDES.PASSIVE,
	
	animSheet: new ig.AnimationSheet( 'media/bug.png', 39, 24 ),
	
	init: function( x, y, settings ) {
		this.parent( x, y, settings );

		// Add the animations
		this.addAnim( 'idle', 1, [0,1] );
	},
	

	check: function( other ) {
		if( other.vel.y > 0 ) {
			this.kill();
			ig.game.score += 1;
			console.log ( ig.game.playerhealth );
		}
		
		else {	
			other.receiveDamage( 1, this );
			ig.game.playerhealth -= 1;
			console.log( ig.game.playerhealth );
		}
	},	
		
update: function() {
   
	// near an edge? return!
	if( !ig.game.collisionMap.getTile(
		this.pos.x + (this.flip ? +4 : this.size.x -4),
			this.pos.y + this.size.y+1
		)
	) {
		this.flip = !this.flip;
	}
	var xdir = this.flip ? -1 : 1;
	this.vel.x = this.speed * xdir;	
	this.parent();
},


});
});

And here is my player entity file:

ig.module( 
	'game.entities.red-player'
)
.requires(
	'impact.entity'
)
.defines(function(){
EntityRedPlayer = ig.Entity.extend({
	size: {x: 88, y:48},
	offset: {x: 0, y: 0},
	flip: false,
	maxVel: {x: 300, y: 280},
	friction: {x: 300, y: 0},
	accelGround: 700,
	accelAir: 400,
	jump: 900,
	crouch: 20*0.7,
    stand:48,
    crouched:false,
    health: 3,
    
	type: ig.Entity.TYPE.A, // Player friendly group
	checkAgainst: ig.Entity.TYPE.NONE,
	collides: ig.Entity.COLLIDES.PASSIVE,
	
	animSheet: new ig.AnimationSheet( 'media/redanim.png', 88, 48 ),
	
	init: function( x, y, settings ) {
		this.parent( x, y, settings );

		// Add the animations
		this.addAnim( 'idle', 1, [0] );
		this.addAnim( 'run', 0.07, [0,1,2,3,4] );
		this.addAnim( 'jump', 1, [5] );
		this.addAnim( 'fall', 0.4, [6] );
	},
	

	
update: function() {
      // move left or right
	var accel = this.standing ? this.accelGround : this.accelAir;
	if( ig.input.state('left') ) {
		this.accel.x = -accel;
		this.flip = true;
	}
	else if( ig.input.state('right') ) {
		this.accel.x = accel;
		this.flip = false;
	}
	else {
		this.accel.x = 0;
	}
       // jump
       
    if( this.standing && ig.input.pressed('jump') ) {
		this.vel.y = -this.jump;
		this.currentAnim = this.anims.jump;
	}
    
    // set the current animation, based on the player's speed
		if( this.vel.y < 0 ) {
			this.currentAnim = this.anims.jump;
		}
		else if( this.vel.y > 0 ) {
			this.currentAnim = this.anims.fall;
		}
		else if( this.vel.x != 0 ) {
			this.currentAnim = this.anims.run;
		}
		else {
			this.currentAnim = this.anims.idle;
		}
		
		this.currentAnim.flip.x = this.flip;
	
	// move!
	this.parent();
}

});
});

Can anyone point me in the right direction here? I've been trying to figure this out for two days so far. Thanks in advance for any help/advice!

(The other thing I just noticed is that my way of detecting if the player is jumping onto the enemy is not very good. As it is now the player can be falling right next to an enemy but not directly on top of it and still kill it - is there a way to detect this more accurately, such as detect which axis the player is colliding with the enemy entity from?)

Check into the collideWith
You will find it in the entity.js
You can override this in your class and see if that helps

collideWith: function( other, axis ) {},

Thanks, gxxaxx, I've tried collideWith before but I'm obviously doing something wrong. I would attempt to use this instead of the check, right?

I've tried just getting the player entity to take damage (without any of the bouncing back or jump attack stuff) just to get something working, but when I implement the following instead of the check the enemy entities just pass through the player entity without doing anything and continue on their way:

This was added to my enemy entity:

collideWith: function ( other, axis ) {
			other.receiveDamage( 1, this );
			ig.game.playerhealth -= 1;
			console.log( ig.game.playerhealth );
	},

(I have a feeling I'm missing something very obvious here, sorry if that's the case >.<)

Both of your entities have the PASSIVE collision type - they will never collide with each other. Make one of them ACTIVE. More in the Collisions article.

Something like this should work then (Edit: fixed after littlefoot's following post):

collideWith: function ( other, axis ) {
	
	// Only do something if colliding with the Player
	if( other instanceof EntityRedPlayer ) {
		if( axis == 'y' ) {
			this.kill();
            ig.game.score += 1;
		}
		else {
			other.receiveDamage( 1, this );
			
			if( other.pos.x > this.pos.x ) {
				// Player on the right -> move back right
				other.vel.x = 50; 
			}
			else {
				// Player on the left -> move back left
				other.vel.x = -50; 
			}
		}
	}
},

Thanks so much again, Dominic (lol. Typed Damien at first. That's what I get for talking to a Damien while typing to a Dominic). I was suspecting that it was something to do with that but for some reason thought that passive entities still registered as a collision despite going through each other (silly, I know. Not sure where I got that idea).

I used your code above with some slight modifications and it now works perfectly, thank you. I changed 'other.x' to 'other.pos.x' and 'this.x' to 'this.pos.x' and changed the velocity on push-back to a higher number (as the enemy's velocity is already 100, 50 just wasn't high enough and the player entity was just being pushed to the side until its health was fully drained).

Here's the final working code I'm using:

collideWith: function ( other, axis ) {
    
    // Only do something if colliding with the Player
    if( other instanceof EntityRedPlayer ) {
        if( axis == 'y' ) {
            this.kill();
            ig.game.score += 1;
        }

        else {
            other.receiveDamage( 1, this );
            ig.game.playerhealth -= 1;
            
            if( other.pos.x > this.pos.x ) {
                // Player on the right -> move back right
                other.vel.x = 350; 
            }
            else {
                // Player on the left -> move back left
                other.vel.x = -350; 
            }
        }
    }
},

Thanks again!