Box2d SetDebugDraw - does it work in Cocos2dx?

I’m trying to add Box2D debug draw to my project. I’m using Box2D just for collision detection as in this article here; http://www.raywenderlich.com/606/how-to-use-box2d-for-just-collision-detection-with-cocos2d-iphone

It’s nearly all working and I’m trying to turn on the debug draw to iron out a few bugs….

I added :-

    m_b2dDebugDraw = new GLESDebugDraw( PTM_RATIO );
    m_b2dWorld->SetDebugDraw(m_b2dDebugDraw);
    uint32 flags = 0;
    flags += b2DebugDraw::e_shapeBit;
    flags += b2DebugDraw::e_jointBit;
    flags += b2DebugDraw::e_aabbBit;
    flags += b2DebugDraw::e_pairBit;
    flags += b2DebugDraw::e_centerOfMassBit;
    m_b2dDebugDraw->SetFlags(flags);        

Though I did find “GLESDebugDraw” wasn’t in the cocos2dx build, I found the GLESDebugDraw class in the file GLES-Render.cpp in the tests samples…. which is a bit suspicious…

And I added a call to “m_b2dWorld~~>DrawDebugData;” to make the draw happen after my box2d update, which I traced and it seems to happen with a number of “DrawShape(f, xf, b2Color(0.6f, 0.6f, 0.6f));”’s in the DrawDebuData being called though they are with small vertices values which I think is actually correct for the the GL projection. But nothing appeared on the screen, tried calling the draw after everything, before everything, still nothing appears.
I even tried this:
<pre>
glDisable;
glDisableClientState;
glDisableClientState;
m_b2dWorld~~>DrawDebugData();
// restore default GL states
glEnable(GL_TEXTURE_2D);
glEnableClientState(GL_COLOR_ARRAY);
glEnableClientState(GL_TEXTURE_COORD_ARRAY);

Still nothing.

Anyone have any idea what I’ve missed or if this works, or anyone have it working?

You’re on the right way. If it still cannot work, please paste a screenshot to let me know the status.
And you can refer to http://iphonedev.net/2009/08/10/how-to-use-debugdraw-of-box2d-with-cocos2d/, although the article is very old.

Thanks Walzer, that helped. I now have the draw working but everything else disappears.

I added the code in the draw of my CCLayer like so:

void HelloWorld::draw(void)
{
    CCLayer::draw();

    if( m_b2dWorld )
    {
        glDisable(GL_TEXTURE_2D);
        glDisableClientState(GL_COLOR_ARRAY);
        glDisableClientState(GL_TEXTURE_COORD_ARRAY);
        glEnableClientState(GL_VERTEX_ARRAY);

        m_b2dWorld->DrawDebugData();

        glDisableClientState(GL_VERTEX_ARRAY);   
        glEnableClientState(GL_TEXTURE_COORD_ARRAY);
        glEnableClientState(GL_COLOR_ARRAY);
        glEnable(GL_TEXTURE_2D);
    }
}

Any ideas? I assume I’ve turned something off that I need to turn back on in gl?

I’ve added the code to a sample project I’ve just uploaded:

http://www.gmtdev.com/blog/2011/08/19/how-to-use-box2d-for-just-collision-detection-with-cocos2d-x/
Or direct link to the download: http://www.gmtdev.com/downloads/Box2D_Collision_Test.zip

If you download it and un-comment the line “//m_b2dDebugDraw = new GLESDebugDraw( PTM_RATIO );” in init() you’ll see the debug draw working in there.

Thanks for your blog, it rocks!

Came across this as I am having some trouble with debugdraw as well. I’m using Box2d 2.2 and cocos2d 1.0. Basically it looks to me like some underlying things changed in the way box2d works with debugdraw object (?) and I’m curious if you’ve figured this out or if it’s a different problem.

Code:

@

in gamescene.h:

GLESDebugDraw *m_debugdraw;

in gamescene.m:

// Debug Draw functions
m_debugdraw = new GLESDebugDraw( PTM_RATIO );
world~~>SetDebugDraw; <~~b2world doesn’t like this, it’s looking for a b2draw object, not a GLESdebugdraw

uint32 flags = 0;
flags += b2DebugDraw::e_shapeBit; <compliler doesn’t know what b2DebugDraw is
// flags = b2DebugDraw::e_jointBit;
// flags
= b2DebugDraw::e_aabbBit;
// flags = b2DebugDraw::e_pairBit;
// flags
= b2DebugDraw::e_centerOfMassBit;
m_debugdraw
>SetFlags(flags); <-same issue here

@

Looking into this, but above code was working fine until I upgraded my box2d. Thoughts?

Box2d version in both cocos2d-x & cocos2d-iphone is 2.1.2.
Maybe some interfaces are changed in 2.2, you had to rewrite this file: tests/Box2DTestBed/GLES-Render.cpp, use the same approach to implement the drawing interfaces of 2.2

Hi, this is my first post… I had the same problem using GLESDebugDraw…

My solution is:

void HelloWorld::draw(void)
{
CCLayer::draw();

if( m_b2dWorld )
{
glDisable(GL_TEXTURE_2D);
glDisableClientState(GL_COLOR_ARRAY);
glDisableClientState(GL_TEXTURE_COORD_ARRAY);
glEnableClientState(GL_VERTEX_ARRAY);

m_b2dWorld->DrawDebugData();

//glDisableClientState(GL_VERTEX_ARRAY); <——— You need GL_VERTEX_ARRAY enabled
glEnableClientState(GL_TEXTURE_COORD_ARRAY);
glEnableClientState(GL_COLOR_ARRAY);
glEnable(GL_TEXTURE_2D);
}
}

Now every thing is working fine :slight_smile:

Hey Fco, glad someone has it working! But doesn’t work for me, with GL_VERTEX_ARRAY enabled I get normal graphics.

What version of Box2D are you using? If you can, can you upload a sample project?

Hi Gav T, we are using cocos2d-1.0.1-x-0.9.1. and Box2d 2.1.2.

Maybe you can try disabling this 2 buffers:

glBindBuffer(GL_ELEMENT_ARRAY_BUFFER,0);
glBindBuffer(GL_ARRAY_BUFFER, 0);

it’sworking… :slight_smile:

I had the same problem, and I fixed it in this way:

  1. Call the debugdraw method in the base node (so node transformation affects the result)
  2. If you use a PTM_RATIO constant, add glScalef call before calling to debug draw…

So it should look like this:

@ glDisable(GL_TEXTURE_2D);
glDisableClientState(GL_COLOR_ARRAY);
glDisableClientState(GL_TEXTURE_COORD_ARRAY);
glEnableClientState(GL_VERTEX_ARRAY);
glPushMatrix();
glScalef(PTM_RATIO, PTM_RATIO, 0);
mWorld->DrawDebugData();
glPopMatrix();
//glDisableClientState(GL_VERTEX_ARRAY); <——— You need GL_VERTEX_ARRAY enabled
glEnableClientState(GL_TEXTURE_COORD_ARRAY);
glEnableClientState(GL_COLOR_ARRAY);
glEnable(GL_TEXTURE_2D);@

Hope it helps =)

this is working fine, try this

Gav T wrote:

I’ve added the code to a sample project I’ve just uploaded:
>
http://www.gmtdev.com/blog/2011/08/19/how-to-use-box2d-for-just-collision-detection-with-cocos2d-x/
Or direct link to the download: http://www.gmtdev.com/downloads/Box2D_Collision_Test.zip
>
If you download it and un-comment the line “//m_b2dDebugDraw = new GLESDebugDraw( PTM_RATIO );” in init() you’ll see the debug draw working in there.

un-comment the line “//m_b2dDebugDraw = new GLESDebugDraw( PTM_RATIO );”

maybe the reason is that:
DebugDraw set zOrder of e_shapeBit as 0. The bg sprite covered it;
rm the bg sprite you will see it.
try it…

http://www.cocos2d-x.org/boards/6/topics/3831

jack gao wrote:

maybe the reason is that:
DebugDraw set zOrder of e_shapeBit as 0. The bg sprite covered it;
rm the bg sprite you will see it.
try it…

You may put debug drawing on a separate CCLayer, then put the layer on top.
I’ve implemented it, hope it’s helpful :wink:

Tested with cocos2d 2.0.2