Drawing Hexagon grid in Cocos 2d-x

Question

So I'm about to create an Hexagon grid game in Cocos2D-X. I need it to be responsive to touches and I'm going to trigger some animations and actions when the user touches an hexagon.

I was wondering which is the better approach to achieve this. Using the CCTMXTiledMap to create the hex tiled map, or drawing the hexagon grid by myself?

In the custom drawing solution, CCDrawNode is the better way to draw my hexagons?

Any suggestions would be appreciated.

Answer 1

I ended up using CCDrawNode to drawn the hexagon myself, this way I have the desired hexagonal touch space, and I don't have to make any extra calculations to check witch hexagon was touched.

Here's the algorithm:

Hexagon::Hexagon(float hexagonWidth, float hexagonHeight, Color4F fillColor)
{
    float width = hexagonWidth;
    float height = hexagonHeight;

    _drawNode = CCDrawNode::create();
    Point vertices[6] = {
        Point( 0.f, height/2 ),
        Point( width*1/4, height ),
        Point( width*3/4, height ),
        Point( width, height/2 ),
        Point( width*3/4, 0.f ),
        Point( width*1/4, 0.f )
    };

    Color4F borderColor = {0.0f, 0.0f, 1.0f, 1.0f};
    _drawNode->drawPolygon(vertices, 6, fillColor, 0.f, borderColor);
    _drawNode->setAnchorPoint(Point(0.5, 0.5));
}

Answer 2

Try this code -

CCMenu  *myMenu =   CCMenu::create();
    myMenu->setPosition(CCPointZero);
    this->addChild(myMenu);

    int leftMargin  =   20;
    int topMargin   =   500;

    int index   =   0;
    for (int i=0; i<5; i++) {
        leftMargin  =   150;
        if (i%2 != 0) {
            leftMargin  =   leftMargin-(100/2);
        }
        for (int j=0; j<5; j++) {


            CCMenuItemImage *hexImg =   CCMenuItemImage::create("hexagon_new.png", "hexagon_new.png", this, menu_selector(Hexagon::clickOnHex));
            hexImg->setRotation(90);
            hexImg->setPosition(ccp(leftMargin, topMargin));
            hexImg->setTag(index);
            hexImg->setScale(115/hexImg->getContentSize().width);
            myMenu->addChild(hexImg);
            index++;
            leftMargin  += 100;
        }
        topMargin   -=  82;
    }

and the function to do animation on hexagon on user touch is -

void Hexagon::clickOnHex(CCObject *sender){
    CCMenuItemImage *tempHex    =   (CCMenuItemImage *)sender;
    CCRotateBy *rotateBy        =   CCRotateBy::create(0.5, 360);
    tempHex->runAction(rotateBy);
    CCLOG("HEX CLICKED");
}

do animation what you want.

this is the image that i used.

hexagon image