Enhancements

[abataille]

1. It is possible to add images to a body ? Possibly it is just another option and a drawImage to the canvas.
2. Can an event send, when a collision is detected, so that an application can react on collisions with sound or so?

[liabru]

Sprites are not currently supported with the built in renderer, but it's on my todo list.

But if you wanted to try it yourself with a custom renderer its possible to copy Render.js, customise it and pass it into the engine through the options.

Event callbacks are not yet supported either, again they're on my todo list!

For now though, a custom renderer also has access to the entire world state including collisions, so you could try that until I sort it out.

[abataille]

Thank you. We changed the renderer to draw images. After test, we send the change to you.
Do you have any idea how we can apply programmatically a force to a single body? We found in body applyForce, but that one doesn't seem to work.

[liabru]

applyForce needs to applied directly after Engine.update is called by the system.

Until I implement a real event system, you should able to do this currently by swapping out engine.events.tick as seen here in Engine.js

e.g. say your new engine is in the variable myEngine

myEngine.events.tick = function(engine) {
    // update the engine, leave this as is
    Engine.update(engine, engine.timing.delta, engine.timing.correction);

   /* custom update code goes here, forces will apply on the next update */
}

Also note that you may need to apply a large force vector to see any result, and it may need to be over a few frames (for the object to pick up speed).

Hopefully that will work! When I get around to sorting out events, I'll do an example of this type of thing.

[abataille]

Thank you. That does the trick only partly.
Practically you have to do the following:
Swap out
_engine.events.tick = function(_engine) {
Engine.update(_engine, _engine.timing.delta, _engine.timing.correction);
// the additional code, assuming that 'player' is a body and the force is applied to a sleeping body
if (player) {
if (player.isSleeping){
player.addForce= {x:-0.025,y:-0.005}; player.isSleeping = false;
} } };

In addition you must subclass Body.js. When the engine runs an update it invokes Body.resetForcesAll. This removes all forces, even the previously applied one. Bofroe you apply the gravity I added:
if (body.addForce) {
Body.applyForce(body,body.position,{x:body.addForce.x,y:body.addForce.y});
}

That worked.

[liabru]

Ah, you're right, the forces will always be reset as it is currently, so that's an issue I'll fix.

Also I've noted the issue with sleeping bodies. I'll make it so applyForce automatically wakes up the body.

I should hopefully be working on this again soon.

[abataille]

Another question: Where do you detect that a collision happened? Also, is there a timestamp to detect if this is an old collision, like an object laying at the bottom ?

[liabru]

I'm going to add events for collisions in the new system I'm working on, I'll do an example of this

[liabru]

@abataille I've now implemented the events system, please see the issue for it.

Hopefully this allows you to implement what you need regards to applying forces on tick, and handling collision events.

If you find issues with the event system please log them in that thread!

I also fixed the issue with sleeping bodies, they now wake up when a force is applied :)

[liabru]

@abataille I've just pushed the new sprites / textures rendering code

See the sprites demo.

Then see the sprites demo code.

[abataille]

Marvelous. One question, two suggestions:
The sprite code is not yet in Matter.js ?
Suggestions:

1. Instead of using c.save and c. restore you can rotate and translate back. It is faster, because it does not resort the entire context.
2. I used globalAlpha to mark slewing bodies having an image, like that:
   c.globalAlpha = 1.0;
   if (options.showSleeping && body.isSleeping) { c.globalAlpha = 0.5; }

Also, I changed the Render.create to:
Two reason: (a) use a previously created canvas element, so that I have some more control over it. (b) Render options seems not get propagated with Common.extend.

Render.create = function(element,options) {
var defaults = {
controller: this,
options: {
width: 800,
height: 600,
background: '#fafafa',
wireframeBackground: '#212',
enabled: true,
wireframes: true,
showSleeping: true,
showDebug: false,
showBroadphase: false,
showBounds: false,
showVelocity: false,
showCollisions: false,
showAxes: false,
showPositions: false,
showAngleIndicator: false,
showIds: false,
showShadows: false
}
};

// This part of render create added and changed by RV
var render = {};
render.options = Common.extend(defaults.options, options);
render.controller = this;
render.canvas = element;
// end of change

render.canvas = render.canvas || _createCanvas(render.options.width, render.options.height);
render.context = render.canvas.getContext('2d');

return render;

};

[liabru]

Oops forgot to build last time, that's why it's not in matter.js!

Thanks for the suggestions, I've implemented them all and will push them soon (including a build).

The last part about using a custom canvas. I could not reproduce your issue.
Here's the code I used to do it:

    var container = document.getElementById('canvas-container'),
          canvas = document.createElement('canvas');

    canvas.width = 800;
    canvas.height = 600;

    var options = {
        render: {
            canvas: canvas
        }
    };

   var engine = Engine.create(container, options);

Maybe try like that that?

[abataille]

This works with your renderer. If I use a copy of your render as my own renderer, Then it seems that I have to use my code. In engine.create you create your renderer. If I don't use it, have have to create my own one first.

[liabru]

All of the discussed issues above should be solved in the latest release:
https://github.com/liabru/matter-js/releases/tag/0.7.0-alpha

If any new issues remain, please open a new thread, cheers.