在Cocos 2d-x中绘制六边形网格

问题描述 投票:1回答:2

所以我即将在Cocos2D-X创建一个Hexagon网格游戏。我需要它来响应触摸,当用户触摸六边形时,我将触发一些动画和动作。

我想知道哪个是更好的方法来实现这一目标。使用CCTMXTiledMap创建六角形平铺地图,或者自己绘制六边形网格?

在自定义绘图解决方案中,CCDrawNode是绘制六边形的更好方法吗?

任何建议,将不胜感激。

ios opengl-es cocos2d-x hexagonal-tiles
2个回答
1
投票

我最终使用CCDrawNode自己绘制六边形,这样我就可以获得所需的六边形触摸空间,而且我无需进行任何额外的计算来检查六角形是否被触及。

这是算法:

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

0
投票

试试这个代码 -

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

用户触摸六边形动画的功能是 -

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

做动画你想要的。

这是我用过的图像。

hexagon image

© www.soinside.com 2019 - 2024. All rights reserved.