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

とあるプログラマの備忘録

都内某所に住むプログラマが自分用に備忘録を残すという趣旨のブログです。はてなダイアリーから移動しました!

Cocos2dx 3.0 TieldMapEditor Tieldを使ってマップを作成する

さて前回の記事でカメラをフォローする所まで書きましたが、
Cocos2dx 3.x box2dを使用してカメラをフォローさせる - とあるプログラマの備忘録
今回はTielMapEditor Tieldを使用してマップを作成したいと思います。

Tiled Map Editor
こちらのDaily Buildsの方のから最新版をダウンロードしましょう。
なぜ最新版かというとプロパティが編集出来るようになっているからです。
私は5/24段階のdmgファイルを使用しました。

f:id:raharu0425:20140529145532p:plain

インストールしたら適当に新しいプロジェクトを作成します。 するとこんな画面になるはずです

f:id:raharu0425:20140529150008p:plain

左のレイヤーボタンを押すとレイヤーが見れます。

f:id:raharu0425:20140529150353p:plain

現在タイル・レイヤーとなっている所をLayerと名前を変更します。
その後追加ボタンを押し、オブジェクト・レイヤーの追加をします

f:id:raharu0425:20140529150738p:plain

こちらも名前をCollisionMapとします

f:id:raharu0425:20140529150819p:plain

タイル・レイヤーは1タイル(マス)にたいして画像など乗せる事が出来ます
オブジェクトレイヤーはそ物理的な静的オブジェクトを作成する事が出来ます

新しく作成したCollisionMapを選択した状態で上のメニューから色々な図形や線がかけます

f:id:raharu0425:20140529151248p:plain

こんな感じで作成してみました。

f:id:raharu0425:20140529151450p:plain

追加したオブジェクトには名前を付けておきましょう

f:id:raharu0425:20140529172925p:plain

この時点でこのマップを組み込みたいプロジェクトのResourcesに保存します

f:id:raharu0425:20140529152218p:plain

これで物理判定する箇所はできたのですが、これだけでは寂しいのでこんな物をつくってもらいました。
斜め前席のAさんありがとうございます!

f:id:raharu0425:20140529152328p:plain

この画像をResourcesに入れます

f:id:raharu0425:20140529152501p:plain

同階層に保存したので、これをTiledにドラッグ&ドロップします。

f:id:raharu0425:20140529152623p:plain

保存するかときかれるのでそのままOKを押します。 するとTiledのタイルセットの中に先ほどの画像が入ると思います。

f:id:raharu0425:20140529153036p:plain

レイヤーをLayerに変更して上のメニューのスタンプボタンを押下。

f:id:raharu0425:20140529153455p:plain

この状態でオブジェクトにそってタイルを埋めていきます。 こんな感じになればおkです。

f:id:raharu0425:20140529153547p:plain

これにてマップは一旦作成完了とします。

次回Cocos2dx 3.0 TielMapEditor Tieldで作ったMAPを取り込む - とあるプログラマの備忘録