Cocos2d-x 3 beta : polygon not drawn right

Question

Im using DrawNode as recommended to draw polygon but the problem its not drawn right as i like i attaching the image of the desired polygon shape and one that is output of my code that output wrong .
the code :

if (sprite && sprite->init())
{
        sprite->setTextureRect( Rect(0, 0, 200 ,200) );
        sprite->autorelease();        
        auto draw = DrawNode::create();

        {

        Point Block1[] = {
            Point(0,0),
            Point(30,0),
            Point(50,10),        
            Point(80,10),
            Point(100,0),    
            Point(200,0),
            Point(200,40),               
            Point(100,40), 
            Point(80,50),
            Point(50,50),
            Point(30,40),
            Point(0,40)
        };



        draw->drawPolygon(Block1,12 ,Color4F(1,222,120,1), 1, Color4F(0,0,1,1));
        } 
        sprite->addChild(draw, 10); 

 }
 else
 {
        CC_SAFE_DELETE(sprite);
 }

This is the output of the code it is wrong

this is the polygon i like to be drawn ( never mind the colors)

Answer 1

I know that as of the first release of Cocos2d-iphone v3 it still does not support concave polygons. So, you probably need to triangulate the polygon and then drawPolygon. I have done this with both the library poly2tri (https://code.google.com/p/poly2tri/) and a simple Triangulation C++ class (http://www.flipcode.com/archives/Efficient_Polygon_Triangulation.shtml). Both of these work great if you have no transparency, but a little bit of aliasing causes strange effect if you are using transparency because the triangles have a miniscule amount of overlap.

I know that cocos2d-iphone will have support for concave polygons in the near future (I can see it in one of the branches where they are doing a re-write of the renderer).