Verwendung von KineticJS zusammen mit box2dweb - javascript, html5, kineticjs, box2dweb

Wie verwende ich kineticJS zusammen mit box2dweb?dass ich eine Kollisionserkennung durchführen kann? Wie kann ich z. B. eine kreisförmige Begrenzung um ein Bild setzen, das durch kineticJS gerendert wurde, und Physik über box2dweb anwenden?

Gibt es dazu gute Tutorials oder Codes, die mir helfen können? Oder gibt es eine effiziente Möglichkeit, mit kineticJS eine Kollisionserkennung selbst durchzuführen?

Antworten:

Was Sie tun, ist:

1. Richten Sie eine box2d-Welt ein - stellen Sie sich die Welt als einen Raum auf der Erde (oder einem anderen Planeten) vor.

2. Fügen Sie der Welt „Körper“ hinzu - Körper sind bewegliche oder stationäre Objekte, die sich gemäß der ihnen zugewiesenen Physik verhalten.

3. Weisen Sie für jeden box2d-Körper kineticJs "skin" zu. Skins sind "hübsche" kineticJs-Formobjekte, die von kineticJs auf der Leinwand gezeichnet werden. In einem Spiel kann zum Beispiel ein Skin ein Fußball sein.

4. Bring die box2d-Welt in Bewegung und lausche dembox2d "tick" -Ereignis - Das tick-Ereignis wird ausgelöst, wenn box2d die Physik ermittelt hat, die während der angegebenen Zeitspanne aufgetreten ist. An diesem Punkt kennt box2d die Position und Drehung jedes box2d-Körpers in der box2d-Welt.

5. Überprüfen Sie im tick2-Ereignis box2d die Position / Drehung jedes box2d-Körpers und zeichnen Sie die kineticJs-Skin an derselben Position / Drehung am box2d-Körper.

Es gibt ein sehr gutes Beispiel bei: http://www.luxanimals.com/blog/article/combining_easel_box2d

Dieses Beispiel verwendet easelJs, um auf der Leinwand zu zeichnen, aber die Konvertierung in die kineticJs-Bibliothek ist sehr unkompliziert - die genau es gelten dieselben Konzepte.

[bearbeitet, um zusätzliche Informationen zu geben]

Wenn Sie nicht alle Physik in box2d benötigen, finden Sie hier einen sehr einfachen 2-Kreis-Kollisionstest mit kineticJs.

function CirclesAreColliding(circle1,circle2){
var dx = circle2.getX() - circle1.getX();
var dy = circle2.getY() - circle1.getY();
if( Math.sqrt( dx*dx + dy*dy ) <= ( circle1.getRadius() + circle2.getRadius() ) {
return true;
}
return false;
}

Dies ist ein Tutorial darüber. Viel Glück http://www.codeproject.com/Articles/571743/Box2D-and-JavaScript-Part-3