CODEWITHSUNDEEP
iosopengl-escocos2d-xhexagonal-tiles
6rod9
6rod9

Reputation: 1457

Drawing Hexagon grid in Cocos 2d-x

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.

enter image description here

Upvotes: 2

Views: 6756

Answers (2)

6rod9
6rod9

Reputation: 1457

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));
}

Upvotes: 2

Viper
Viper

Reputation: 1408

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

Upvotes: 0

Related Questions