Box2D Cocos2d JS

Question

Je veux créer une pente comme dans une image jointe dans Box2D Cocos2d JS. Cependant, je suis incapable de le créer correctement lorsque des sprites sont attachés à celui-ci. Mon code est:

new b2Vec2(0, 0), 
new b2Vec2(100/worldScale, -50/worldScale), 
new b2Vec2(200/worldScale, 0/worldScale) 

Les dimensions de l'image est de 200 * 50, et Worldscale = 30.

Answer 1

Tout d'abord je vois que vous utilisez des coordonnées négatives (-50). Tout dans Cocos2d-JS (la fenêtre d'affichage par défaut) est positif ({0,0} est le point en bas à gauche). Pour déboguer le positionnement de pente, je vous suggère d'utiliser Box2d DebugDraw d'abord, pour voir la pente réelle que vous avez décrite, puis de placer votre sprite en fonction de ces structures filaires. Cocos2d-JS effacera son propre canevas dans la fonction de mise à jour, donc vous devrez mettre un autre canevas de débogage par-dessus, pour DebugDraw.

This example helped me to add debug draw to my box2d sandbox successfully

ajouter ce code à mettre à jour la fonction

var debugDraw = new Box2D.Dynamics.b2DebugDraw(); 
debugDraw.SetSprite(document.getElementById("test").getContext("2d")); 
// test is the id of another canvas which debugdraw works on 
debugDraw.SetDrawScale(30.0); 
debugDraw.SetFillAlpha(0.3); 
debugDraw.SetLineThickness(1.0); 
debugDraw.SetFlags(Box2D.Dynamics.b2DebugDraw.e_shapeBit | 
Box2D.Dynamics.b2DebugDraw.e_jointBit); 
this.world.SetDebugDraw(debugDraw); this.world.DrawDebugData(); 

box2d utiliser un cadre de coordonnées différent de cocos, de sorte que vous devez faire transform 180 degrés. ajouter ceci au style de toile de débogage

-webkit-transform:rotate(180deg); // et le style d'autres navigateurs