How to draw rect in Node

I’m using cocos2d-x 3.1, and I want to draw a boundingbox

void GameHelper::DrawBoundingBox(Node* target, Color4B color)
{
	glLineWidth(10);
	Rect r = target->getParent()->boundingBox();
	Point o = r.origin;
	Point w = ccp(o.x + r.size.width, o.y + r.size.height);
	DrawPrimitives::setDrawColor4B(color.r,color.g,color.b,color.a);
	DrawPrimitives::setPointSize(1);
	DrawPrimitives::drawLine(o, w);

	glEnable(GL_LINE_SMOOTH);
}

but in node i write

void CollisionComponent::update(float dt)
{
...
GameHelper::DrawBoundingBox(this->getParent(), _colorDebug);
}

it not working, please help me.

Don’t use DrawPrimitives, it will be deprecated in the future. Try to use DrawNode instead.

 auto rectNode = DrawNode::create();
    Vec2 rectangle[4];
    rectangle[0] = Vec2(-50, -50);
    rectangle[1] = Vec2(50, -50);
    rectangle[2] = Vec2(50, 50);
    rectangle[3] = Vec2(-50, 50);

    Color4F white(1, 1, 1, 1);
    rectNode->drawPolygon(rectangle, 4, white, 1, white);
    this->addChild(rectNode);
1 Like

I used LayerColor to draw the region but it seems @owen provides better solution.

We need a simpler way to draw boundingBox / boundingRegion of the ContentSize of Nodes. But at this moment we need to create another node for that.

1 Like

If you don’t want to use an extra Node to draw a rect.
You could wrap your DrawPrimitives call into a CustomCommand object and send it to the renderer.
Some thing like this:

  _customCommand.init(_globalZOrder);
    _customCommand.func = CC_CALLBACK_0(DrawPrimitivesTest::onDraw, this, transform, flags);
    renderer->addCommand(&_customCommand);

Every single draw primitives call should goes into the function of DrawPrimitives::onDraw, in your case , you could declare a function named GameHelper::onDraw.

For more information, please take a look at the DrawPrimitiveTest.

1 Like

Can you give me a example? I don’t know use DrawPrimitive, i want to create static function as

static void DrawBoundingBox(Node* target,Color4B color);

in GameHelper to draw boundingbox any Node, but i won’t use DrawNode

I did a try on this solution. It works but it need some more effort on resizing. That is, you need to clear the Node, and call drawPolygon again as below. I set stroke width as Zero as I think it will make the region larger than expected.

    rectNode->clear();
    Vec2 rectangle[4];
    rectangle[0] = Vec2(-50, -50);
    rectangle[1] = Vec2(50, -50);
    rectangle[2] = Vec2(50, 50);
    rectangle[3] = Vec2(-50, 50);
    rectNode->drawPolygon(
        rectangle, 
        4, 
        cocos2d::Color4F(cocos2d::Color4B::WHITE), 
        0, 
        cocos2d::Color4F(cocos2d::Color4B::WHITE));

If you use LayerColor, we simply need to resize the region. But of course there are limitations on using LayerColor. e.g, cannot empty fill and set stroke only.

@owen
Besides the test you mentioned, are there any official document about how to customize drawing of a Node?
I tried to derive a class from Node, then override its draw(…) (not the final one) function. But it won’t work, nothing was drawn for that derived Node. I spent some time trying to search some information. It seems the draw() function will not be called anymore? Cocos2d 3.x is using visit and send commands to the renderer now, right? Please point me some documents or guides about this topic. Thanks a lot!

I have written some Chinese tutorials, here is the google translate version:
https://translate.google.com/translate?sl=auto&tl=en&js=y&prev=_t&hl=en&ie=UTF-8&u=http%3A%2F%2F4gamers.cn%2Farchives%2F131&edit-text=&act=url

You may also want to see this thread

Thank you for the links! They are helpful.

I got a question. How to modify the line width if using DrawNode to draw it.
what’s the unit of 4th parameter of drawPolygon function? it seems not to be in pixel.
If I want to draw a polygon with 10 pixels line width, how to do that?