読者です 読者をやめる 読者になる 読者になる

きょこみのーと

元六本木でGo書いてました。今はVRでGo書いてます。

Cocos2d-xでRPGツクールVX規定サイズのマップチップを利用

C++ Cocos2d-x

ダウンロードはこちらから

今回は、現在最新のv0.91で説明します。

マップチップを用意

適当にフリーの画像を用意します。※利用規約等はしっかり確認してください。

f:id:kyokomi:20130929104849p:plain

画像提供元:臼井の会 素材支部(http://usui.moo.jp/rpg_tukuru.html )

プロジェクトのResourceフォルダに配置

f:id:kyokomi:20130929104901p:plain

Tiled Map Editorを起動

ファイル>新しいファイル

f:id:kyokomi:20130929104858p:plain

□が並んだマップ Base64(zlib圧縮) マップの大きさはお好み タイルの大きさはとりあえず幅32px高さ32pxで。 f:id:kyokomi:20130929104855p:plain 表示設定を変えると使いやすくなります。

  • グリッドの表示
  • 吸着グリッドf:id:kyokomi:20130929104852p:plain

先ほど配置したマップチップを読み込みます。

マップ>新しいタイルセット

f:id:kyokomi:20130929104905p:plain

名前:japan_map(わかりやすい名前ならなんでも) 画像:先ほど配置したパス タイル幅の設定などは画像を確認して設定。基本的にRPGツクールVX規定だと以下で問題ないかと。 f:id:kyokomi:20130929104924p:plain f:id:kyokomi:20130929104909p:plain

こんな感じになります。

f:id:kyokomi:20130929104919p:plain

地面レイヤーの作成

レイヤー>タイル・レイヤーの追加

f:id:kyokomi:20130929104916p:plain

レイヤーウィンドウでレイヤー名を設定。

レイヤーウィンドウが表示されていない場合は、「表示>レイヤー」で出てきます。

f:id:kyokomi:20130929104913p:plain

畳のマップチップを選択して、塗りつぶしツールで塗ります。 f:id:kyokomi:20130929104928p:plain

障害物を配置

もう一方のレイヤーを選択して適当に配置して保存します。

f:id:kyokomi:20130929104959p:plain

保存場所は、元になったマップチップ画像と同じフォルダです。 f:id:kyokomi:20130929104954p:plain こんな感じにtmxファイルとpngが一緒にあればおkです。

f:id:kyokomi:20130929104945p:plain

作成したtmxをCocos2d-xで読み込んで表示

add Fileで追加します。

f:id:kyokomi:20130929104934p:plain

tmxとpngを選択して「Add」

f:id:kyokomi:20130929104950p:plain

作成したtmxの中身はこんな感じのxmlファイル。

f:id:kyokomi:20130929104938p:plain

Sceneのinit()メソッドで呼び出します。

GameScene.cpp

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

    TMXTiledMap* pTiledMap = TMXTiledMap::create("japan_map.tmx");
    this->addChild(pTiledMap);

    return true;
}

起動してみるとこんな感じです。 ばっちり表示できてますね! f:id:kyokomi:20130929105005p:plain

今回は、他のマップチップと組み合わせ用のものだけで作ってしまったので微妙なマップになってしまいましたが、色々なマップチップを読みこめばしっかり作れると思います。

触ってみて思ったのが、RPGツクールのマップエディターとそこまで違いを感じなかったので、結構すんなり扱えました。