Matter-js: Event System

Created on 7 Mar 2014  Â·  6Comments  Â·  Source: liabru/matter-js

An event system is required for external input into the physics engine.

It should at least include events for

  • before and after engine tick
  • before and after render
feature-request

Most helpful comment

The event system is now included in the latest release:
https://github.com/liabru/matter-js/releases/tag/0.7.0-alpha

If you still need to detect if the mouse has clicked on a body, see here for reference:
https://github.com/liabru/matter-js/blob/master/demo/js/Demo.js#L837

This is the demo code that allows body removal by right clicking in the demo.

Since the event system is now in place, I will close this thread.
Any new issues should be opened in a new thread, cheers.

All 6 comments

An event system is now available in the Matter.js edge build, under the namespace Matter.Events.

See the events demo of the event system in use.

Usage is generally:

Matter.Events.on(object, eventNames, callback)

E.g.

Matter.Events.on(myEngine, 'collisionStart', function(event) {
     var pairs = event.pairs;
     // do something with the pairs that have started collision
});

A full example of usage is shown in the latest demo code.

Currently only the Engine has defined events, which include tick and collisionStart, collisionActive, collisionEnd among others.

See the API Docs (edge) for more info, specifically Events and Engine Events.

This system is very new, so please log any issues you find, cheers.

Great.

I suggest another event, when the mouse touched a body.
Here is what I added to:
MouseConstraint.update = function(mouseConstraint, bodies) {
var mouse = mouseConstraint.mouse,
constraint = mouseConstraint.constraints[0];

    if (mouse.button === 0 || mouse.button === 2) {
        if (!constraint.bodyB) {
            for (var i = 0; i < bodies.length; i++) {
                var body = bodies[i];
                if (Bounds.contains(body.bounds, mouse.position)  && Vertices.contains(body.vertices, mouse.position)) {
                    constraint.pointA = mouse.position;
                    constraint.bodyB = body;
                    constraint.pointB = { x: mouse.position.x - body.position.x, y: mouse.position.y - body.position.y };
                    constraint.angleB = body.angle;
                    Sleeping.set(body, false);

----> Events.trigger(_engine, 'bodytouched', body);
}
}
}
} else {
constraint.bodyB = null;
constraint.pointB = null;
}

    if (constraint.bodyB) {
        Sleeping.set(constraint.bodyB, false);
        constraint.pointA = mouse.position;
    }
};

The event system is now included in the latest release:
https://github.com/liabru/matter-js/releases/tag/0.7.0-alpha

If you still need to detect if the mouse has clicked on a body, see here for reference:
https://github.com/liabru/matter-js/blob/master/demo/js/Demo.js#L837

This is the demo code that allows body removal by right clicking in the demo.

Since the event system is now in place, I will close this thread.
Any new issues should be opened in a new thread, cheers.

I want use event like this:
var circleA = Bodies.circle(100, 80, 50, null, 20)
Matter.Events.on(circleA , 'mousedown', function(e) {
console.log(111);
});

Can it be achieved?

That won't work, probably the easiest way would be the startdrag event on a MouseConstraint though I'd suggest looking at the source to see how it works.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

kunchenguid picture kunchenguid  Â·  3Comments

ShadewEnder picture ShadewEnder  Â·  3Comments

drachehavoc picture drachehavoc  Â·  4Comments

maximilianberndt picture maximilianberndt  Â·  4Comments

djipco picture djipco  Â·  4Comments