Cocos Creator で TiledMap を表示する

Uncategorized
506 words

Tiled Map Editor で作ったマップを、Cocos Creator で読み込む方法を紹介します。

今後のゲーム制作で登場するか分からないですが、一応こんな機能があるよってことで。

こんなのが出来ます。
https://noitaro.github.io/cocos-creator-tiledmap-web/

開発環境

Tiled Map Editor でマップデータを作る

まず、Tiled Map Editor をダウンロードしてインストールまでしておきます。

新しいマップを作成

メニューから、ファイル > 新規 > 新しいマップ の順で選択していき、新しいマップを作成します。

今回は、isometric のマップを作りたいので、マップの種類をひし型タイルにしました。

四角型や六角型のマップも作るので、いつかチャレンジしてみたいです。

何もないマップが出来ました。

タイルセットを作成

次に、新しいタイルセットを作成します。

メニューから、ファイル > 新規 > 新しいタイルセット の順で選択していき、タイルセットを作成します。

画像のパスと、タイルの幅と高さを設定します。

こちらから画像をお借りしました。

マップを作る

とりあえず、何も気にしないでズビャビャっとタイルを敷き詰めておきます。

Cocos Creator で TiledMap を表示する

実際に、Cocos Creator で TiledMap を表示させてみましょう。

Assets フォルダに TiledMap データを入れる

フォルダを作成して、マップファイルとマップチップ画像を入れます。

フォルダは、NewProject\assets\res\tiledmap\ こんな階層にしました。読み込めればいいので特に気にしないで大丈夫です。

Canvas に TiledMap コントロールを配置する

Node Library から Renderer の TiledMap を Canvas に配置します。

TiledMap コントロール にマップデータを紐付ける

Assets 内から マウスドラッグでマップデータを紐付けます。

動作確認

表示ならプログラミングは不要ですね。

ブラウザから動作確認

ブラウザでも動作確認できるのでアクセスしてみてください。
https://noitaro.github.io/cocos-creator-tiledmap-web/