Bouncy / Jitter Physics on world shapes after following platformer tutorial

64 views
Skip to first unread message

Nick Newman

unread,
Nov 17, 2016, 12:19:47 PM11/17/16
to melonJS - A lightweight HTML5 game engine

So I just got done following the platformer tutorial. This is pretty weird, watch: 

Basically, whenever I apply movement towards the sides of the shape my character bounces from them. This doesn't happen for top or bottom velocities though.

Player Entity:

game.Player = me.Entity.extend({
  init : function (x, y, data) {
//var image = me.loader.getImage("player");
//console.log(data);
  this.data = data;
  this.onBodyEntered = false;
       this._super(me.Entity, "init", [x, y, {
            image: "player",
            width: 72,
            height: 144
        }]);
this.velx = 450;
this.vely = 450;
// ensure the player is updated even when outside of the viewport
//this.alwaysUpdate = true;
//this.maxX = me.game.viewport.width - this.width;
//this.maxY = me.game.viewport.height - this.height;
this.chooseShipImage();
//this.renderable.alpha = 0.5;
this.body.setVelocity(0, 0);
//Collision Shape
this.body.shapes[0] = new me.Ellipse(this.width/2, this.height/2, this.width/1.3, this.height/1.3);

console.log(this.body)
//this.body.collisionType = me.collision.types.ALL_OBJECT;
  },
  chooseShipImage: function () {
        var frame = ~~(Math.random() * 3);
        this.renderable.addAnimation("walk", [0, 1, 2], 200);
        this.renderable.setCurrentAnimation("walk");
  },
  update : function (dt) {
this.body.update(dt);
if(!me.collision.check(this)){ // They are not colliding
this.onBodyEntered = false
}

//console.log(this.pos.z);
 
 
    //this.pos.x = this.pos.x.clamp(0, this.maxX);
    //this.pos.y = this.pos.y.clamp(0, this.maxY);
//return true;
    //return this.renderable.update(dt);
//return (this._super(me.Entity, 'update', [dt]) || this.body.vel.x !== 0 || this.body.vel.y !== 0);
return this._super(me.Entity, 'update', [dt]);
 
 
},
onBodyEnter: function(response, other){
if(response.b.name == "WarpEntity"){ // -- warp_to
var warp_to = WARPS[response.b.warp_to];
this.pos.x = warp_to.pos.x;
this.pos.y = warp_to.pos.y;
play("teleport", false, false, this);
}
},
onCollision : function (response, other) {



//Handle Map Entity Collision
if(this.onBodyEntered == false){
this.onBodyEnter(response, other);
this.onBodyEntered = true;
}


//Handle Collision types (maps mostly)
//console.log(response.b.body.collisionType)
//console.log(other.type)
 switch (response.b.body.collisionType) {
case me.collision.types.WORLD_SHAPE:
 // Simulate a platform object
 if (other.type === "platform") {
if (this.body.falling && !me.input.isKeyPressed('down') &&

 // Shortest overlap would move the player upward
 (response.overlapV.y > 0) &&

 // The velocity is reasonably fast enough to have penetrated to the overlap depth
 (~~this.body.vel.y >= ~~response.overlapV.y)) {
 // Disable collision on the x axis
 response.overlapV.x = 0;

 // Repond to the platform (it is solid)
 return true;
}

// Do not respond to the platform (pass through)
return false;
 }
 return true;
 break;

case me.collision.types.ENEMY_OBJECT:
 if ((response.overlapV.y>0) && !this.body.jumping) {
// bounce (force jump)
this.body.falling = false;
this.body.vel.y = -this.body.maxVel.y * me.timer.tick;

// set the jumping flag
this.body.jumping = true;
 }
 else {
// let's flicker in case we touched an enemy
this.renderable.flicker(750);
console.log("Flickering:" +response);
 }

 // Fall through

default:
 // Do not respond to other objects (e.g. coins)
 return false;
 }



 // Make the object solid
 //return true;
}


});



Haven't changed really anything else from the tutorial.. Thanks in advance!

melonJS

unread,
Nov 17, 2016, 7:39:17 PM11/17/16
to melonJS - A lightweight HTML5 game engine
Huh? I cannot really see your code properly, but if you take the platformer example, it works properly when walking towards the crates.

Could this be a bug in the ellipse vs polygon collision handling/response ? i must admit i never use it, just using polygons all the time.

Message has been deleted

Jay Oster

unread,
Nov 17, 2016, 9:12:33 PM11/17/16
to mel...@googlegroups.com
Ellipse collision detection only works with perfect circles. The challenge with non-circular ellipses is that they can be rotated... So the current SAT shape tests just don't take multi-axis radii into account.

On Thu, Nov 17, 2016 at 5:36 PM, Nick Newman <dilly...@gmail.com> wrote:


On Thursday, November 17, 2016 at 4:39:17 PM UTC-8, melonJS wrote:
Huh? I cannot really see your code properly, but if you take the platformer example, it works properly when walking towards the crates.

Could this be a bug in the ellipse vs polygon collision handling/response ? i must admit i never use it, just using polygons all the time.


Wow, you're right!!

I removed 

this.body.shapes[0] = new me.Ellipse(this.width/2, this.height/2, this.width/1.3, this.height/1.3);


Which was overriding my default created shape. I think there is a bug with the Ellipse collision shape? Now it works fine!! Thank you!!
 

--
You received this message because you are subscribed to the Google Groups "melonJS - A lightweight HTML5 game engine" group.
To unsubscribe from this group and stop receiving emails from it, send an email to melonjs+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Nick Newman

unread,
Nov 17, 2016, 9:30:21 PM11/17/16
to melonJS - A lightweight HTML5 game engine
And.. it's my fault again and I keep blaming the engine. Sorry folks! Thanks for putting up with me =]  

Jay Oster

unread,
Nov 17, 2016, 10:21:30 PM11/17/16
to mel...@googlegroups.com
No worries, it is the engine's fault, actually! Known bug: https://github.com/melonjs/melonJS/issues/809

On Thu, Nov 17, 2016 at 6:30 PM, Nick Newman <dilly...@gmail.com> wrote:
And.. it's my fault again and I keep blaming the engine. Sorry folks! Thanks for putting up with me =]  

--
Reply all
Reply to author
Forward
0 new messages