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

【问题标题】：Drawing Hexagon grid in Cocos 2d-x在 Cocos 2d-x 中绘制六边形网格
【发布时间】：2014-03-18 13:55:18
【问题描述】：

所以我要在Cocos2D-X 中创建一个六边形网格游戏。我需要它对触摸做出响应，并且当用户触摸六边形时我会触发一些动画和动作。

我想知道哪种方法更好地实现这一目标。使用CCTMXTiledMap创建六边形平铺地图，还是自己绘制六边形网格？

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

任何建议将不胜感激。

【问题讨论】：

“更好”被定义为 .. ?这是一个主观问题，取决于您的目标、要求和技能。 CCTMXTiledMap 开箱即用，但灵活性较差，自定义绘图可能更有效。可能意味着：您必须对其进行测试和比较。
@LearnCocos2D 我的意思是最合适的。我不会在六边形网格上显示任何字符或精灵，只是将其用于用户交互。而且我还没有使用CCDrawNode，所以我不知道它是否会很容易使用，或者用它来绘制六边形变得非常复杂。
那么就从tilemap开始，看看它能为你做什么（cocos2d-iphone版至少有方法可以确定触摸位于哪个十六进制字段）。自定义解决方案要求您进行十六进制布局（不太难）和十六进制触摸检测（不太简单）。阿米特游戏编程指南救援：redblobgames.com/grids/hexagons
好的，我先从这个开始，看看效果如何，谢谢您的建议。

标签： ios opengl-es cocos2d-x hexagonal-tiles

【解决方案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));
}

【讨论】：

【解决方案2】：

试试这个代码 -

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

【讨论】：

但是这样一来，图片精灵不是有一个矩形的触摸空间吗？
是的，图像精灵通过这种方式会有一个矩形的触摸空间。但是，如果六边形图像很小，则不会造成太大伤害。如果你想要完美的六边形触摸空间。检查如何忽略对图像透明部分的触摸。这可能会对您有所帮助cocos2d-x.org/forums/6/topics/32722 一旦我有空我也会尝试这样做
问题是我需要一个六边形地图，就像我附在问题上的图像一样，所以图像的空白区域会相互重叠。无论如何，我会检查透明像素代码的链接！