Triggering me.LevelEntity transitions when contained instead of on collide

[alcor]

Greetings! I've very much enjoyed getting to know MelonJS, and had an initial question:

for LevelEntity objects in TMX maps, I wanted to adjust the behavior — 

• The default is to trigger the level transition as soon as the play object even touches the Level object.
• I'd like (and might even suggest as default behavior) to have the level transition as soon as the Player object is mostly CONTAINED by the level object. This would make many of the transitions more natural. You'd be able to walk on to stairwells, doorways, or into other level switch regions.

What is the best way to override the default? I tried a few things, including setting a custom LevelEntity to "me.collision.types.NO_OBJECT", but that disables the triggering. 

Thanks in advance for any help!

[obiot]

Hi, the first that comes to my mind would be to create your own me.LevelEntity object, either by extending the default one or even just create your own, after all the default one is just quite basic and just switch to the level specified : https://github.com/melonjs/melonJS/blob/master/src/entity/level_entity.js

 

[alcor]

I've created a subclass of me.LevelEntity, but it doesn't seem possible to set the collision system to allow objects fully overlap (it always pushes the colliding items out).

Is the correct path to do something like this in the level entity? Or will this be highly inefficient? It seems a similar check is done every frame anyway.

 

 update : function (dt) {
        this._super(me.LevelEntity, 'update', [dt]);
        var player = me.game.world.getChildByType(game.PlayerEntity)[0];
        var collide = player.getBounds().overlaps(this.getBounds());
        if (collide) {
            // check percentage overlap, and trigger level transition
        }
    },

Thanks for the advice!

[obiot]

what I would do personally is to actually use the response object you get through the collision handle, it prevent checking for overlap every single frame in your code and since you get directly access to both colliding object you can also filter and only check if/when response.b is the player. Then finally I would actually just calculate the distance between both position to see how close they are which should give the level of overlap somehow.

so something like that :

onCollision : function (response) {
   if (response.b instanceof MyPlayerClass) {
       //probably better to use both bounding boxes, just simplifying here
       distance = response.b.pos.distance(response.a.pos);
       if (distance < response.b.width / 4) {
          // if the distance between b and a is smaller than a quarter 
          // of the b box size, we can assume that 3/4 of b is overalping with a
          doSomething();
       }
   }
}

I haven't tried this code, so maybe I'm missing something, but definitely how I would start.

let me know if it helped !

Edited July 17, 2020 by obiot

[obiot]

just google it quickly and found this as well, probably more precise

https://stackoverflow.com/questions/9324339/how-much-do-two-rectangles-overlap

[obiot]

wait I'm being stupid, in the response object you already have all you need, including the overlap magnitude :

http://melonjs.github.io/melonJS/docs/me.collision.html#.ResponseObject

plenty of things to play with anyway, let me know which one worked the best for your use

 

[alcor]

Thank you for the help! I was able to get it working by having the player ignore the level entity:

game.playerEntity:

    onCollision : function (response, other) {
        if (other instanceof game.PortalEntity) { return false;}
        return true;
    }

game.portalEntity: (My level entity subclass)

    onCollision: function onCollision(response, other) {
        if (!this.supressed) {
            if (response.overlap >= other.body.width / 4) {
                this.goTo.apply(this);
            }          
        }
        return false;
    },

This prevents the goTo from applying when you just lightly brush the levelEntity (which would sometimes happen as you walked by one, but didn't actually intend to go through)

If you want to give it a try,
I put a quick test up at https://itty.bitty.land (note it is just basic map navigation. you can't do anything yet
Now I'll work at carrying velocity through as you exit. Thanks again!

[obiot]

awesome, and indeed i's a way better "experience".

else, since I noticed you are using the master branch, would you mind testing the WebGL2 renderer ? it has been added in the last 8.0 (be sure you also have the latest 8.0), it seems to be working for most things (the platformer example uses it as well now), but it's still disabled by default, you can just add "preferWebGL1 : false" to the video init parameters (don't worry it will fallback to WebGL1 if the device does not support WebGL2).

Edited July 18, 2020 by obiot

[alcor]

Will do! Pushed it. Looks good so far, but I'll keep an eye out

Edited July 18, 2020 by alcor