Cocos2d-x TMXTliedMapにグリッド線を引いてみる

はじめに

今回は、SRPGゲームな必須のグリッド線を表示します。

TMXTiledMapとかTMXLayerとかで標準でそういう機能ないかなー？とか思ったけど、そういう場合は画像自体に線を引くのかな？ とりあえずさっとソース見た感じなかったので独自実装してみます。

ソースコード

【GameScene.cpp】

bool GameScene::init()
{
    // 1. super init first
    if ( !Layer::init() )
    {
        return false;
    }

    Size winSize = Director::getInstance()->getWinSize();

    // TileMapを設置
    TMXTiledMap* pTiledMap = TMXTiledMap::create("tmx/desert.tmx");
    this->addChild(pTiledMap);
    pTiledMap->setTag(kTiledMapTag);
    pTiledMap->setPosition(pTiledMap->getTileSize().width * -0.5, pTiledMap->getTileSize().height * -0.5);

〜 省略 〜

    // ----------------------------------------------------
    // Grid線表示ここから
    // ----------------------------------------------------
    DrawNode* draw = DrawNode::create();
    draw->setPosition(Point::ZERO);

    // 線の太さと色
    float lineSize = 1 * 0.5;
    Color4F color = Color4F::BLUE;

    // 縦線を引く
    for (int x = 1; x < pTiledMap->getMapSize().width; x++)
    {
        float xPoint = x * pTiledMap->getTileSize().width;
        draw->drawSegment(Point(xPoint, 0), Point(xPoint, pTiledMap->getContentSize().height), lineSize, color);
    }
    // 横線を引く
    for (int y = 1; y < pTiledMap->getMapSize().height; y++)
    {
        float yPoint = y * pTiledMap->getTileSize().height;
        draw->drawSegment(Point(0, yPoint), Point(pTiledMap->getContentSize().width, yPoint), lineSize, color);
    }
    // TODO: とりあえず適当にZIndexを上に。
    pTiledMap->addChild(draw, 10000, 100000);

    return true;
}

案外あっさりできました。

DrawNodeのdrawSegment()についてちょっと説明

void DrawNode::drawSegment(const Point &from, const Point &to, float radius, const Color4F &color) 

• from・・・描画開始位置
• to・・・描画終了位置
• radius・・・描画する線の太さ
• color・・・描画する線の色

ちょっとハマったのが、タッチイベントのフリックでTiledMapの座標を移動してキャラ移動っぽくしているのですが、このグリッド線をSceneのLayerに対してaddChiledしていたので、おかしな描画になってました。

マップ座標を移動するときは、一緒に移動するものも同じLayerにaddChiledすることを忘れないように！