Tiledによるタイルマップの作成とオブジェクトデータの取得を行う！：Cocos Creator

＜今回やること！＞

『Tiled』マップエディターで、タイルマップを作成します。
見た目の作成だけでなく、オブジェクトの配置も行います。
作成したタイルマップをCocos Creatorで読み込みます。
配置したオブジェクトのデータを読み込みます。

　
　タイルマップとは、タイルセットやマップチップと呼ばれる色々なパターンのタイルを並べて、ゲームのステージやマップを作成したものです。

タイルセット（マップチップ）
タイルマップで作成したステージ

　１枚絵を使用するよりも使用する画像サイズが小さく、同じタイルセットで様々なパターンのマップが作成出来ます。タイルセットは素材配布サイト入手可能で、有償のものも無償のものもあります。
　
　『Tiled』は、タイルセットからマップを作るためのエディタです。

　無料で使用可能です。（寄付は募っています。）Mac、Windows、Linux版が配布されています。
　
　『Tiled』のファイル形式『.tmx』は、Cocos Creatorでサポートされています。
　『Tiled』で配置したオブジェクトの位置、形状、サイズ等のデータをCocos Creatorで容易に扱うことが出来ます。
　
　『Tiled』の使い方と、Cocos Creatorへタイルマップを読み込む方法をまとめました。

使用環境

　私が使用している環境です。

Mac OS X El Capitan Version 10.11.6
Cocos Creator Version 2.1.1
ブラウザ：Google Chrome Version 74.0.3729.169 (64-bit)
Tiled Version 1.2.4

Tiledの入手

下記のサイトを開く
https://thorbjorn.itch.io/tiledthorbjorn.itch.io
ページの中程辺りの『Download』をクリック

寄付を募る画面が出ます。
ダウンロードだけする場合は、『No thanks, just take me to the downloads』をクリック
『Download』をクリック
『tiled-macos.zip』がダウンロードされます。
『tiled-macos.zip』をダブルクリックして、マウント
『Tiled』をアプリケーションフォルダにドラッグ＆ドロップ
『Tiled』を右クリックし、『開く』をクリック
セキュリティの設定によっては、初回起動時に実行許可が必要です。
『開く』をクリック

タイルセットを入手

下図を右クリックし、『名前を付けて画像を保存』をクリックして保存
今回は"map.png"という名前で保存しました。

タイルマップを作成

『Tiled』で、『ファイル』→『新規』→『新しいマップ』をクリック
下図の設定で、『ファイル名をつけて保存』をクリック

タイルの出力形式はどれでもCocos Creatorで読み込むことが出来ました。
タイルの出力形式ファイルサイズ（byte） Cocos Creatorの読込可否
XML 7,130 OK
Base64（未圧縮） 2,961 OK
Base64（gzip圧縮） 1,011 OK
Base64（zlib圧縮） 979 OK
CSV 1,814 OK
『Tiled map file(*.tmx *.xml)』形式を選択し、任意のファイル名を付けて『Save』をクリック
『新しいタイルセット』をクリック
『参照』をクリックし、保存しておいたタイルセットを選択して『ファイル名をつけて保存』をクリック
ファイル名を付けて『Save』をクリック
『Tiled tileset files(*.tsx *.xml)』ファイルが保存されます。
『tiledmap.tmx』のタブをクリック
タイルマップ全体を塗りつぶす
地面を範囲指定で塗りつぶす
スタンプで塗る
別のパターンのタイルをスタンプで塗り、レイヤー名をダブルクリックして"ground"に変更
『新しいレイヤー』→『Tile Layer』をクリックし、レイヤー名をダブルクリックして"grass"に変更
『grass』レイヤーに葉っぱのタイル塗る
葉っぱのタイルは透過部分があるので、『ground』レイヤーの上に『grass』レイヤーを作ってから塗っています。

タイルの出力形式	ファイルサイズ（byte）	Cocos Creatorの読込可否
XML	7,130	OK
Base64（未圧縮）	2,961	OK
Base64（gzip圧縮）	1,011	OK
Base64（zlib圧縮）	979	OK
CSV	1,814	OK

オブジェクトを追加

『新しいレイヤー』→『Object Layer』をクリックし、レイヤー名をダブルクリックして"myobjects"に変更
『myobjects』レイヤーに、下図のようにオブジェクトを配置
『⌘（command） + s』を押してタイルマップを保存

Cocos Creatorでタイルマップを使用する

『Empty』プロジェクトを作成
プロジェクトの構成ファイル等を追加
- 『Cocos Creator』のエディタのメニューで『Cocos Creator』→『Developer』→『VS Code Workflow』→『install VS Code Extension』をクリック
- 『Cocos Creator』のエディタのメニューで『Developer』→『VS Code Workflow』→『Update VS Code API Source』をクリック
- 『Cocos Creator』のエディタのメニューで『Developer』→『VS Code Workflow』→『Add Chrome Debug Setting』をクリック
- 『Cocos Creator』のエディタのメニューで『Developer』→『VS Code Workflow』→『Add Compile Task』をクリック
- 『Cocos Creator』のエディタのメニューで『Developer』→『VS Code Workflow』→『Add Type Script Config』をクリック
『Assets』パネルで、『+』→『Scene』をクリック
追加したシーンをダブルクリックして名前を"Main"にする
『Assets』パネルで、『+』→『TypeScript』をクリック
追加したスクリプトをダブルクリックして名前を"Main"にする
『Assets』パネルに、『Tiled』で作成した下記のファイルをドロップして追加
- map.png
- map.tsx
- tiledmap.tmx
『Assets』パネルで、『Main』シーンをダブルクリックして開く
『Assets』パネルから『Node Tree』パネルの『Canvas』ノードに、『tilemap』をドラッグして追加
『Canvas』ノードをクリック
『Properties』パネルで、『Desine Resolution』を『W:640 H:320』にする
『Properties』パネルで、『Add Component』→『Custom Component』→『Main』をクリック
『Assets』パネルで、『Main』スクリプトをダブルクリックして開く

『VSCode（コードエディタ）』で、下記のように編集して保存
TypeScriptで書きましたが、JavaScriptでもほぼ同様です。
『myobjects（Objcet layer）』に配置したオブジェクトの情報を読み取ってコンソールに出力します。

const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

    @property(cc.TiledMap) // Cocos Creatorエディタの『Properties』パネルで値を取得
    tiledMap: cc.TiledMap = null; // タイルマップ取得用

    tiledMapSize: cc.Size = null; // タイルマップのサイズ

    onLoad () {
        this.tiledMapSize = cc.size(
            // getTileSize()はタイルのサイズ（ピクセル数）を返す、getMapSize()はタイル数を返す
            this.tiledMap.getTileSize().width * this.tiledMap.getMapSize().width, // タイルマップの幅、20　×　32 = 640
            this.tiledMap.getTileSize().height * this.tiledMap.getMapSize().height // タイルマップの高さ、10　×　32 = 320
            );
        cc.log("タイルマップサイズ");
        cc.log("width:" + this.tiledMapSize.width + ", height:" + this.tiledMapSize.height); // タイルマップのサイズ

        let objects = this.tiledMap.getObjectGroup("myobjects").getObjects(); // 名前を指定してオブジェクトグループを取得

        for (let i = 0; i < objects.length; i++) { // オブジェクトグループに含まれるオブジェクトの数だけループ
            let curObject = objects[i]; // オブジェクトを取得

            let pos = cc.v2( // Cocos Creatorでの座標（マップの中心が原点の場合）を計算
                curObject.offset.x + curObject.width / 2 - this.tiledMapSize.width / 2, // マップの幅/2 オフセット
                this.tiledMapSize.height / 2 - curObject.offset.y - curObject.height / 2 // マップの高さ/2 オフセットし、正負逆転
                ); 

            switch (curObject.type) { // タイプ別に処理をする
                case 0: // 四角形、PointはどちらもType = 0
                    if (curObject.width == 0 && curObject.height == 0 ) { // Pointはサイズが0
                        cc.log("◆Point"); // オブジェクトの種類
                        cc.log("Tiled x:" + curObject.offset.x + ", y:" + curObject.offset.y); // Tiledのオブジェクトの座標
                        cc.log("Cocos x:" + pos.x + ", y:" + pos.y); // Cocos Creatorでのオブジェクトの座標（マップの中心が原点）
                    } else {
                        cc.log("◆四角形"); // オブジェクトの種類
                        cc.log("Tiled x:" + curObject.offset.x + ", y:" + curObject.offset.y); // Tiledのオブジェクトの座標
                        cc.log("Cocos x:" + pos.x + ", y:" + pos.y); // Cocos Creatorでのオブジェクトの中心座標（マップの中心が原点）
                        cc.log("width = " + curObject.width + ", height:" + curObject.height); // オブジェクトのサイズ
                    }
                    break;
                case 1: // 楕円形
                    cc.log("◆楕円形"); // オブジェクトの種類
                    cc.log("Tiled x:" + curObject.offset.x + ", y:" + curObject.offset.y); // Tiledのオブジェクトの座標
                    cc.log("Cocos x:" + pos.x + ", y:" + pos.y); // Cocos Creatorでの座標（マップの中心が原点）
                    cc.log("width = " + curObject.width + ", height:" + curObject.height); // オブジェクトのサイズ
                    break;
                case 2: // ポリゴン
                    cc.log("◆ポリゴン"); // オブジェクトの種類
                    cc.log("Tiled x:" + curObject.offset.x + ", y:" + curObject.offset.y); // Tiledのオブジェクトの座標
                    for (let j = 0; j < curObject.points.length; j++) { // ポリゴンの頂点の数だけループ
                        let pointPos =  cc.v2(curObject.points[j]); // 始点を原点とした各頂点の座標
                        cc.log("Tiled Point[" + j + "] x:" + pointPos.x + ", y:" + pointPos.y); // 始点を原点とした各頂点の座標
                     }

                    for (let j = 0; j < curObject.points.length; j++) { // ポリゴンの頂点の数だけループ
                       let pointPos =  cc.v2(curObject.points[j]).add(pos); // Cocos Creatorでの座標（マップの中心が原点）を取得
                       cc.log("Cocos Point[" + j + "] x:" + pointPos.x + ", y:" + pointPos.y); // Cocos Creatorでの各頂点の座標（マップの中心が原点）
                    }
                    break;
            }                      
            
        }
    }
}

『Node Tree』パネルで、『Canvas』ノードを選択
『Node Tree』パネルから、『Properties』パネルの『Main』コンポーネントの『Tiled Map』に『tiledmap』ノードをドラッグ

『Cocos Creator』で、『Simulator』でプレビューを実行
出力結果は下記のようになります。

Simulator: JS: タイルマップサイズ
Simulator: JS: width:640, height:320
Simulator: JS: ◆四角形
Simulator: JS: Tiled x:64, y:128
Simulator: JS: Cocos x:-224, y:0
Simulator: JS: width = 64, height:64
Simulator: JS: ◆Point
Simulator: JS: Tiled x:224, y:128
Simulator: JS: Cocos x:-96, y:32
Simulator: JS: ◆楕円形
Simulator: JS: Tiled x:320, y:96
Simulator: JS: Cocos x:48, y:16
Simulator: JS: width = 96, height:96
Simulator: JS: ◆ポリゴン
Simulator: JS: Tiled x:544, y:96
Simulator: JS: Tiled Point[0] x:0, y:0
Simulator: JS: Tiled Point[1] x:-64, y:-96
Simulator: JS: Tiled Point[2] x:64, y:-96
Simulator: JS: Cocos Point[0] x:224, y:64
Simulator: JS: Cocos Point[1] x:160, y:-32
Simulator: JS: Cocos Point[2] x:288, y:-32