MelonJS collision with entities not working

I recently started playing around with MelonJS to create a simple platformer game. Quickly I ran into an issue where my character was not colliding with other entities. The strange this is that the character was respecting the solid objects specified in the collision layer of the TMX map. This lead to several problems like not being able to pick up coins and being unable to change to the next level. The problem turned out to be that in the player's update method, I was not telling the game engine to process these types of collisions.

    update: function(dt) {

        // check entity collision
        var res = me.game.world.collide(this);
 
        // check & update player movement
        this.updateMovement();

        ...
    },

The key is to make sure you have the me.game.world.collide(this) call.

Box2dWeb: b2World is not defined

As I was playing around with a javascript physics engine called Box2dWeb. Almost immediately I ran into an issue. I was receiving the error in Chrome console:

Uncaught ReferenceError: b2World is not defined

This occurs because the objects from this library have a "namespace". Well, actually, there are no namespaces in javascript, but the methods are stored in different objects. To resolve this issue, all you have to do is make aliases for these methods, or in other words, make short local variables for the full methods.

var b2Vec2 = Box2D.Common.Math.b2Vec2,
    b2BodyDef = Box2D.Dynamics.b2BodyDef,
    b2Body = Box2D.Dynamics.b2Body,
    b2FixtureDef = Box2D.Dynamics.b2FixtureDef,
    b2Fixture = Box2D.Dynamics.b2Fixture,
    b2World = Box2D.Dynamics.b2World,
    b2MassData = Box2D.Collision.Shapes.b2MassData,
    b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape,
    b2CircleShape = Box2D.Collision.Shapes.b2CircleShape,
    b2DebugDraw = Box2D.Dynamics.b2DebugDraw;

The author actually recommends this in the documentation. The idea behind the author's suggestion is putting the variables into the scope of the function to improve speed so that the browser doesn't have to search all the scopes.

ExtJS overwrite listener

Sometimes you need to overwrite an event listener in ExtJS. Usually listeners are registered like this:

    var myStore = Ext.create("Ext.store.SimpleStore", {
        // ...
    });

    myStore.on('load', this.myFunction, this);

If this is the case, then to remove our previously registered listener, all we have to do is call un (which is an alias for removeListener):

    myStore.un('load', this.myFunction, this);

But, what happens when you don't know what function is registered? Sometimes you will not have a reference to the original function that was registered. This situation may arise if there is code that exists in a different flow or may even come as a package! If that is true, the you may not be able to get a reference to the javascript function or edit the existing code. In this case, we will have to look at all of the functions that are registered for this event. We can then remove the listeners just for a certain event by calling clearListeners.

    // code that you can't delete or change
    Ext.Ajax.on('requestexception', function(cnn, response, options) {
        // the current handler code
    });

    // we can patch it by removing the listener and then adding our own
    if (Ext.Ajax.events.requestexception) {
        Ext.Ajax.events.requestexception.clearListeners();
    }

    Ext.Ajax.on('requestexception', function(con, response, options) {
        // our own very important listener
    });

And that's it! The only thing to remember here is that we may not want to remove all the listeners as we did here, because there could be more than one registered. The ideal solution would be to have the handler method be part of some singleton object, that way we can unregister just that function.