CocosCreator
TiledMapEditor

CocosCreatorでTiledMapEditorのマップを表示する

はじめに

2Dゲーム作りでは必須ともいえる、TiledMapEditor(マップエディタ)との連携方法をまとめてみました。

2018.11.19 追記
CocosCreator 2系におけるtsxファイルの読み込み方法を追記。

2018.2.27 追記
mapノードの左下を原点(0, 0)とするよう追記。

■動作環境
Windows10
CocosCreator 1.6.2
TiledMapEditor 1.0.3

■使用した素材
フィールドレイヤー用マップチップ(mapchip1.png)
mapchip1.png
障害物レイヤー用マップチップ(mapchip2.png)
mapchip2.png

今回目指す内容

ベーシックな連携方法についてはいろいろなサイトでも述べられているので、より複雑なゲームにも対応できるよう、以下を目指してみます。

  • 複数のタイルセットを利用してマップを作成する
  • マップは複数のレイヤーで構成する(下のレイヤーはフィールド、上のレイヤーは障害物といった感じに)
  • マップにカスタムプロパティを設定する
  • マップはプログラム中に動的に読み込む

TiledMapEditorのインストール

公式ページからインストーラをダウンロードして実行します。
snapshotではなく、release版をダウンロードしましょう。
window0.PNG

マップの作成

タイルセットの作成

TiledMapEditorを起動したら、「ファイル」→「New」→「新しいタイルセット」を選択し、フィールドレイヤーで使用するタイルセット(mapchip1.tsx)を作成します。
名前、画像ファイル(mapchip1.png)のパス、透過色、タイルの幅・高さを以下のように設定します。
window1.png

同様に障害物レイヤーで使用するタイルセット(mapchip2.tsx)を「新しいタイルセット」で作成します。
こちらは「透過色を設定する」にチェックを入れ、スポイトで画像の左上あたりを透過色として選択します。
window2.png

マップの作成

「ファイル」→「New」→「New Map」を選択し、サンプルとして縦と横が16タイルずつのマップを作成します。
window3.png

「マップ」→「タイルセットを読み込み」を選択し、先ほど作成したmapchip1.tsxとmapchip2.tsxを読み込みます。
読み込むとTiledMapEditor右下のタイルセットにmapchip1とmapchip2が表示されます。
(タイルセットが表示されていない場合は「表示」→「ビューとツールバー」→「タイルセット」を選んで表示させる)
window3-1.PNG

TiledMapEditor右上のレイヤーにて、foregroundとbackgroundのレイヤーを作成する。
window3-2.PNG

backgroundのレイヤーを選択し、適当にフィールドを描く。
window4.png

同様にforegroundのレイヤーを選択し、障害物を描く。
window5.png

作成したマップはmap.tmxのファイル名で保存します。

カスタムプロパティの設定

ここでは、木と看板は障害物であることを示すよう、木と看板のマップチップに独自のcategoryプロパティを設定します。
(このプロパティはCocosCreatorで使用します)

TiledMapEditorにmapchip2.tsxを読み込ませ、mapchip2を編集します。
木のマップチップを選択し、カスタムプロパティの下にある「+」を選択します。
ダイアログ上でプロパティ名をcategory、型をintとしてOKを押します。
window6.png

カスタムプロパティにcategoryが追加されたら、値に1をセットします。
window7.png

看板も同様の手順でcategory=1を設定します。

CocosCreatorでのマップ表示

プロジェクトの作成

CocosCreatorが起動したら新規プロジェクトを作成し、以下となるようassetsを準備します。
window8.png

シーン:scenesフォルダを作成し、「Game」のsceneを作成する。
マップ:resourcesフォルダを作成し、以下のファイルを格納する。
   mapchip1.png
   mapchip2.png
   mapchip1.tsx
   mapchip2.tsx
   map.tmx
   ※あとで動的読み込みを行うため、フォルダ名は必ず「resources」にしてください。

mapノードの作成

Node Tree上で、Canvasノード内にmapノードを新規作成(Create Empty Nodeを選択)します。
mapノードを選択し、作成したマップと同じサイズとなるよう、Size W:768 H:768と設定します。
window9.png

2018.2.27 追記
今後プレイヤー等のオブジェクトをmapノードに配置する場合、mapノードの左下を原点(0, 0)にしておくと配置しやすくなります。
mapノードの原点を左下に設定するには、Anchor X:0 Y:0と設定します。
またmapノードが画面の中央に表示されるよう、Position X:-384 Y:-384と設定します。

anchor3.png

スクリプト作成とmapノードへの関連付け

assetsの中にscriptsフォルダを作成し、JavaScriptを作成します。
スクリプトの名前は「Map」に変更します。

mapノードを選択し、右側のPropertiesにある「Add Component」を押し、「Add Custom Component」→「Map」を選択します。
以下のように、mapノードにMapスクリプトが関連付けられます。
window11.png

スクリプトの編集

Map.jsを以下の内容に書き換えます。

Map.js
/* global cc */
cc.Class({
    extends: cc.Component,

    // use this for initialization
    onLoad: function () {
        this.loadMap();
    },

    //
    // Mapを読み込む
    //
    loadMap: function () {
        var self = this;
        cc.loader.load(cc.url.raw("resources/mapchip1.tsx"), function (err, result) {
            cc.loader.load(cc.url.raw("resources/mapchip2.tsx"), function (err, result) {
                cc.loader.loadRes("map", function (err, map) {
                    var component = self.node.addComponent(cc.TiledMap);
                    component.tmxAsset = map;

                    // マップ読み込み完了後、看板の座標のcategoryプロパティ値を出力
                    cc.log("category: ", self.getCategory(6, 7));
                });
            });
        });
    },

    //
    // 指定した座標のcategory値を返す
    //
    getCategory: function (x, y) {
        var layer = this.node.getComponent(cc.TiledMap).getLayer("foreground");
        var gid = layer.getTileGIDAt(cc.p(x, y));
        var properties = this.node.getComponent(cc.TiledMap).getPropertiesForGID(gid);

        if (properties === undefined || typeof properties == "number") return 0;
        return properties.category;
    },
});

スクリプトの説明:

  • 起動時にloadMap()関数を呼び、2つのタイルセットとマップのファイル名を指定して動的に読み込む(俗にいうCallback地獄になってる^^;)
  • 読み込みが完了したら、看板の座標(ここではx=6, y=7)のcategoryプロパティ値をcc.log()で出力
  • getCategory()関数では、以下の手順でcategoryプロパティ値を取得
    • マップのforegroundレイヤーオブジェクトを参照し、getTileGIDAt()関数でgid(タイル番号)を取得
    • getPropertiesForGID()関数でマップからプロパティ群を取得
    • プロパティ群がNullでなければ、categoryプロパティを参照

CocosCreator 2系はtsxファイルの読み込み方法が変更となったため、cc.loader.loadを実行している箇所は以下に読み替えてください。

        cc.loader.loadRes("mapchip1", function (err, tsx) {
            cc.loader.loadRes("mapchip2", function (err, tsx) {

実行すると、ブラウザ画面上に以下のようにマップが表示されるはずです。
window10.png

おわりに

TiledMapEditorにはタイルレイヤーに加えてオブジェクトレイヤーという概念もありますが、こちらは別の機会にまとめたいと思います。
こちらの記事にまとめました。