Hi there,
I’m developing a game prototype on Cocos2 x HTML5 with box2D.
I’ve got a problem with debuging and box2d. At first, when I tried to add box2d objects to the world, the objects would not appear on the canvas. The canvas was black, except for sprites which were included in the demo. It was like the box2d debug objects were showing…“behind” the black default background of the canvas. Invisible to the eye but still present.
I wanted to see the debug version of the object but couldn’t solve this so I made another canvas in my html file, and then I set up the debugdraw like this: (if I’m wrong here please help)
this.debugDraw = new b2DebugDraw(); this.debugDraw.SetSprite(document.getElementById("debugCanvas").getContext("2d"));
this.debugDraw.SetDrawScale(PTM_RATIO);
this.debugDraw.SetFillAlpha(0.3);
this.debugDraw.SetLineThickness(1.0);
this.debugDraw.SetFlags(
b2DebugDraw.e_shapeBit|b2DebugDraw.e_jointBit| Box2D.Dynamics.b2DebugDraw.e_centerOfMassBit
);
(you’ll notice I don’t use cc.renderContext here, but my “debug” canvas in the SetSprite).
Anyway, when doing this, I have a proper Canvas and then a Debug Canvas.
My actual question: I want to draw circles for debugging pruposes on the Debug canvas. I’m really saying pure Circles, no box2d physics objects. But I don’t know how to draw these shapes on the debug canvas.
If I do it the Cocos2d way, obviously, it will draw on the main Canvas, not the Debug one; like this:
var drawnode = cc.DrawNode.create();
this.addChild(drawnode);
drawnode.drawDot( cc.p(100,100), 90, cc.c4f( 1, 0, 0, 1) );
So basically two questions in one:
- Is it ok to use two canvas (1 “proper” sprite canvas, 2nd is “debug”); or do you know a solution to maybe combine debug and normal canvas into one ?
- If yes indeed, how can I draw shapes (shapes, not physics objects) on the debug Canvas ?
Many thanks in advance!
(have attached a picture to better explain my problems)
debugdraw.jpg (33.6 KB)
