Cocos2d-xでTiled Map Editorを使用する

ステップ

• はじめに
• Cocos2d-xプロジェクトの作成
• Tiled Map Editorを使ってみる
• Tiled Map EditorをCocos2d-xに組み込む

はじめに

ソースコードは以下です。

https://github.com/wapa5pow/TiledMapSample

環境は以下で作成しています。

• Mac OS X: 10.8.3
• Cocos2d-x: 2.2.1
• Tiled Map Editor: 0.9.1

また、この記事は、以下の本のレシピ74を参考にしています。

Cocos2d-xプロジェクトの作成

$ cd tools/project-creator/
$ python create_project.py -project TiledMapSample -package com.wapa5pow.TiledMapSample -language cpp
proj.ios  : Done!
proj.android  : Done!
proj.win32  : Done!
proj.winrt  : Done!
proj.wp8  : Done!
proj.mac  : Done!
proj.blackberry  : Done!
proj.linux  : Done!
proj.marmalade  : Done!
New project has been created in this path: /Applications/development/Android/cocos2d-x-2.2.1/projects/TiledMapSample
$ mkdir Resources/TileMaps

Tiled Map Editorを使ってみる

ここからダウンロードします。

Exampleを開いてその中にある各種ファイルを開いてみましょう。以下の画像はdesert.tmxを開いたところです。

一通り試してみたら、今回、Cocos2d-xに組み込んでみるファイルを作ります。
File -> New から以下の設定で作成します。

Map->New Tilesetからタイルを選択します。今回はサンプルにはいっていたtmw_desert_spacing.pngを選択します。

自由にタイルを配置していきます。終わったら、File->Save AsでCocos2d-xプロジェクトのResource以下に配置します。今回はdesert.tmxのファイル名で保存しました。

Tiled Map EditorをCocos2d-xに組み込む

TiledMapSample.xcodeprojをXcodeで開き、先ほどResourceファイル以下に追加したdesert.tmxをResource下にXcode上で配置します。

Tiled Mapを読み込むコードをHelloWorldScene.cppに、以下のように追加します。

// add tiled map
CCTMXTiledMap* pTileMap = CCTMXTiledMap::create("TiledMaps/desert.tmx");
this->addChild(pTileMap);