Box2d debug info renders incorrectly?

haxpor · December 15, 2012, 11:53am

I added the following code to make Box2d Testcase draws debug information.

In ctor() function,

        //set up debug draw
        var debugDraw = new b2DebugDraw();
        debugDraw.SetSprite(cc.renderContext);
        debugDraw.SetDrawScale(PTM_RATIO);
        debugDraw.SetFillAlpha(0.3);
        debugDraw.SetLineThickness(1.0);
        debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit | b2DebugDraw.e_centerOfMassBit);
        this.world.SetDebugDraw(debugDraw);

And add draw() function to actually draw them on top of normal content,

        draw:function (ctx) {
             this.world.DrawDebugData();
             this._super(ctx);
        }

What I see is that the debug information doesn’t align with the sprite on screen. It almost out of the sight.
Please note that I use latest version 2.1 from this website’s download link.

Any suggestion would be appreciate.

Screen Shot 2012-12-15 at 6.51.01 PM.png (60.6 KB)

eralpkaraduman · December 16, 2012, 8:50pm

I have the same problem.
(Using the latest clone of cocos2d html5 from github (https://github.com/cocos2d/cocos2d-html5))
I set debug draw with almost same code and get a similar result.
Searched everywhere but haven’t found a way to get debugdraw and game aligned.
Than I came up with a very stupid idea to get it kinda work…

I created a second canvas on html named it “box2dDebugCanvas”
Told debugDraw to draw on this canvas instead of sharing it with cocos2d.

And I got the result in the attached file, my game is on the top, and debugdraw on the bottom in separate canvases.

but I had to flip debugDraw canvas vertically as It showed upside down by css: style="-webkit-transform:scaleY(–1);

I can not say it’s solved, of course it isn’t. But helps to see where are box2d bodies until it is solved.
Finally I can not stuck at this problem and continue making my game.

Hope it helps…

haxpor · December 17, 2012, 12:52am

Hey Thanks much Eralp!

I keep it noted and will be look back later due to at the moment I switched to use chipmunk for the sake of continuing my project.
You’re right about y-axis, it flips me up side down the same.

I guess it relates about anchor position of the parent node, and scaling. I tried once to align debug nodes to sprite nodes, almost get it to perfectly aligned but have to do several work around like flipping / offset with winSize’s width and height. Your solution would erase those.

Wuhao · December 20, 2012, 2:22am

We added the physics Debug Node to work with Chipmunk, it is really simple

haxpor · December 30, 2012, 11:07am

Hao Wu, it’s not chipmunk. This post I used Box2D, and it seems to render out debug information incorrectly.

acc85 · April 3, 2013, 2:59pm

I have included my modified version of box2d to fix the position of the debug box positions in case anyone is requiring it.

I too ran into the problem of having the positions of the debug boxes around box2d objects out of place.

So I inverted the Y-axis drawing coordinate by multiplying them by –1 and added an offset which you set inside you main application js file, usually myApp.js by default, or where ever your setting up the world.

You can set the offset by using the method SetOffsets({x:,y:}) with the b2DebugDraw object you’ve defined. From the example in the first post on in this thread

1 //set up debug draw
2 var debugDraw = new b2DebugDraw();
3 debugDraw.SetSprite(cc.renderContext);
4 debugDraw.SetDrawScale(PTM_RATIO);
5 debugDraw.SetFillAlpha(0.3);
6 debugDraw.SetLineThickness(1.0);
7 debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit | b2DebugDraw.e_centerOfMassBit);
8 this.world.SetDebugDraw(debugDraw);

you could use: debugDraw.SetOffsets({x:,y:})

the parameters that the offsets take is a JSON notation object with a x value and y value that take in values that you want to be the offsets
e.g. ( { x : 10, y: 16 } )

this will draw the boxes 10 extra meters to the right and 16 extra meters to the top.

I noticed this sin’t the case for the latest git pull of the cocos2dhtml repo, I only needed to flip the boxes. I wasn’t required to set any offsets.

haxpor · April 3, 2013, 3:56pm

Thanks, glad to know this issue is fixed in latest version. I keep your solution in case I need to fall back. Thanks.

acc85 · April 3, 2013, 4:42pm

Actually in the latest git report version, I still had to invert the positions y-axis…so it means you don’t need to set an offset, but I still had to use my modified version of box2d…just without setting an offset.

lorenzocastillo · April 4, 2013, 3:25pm

Ray To wrote:

Actually in the latest git report version, I still had to invert the positions y-axis…so it means you don’t need to set an offset, but I still had to use my modified version of box2d…just without setting an offset.

Hello,
How did you manage to fix this?

I’m having the issue where the debug’s y-axis is inverted, and the origin is in the center of the canvas. If I use Eralp’s method of putting it in another canvas, then the origin is fine, but the canvas is inverted and I know how to flip it here. However, if I flip the context in cocos2d, then everything will get flipped as well using my method.

Here’s a picture

acc85 · April 4, 2013, 3:33pm

Are you using the box2d.js file I attached?

lorenzocastillo · April 4, 2013, 5:04pm

Ray To wrote:

Are you using the box2d.js file I attached?

Yes, and now I’m getting the debug right side up but the center/origin problem persists. I’m not setting any offsets in my code (that i know of).

acc85 · April 4, 2013, 5:35pm

The SetOffset method is there to correct the position of the boxes…you’ll bed to set offsets to have the boxes in the correct position. Use the method to offset the boxes till they are in the correct position

lorenzocastillo · April 4, 2013, 6:24pm

Ray To wrote:

The SetOffset method is there to correct the position of the boxes…you’ll bed to set offsets to have the boxes in the correct position. Use the method to offset the boxes till they are in the correct position

So I’m using the setOffset right under the setFlags method. No matter what values I put in, it only moves one of the boxes. Also, if I put a negative value, both of the boxes don’t show up. I’m assuming they’re being drawn off the screen.

This is the image with debugDraw.SetOffsets({x:‘0’,y:‘10’})

As you can see, only the left box gets moved down.

acc85 · April 4, 2013, 6:41pm

just so I know the positions, where’s the vertical shape suppose to be on the screen and where is the vertical shape suppose to be

plus is the x-axis okay?

Also… are you using SetAsBox or just Set?

and are you using b2Polygonshape or a different shape?

lorenzocastillo · April 4, 2013, 6:55pm

Ray To wrote:

just so I know the positions, where’s the vertical shape suppose to be on the screen and where is the vertical shape suppose to be
>
plus is the x-axis okay?
>
Also… are you using SetAsBox or just Set?
>
and are you using b2Polygonshape or a different shape?

So I went into Box2d.js and got it to work and then I realized that when using setOffsets you need to use numbers without the quotes contrary to the example.

Thanks for your help

acc85 · April 4, 2013, 7:14pm

oops…my bad… yeah that would turn them into strings

lorenzocastillo · April 4, 2013, 9:51pm

Ray To wrote:

oops…my bad… yeah that would turn them into strings

haha yeah I thought Box2D parsed them or something, but nope lol thanks!

naghekyan · March 9, 2014, 8:38pm

@haxpor I didn’t understand what was the trick to draw debug data on top of the content? I really need it, but it draws on the bottom of everything.

dajeff · March 9, 2014, 9:06pm

Same as you, I’m sure the items are there in the backgroud but for now, I haven’t any other trick than to add another canvas.
This is wrong I feel, but it’s the only way I can think of at the moment.
I’m guessing Layer z index or something, but can’t solve it properly.

Anybody has a clue ?

mrosalesdiaz · April 2, 2014, 8:37pm

I have created a class to solve this, here is the code:
(It just flips the drawing context at execution time and as Node you can set ZOrder property to force it to be on top)

var DebugBox2DNode = cc.Node.extend({
  _refWorld: null,
  ctor: function(world) {
    this._super();
    this._refWorld = world;
    this._zOrder = Number.MAX_VALUE;

    var debugDraw = new b2DebugDraw();
    debugDraw.SetSprite(cc.renderContext);    
    var scale = 32 * cc.EGLView.getInstance().getViewPortRect().width / cc.EGLView.getInstance().getDesignResolutionSize().width
    debugDraw.SetDrawScale(scale);
    debugDraw.SetFillAlpha(0.5);
    debugDraw.SetLineThickness(1.0);
    debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit | b2DebugDraw.e_centerOfMassBit);
    this._refWorld.SetDebugDraw(debugDraw);
  },
  draw: function(ctx) {
    this._super();
    if(this._refWorld) {
      ctx.scale(1, -1);
      ctx.translate(0, ctx.canvas.height);
      this._refWorld.DrawDebugData();

      ctx.scale(1, 1);
      ctx.translate(0, 0);
    };
  }
});

Then add the node in your layer and provide the world reference

    // creating physics world
    var world = new b2World(new b2Vec2(0, -10), true);
    world.SetContinuousPhysics(true);
    this.world = world;

    // initializa debug
    var drawNode = new DebugBox2DNode(world);
    this.addChild(drawNode);

Let me know if it works for you.