Forums » Help » Collision detection in slope

Hello!

I've started working on a game and the only problem so far is that the entity is "jumping" through the ceiling when coming to the end of a sloping tunnel. Also if letting go of the keys it will slide into the wall. You can test it out here:

http://diggers2.cloudcontrolapp.com/

Use keys 'a', 'w', and 'd' for moving.



Here is the code for the entity. I've not done anything particular to cause this as far as I can tell...

EntityPlayer = ig.Entity.extend({
    size: {x: 8, y: 10},
    offset: {x: 2, y: 6},
    direction: 1,
    messagebox: "",
    type: ig.Entity.TYPE.A,
    nettimer: 10,
    name: "player",
    gamename: 'player' + Math.floor(Math.random()*999),
    messageboxtimer: 200,
    speed:100,
    jump: 500,
    soundJump: new Audio("media/jump.ogg"),

    ismove: 0,

    checkAgainst: ig.Entity.TYPE.NONE,
    collides: ig.Entity.COLLIDES.PASSIVE,

    animSheet: new ig.AnimationSheet( 'media/player.png', 12, 16 ),

    init: function( x, y, settings ) {
      this.parent( x, y, settings );

    // Add the animations
    this.addAnim( 'idleup', 0.1, [10] );
    this.addAnim( 'idledown', 0.1, [1] );
    this.addAnim( 'idleleft', 0.27, [0,1,2] );
    this.addAnim( 'idleright', 0.27, [3,4,5] );
    this.addAnim( 'up', .21, [9,10,11] );
    this.addAnim( 'down', .21, [0,1,2] );
    this.addAnim( 'left', .21, [6,7,8] );
    this.addAnim( 'right', .21, [9,10,11] );
    this.addAnim( 'jump', .21, [9,10,11] );
    
     //socket.emit('initializeplayer', this.gamename);
     
   },


   update: function() {


    socket.emit('initializeplayer', this.gamename);


    // Dig
    if( ig.input.state('space'))
    {
      if( ig.input.state('right') && (ig.game.backgroundMaps[0].getTile( this.pos.x+14, this.pos.y+8 ) == 2))
      {
        ig.game.backgroundMaps[0].setTile( this.pos.x+14, this.pos.y+8, 3);
        ig.game.collisionMap.setTile( this.pos.x+14, this.pos.y+8, 0 );
      }
      else if( ig.input.state('left') && (ig.game.backgroundMaps[0].getTile( this.pos.x-8, this.pos.y+8 ) == 2))
      {
        ig.game.backgroundMaps[0].setTile( this.pos.x-2, this.pos.y+8, 3);
        ig.game.collisionMap.setTile( this.pos.x-2, this.pos.y+8, 0 );
      }
      else if( ig.input.state('down') && (ig.game.backgroundMaps[0].getTile( this.pos.x+8, this.pos.y+24 ) == 2))
      {
        ig.game.backgroundMaps[0].setTile( this.pos.x+8, this.pos.y+24, 3);
        ig.game.collisionMap.setTile( this.pos.x+8, this.pos.y+24, 0 );
      }
      
    }


    
    // move left or right
    //
    if( ig.input.state('left') && ismove != 1 && ismove != 2 && ismove != 4) {
      this.vel.x = -this.speed;
      if(ismove == 0)
      {
        socket.emit('recievedata', 'a' ,this.gamename);

      }
      ismove = 3;
      this.direction = 3;
      this.currentAnim = this.anims.left;
    }
    else if( ig.input.state('right')  && ismove != 1 && ismove != 3 && ismove != 4) {
      this.vel.x = +this.speed;
      if(ismove == 0)
      {
        socket.emit('recievedata', 'd' ,this.gamename);

        var t = ig.game.collisionMap.getTile( this.pos.x, this.pos.y+20 );
        if( t != 0 ) {


        }


      }
      ismove = 2;
      this.direction = 2;
      this.currentAnim = this.anims.right;

    }

    else {

      if(ismove != 0)
      {
        socket.emit('recievedata', 'releaseKey' ,this.gamename);
      }

      this.vel.x = 0;

      ismove = 0;
    }
    
             ///////////////////////animate/////////////
             if( this.vel.y < 0 ) {
              this.currentAnim = this.anims.up;
              currentanimation = 1;
            }
            else if( this.vel.y > 0 ) {
             this.currentAnim = this.anims.down;
             currentanimation = 2;
           }
           else if( this.vel.x > 0 ) {
            this.currentAnim = this.anims.right;
            currentanimation = 4;
          }
          else if( this.vel.x < 0 ) {
           this.currentAnim = this.anims.left;
           currentanimation = 3;
         }
         else {

           if( this.direction == 4 )
           {
            this.currentAnim = this.anims.idledown;
            currentanimation = 6;
          }
          if( this.direction == 3 )
          {
            this.currentAnim = this.anims.idleleft;
            currentanimation = 7;
          }
          if( this.direction == 2 )
          {
            this.currentAnim = this.anims.idleright;
            currentanimation = 8;
          }
          if( this.direction == 1 )
          {
            this.currentAnim = this.anims.idleup;
            currentanimation = 5;
          }
        }

     // jump
     if( this.standing && ig.input.pressed('up')) {
      this.vel.y = -this.jump;
      socket.emit('recievedata', 'w' ,this.gamename);
      if (window.chrome) this.soundJump.load();
      this.soundJump.play();

    }


    this.parent();
  }
});

Hello! And welcome to the forums.

In the future, can you wrap your source code in number signs so it gets some nice formatting? Check out the "Show Formatting Help" link above the input box to see what I mean. It turns this:

function() {
// do something
}

...into this:

function() {
   // do something
}

On to your problem.

I don't know what's going on. But I bet what's happening is that the tunnel is too low for your character's bounding box. When the entity zooms to the right at the bottom of the slope it collides with the tile above "floor level" and gets pushed upwards.

Let's say the tile has position (32, 32) and is 16 pixels high, just like your entity. My guess is that the entity is colliding with the tile at (32, 30) or (32, 28). The collision routines then calculate the projection out of the colliding tile by pushing up. And up and up and up.

Try raising the ceiling at the bottom the ramp or, better yet, raise the whole ceiling and see if it keeps happening.

Sorry for the messy formatting.. I'll do it the right way next time! =)

I tried modifiying the map, but it seems to be unrelated of the ceiling. It happens only when walking on a slope and hitting a wall. I also tried changing the size of the entity but that didn't help.

I deployed a new version without ceiling!

Quote from spacelime
I'll do it the right way next time!

Cool tip: there's an edit button too ;)

Aha! I was looking for that =)

I find that the reason for this behavior is that when standing on a slope the collision detection isn't working properly sideways. The entity moves to far into the wall and then the downward collision detections pushes it upwards. Is this a 'bug' in impact or am I missing something?

I solved the problem by manually adding collision detection like this, but it's not really a clean solution:

 // if standing on slope, don't slide down
    if( this.standing && !ig.input.state('right') && !ig.input.state('left')){
      this.pos.x = this.last.x;
      this.pos.y = this.last.y;
      this.vel.x = 0;
      this.vel.y = 0;

    }

    // if standing on a slope next to a wall, stop all movement
    if( this.standing 
      && (((ig.game.backgroundMaps[0].getTile( this.pos.x+8, this.pos.y+5 ) == 2) && ig.input.state('right'))
      || ((ig.game.backgroundMaps[0].getTile( this.pos.x, this.pos.y+5 ) == 2) && ig.input.state('left'))))
    {
      
      this.pos.x = this.last.x;
      this.pos.y = this.last.y;
      this.vel.x = 0;
      this.vel.y = 0;
    }

The entity moves to far into the wall and then the downward collision detections pushes it upwards.

How is it that your entity moves "into the wall"? I think Impact is supposed to resolve such collisions by pushing the entity back out. This is how it prevents entities from passing through walls.

Yes it's really strange... if you let go of the keys you will see that the entity slides all the way down into the wall as if it didn't exist. Then as you press a key it detects the wall and pushes the entity out again. I would guess this is some kind of bug in impact. I know slopes are pretty recently added.