モーリーのメモ

アプリ開発等(プログラミング、CG作成)、興味を持ったことを実践してまとめるブログです。

モーリーのメモ

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

<今回やること!>

  • 『Tiled』マップエディターで、タイルマップを作成します。
    見た目の作成だけでなく、オブジェクトの配置も行います。
  • 作成したタイルマップをCocos Creatorで読み込みます。
    配置したオブジェクトのデータを読み込みます。
 
 タイルマップとは、タイルセットやマップチップと呼ばれる色々なパターンのタイルを並べて、ゲームのステージやマップを作成したものです。
  • タイルセット(マップチップ)
    f:id:mmorley:20160519214336p:plain:w400
  • タイルマップで作成したステージ
    f:id:mmorley:20160519215403p:plain:w400
 1枚絵を使用するよりも使用する画像サイズが小さく、同じタイルセットで様々なパターンのマップが作成出来ます。タイルセットは素材配布サイト入手可能で、有償のものも無償のものもあります。
 
 『Tiled』は、タイルセットからマップを作るためのエディタです。
    f:id:mmorley:20160519221945p:plain:w500
 無料で使用可能です。(寄付は募っています。)MacWindowsLinux版が配布されています。
 
 『Tiled』のファイル形式『.tmx』は、Cocos Creatorでサポートされています。
 『Tiled』で配置したオブジェクトの位置、形状、サイズ等のデータをCocos Creatorで容易に扱うことが出来ます。
 
 『Tiled』の使い方と、Cocos Creatorへタイルマップを読み込む方法をまとめました。

使用環境

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

Tiledの入手

  1. 下記のサイトを開く
    thorbjorn.itch.io
  2. ページの中程辺りの『Download』をクリック
    f:id:mmorley:20160520104542p:plain
    寄付を募る画面が出ます。
  3. ダウンロードだけする場合は、『No thanks, just take me to the downloads』をクリック
  4. 『Download』をクリック
    『tiled-macos.zip』がダウンロードされます。
    f:id:mmorley:20190523205229p:plain
  5. 『tiled-macos.zip』をダブルクリックして、マウント
  6. 『Tiled』をアプリケーションフォルダにドラッグ&ドロップ
  7. 『Tiled』を右クリックし、『開く』をクリック
    セキュリティの設定によっては、初回起動時に実行許可が必要です。
  8. 『開く』をクリック
    f:id:mmorley:20190523204507p:plain

タイルセットを入手

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

タイルマップを作成

  1. 『Tiled』で、『ファイル』→『新規』→『新しいマップ』をクリック
    f:id:mmorley:20190523213602p:plain:w400
  2. 下図の設定で、『ファイル名をつけて保存』をクリック
    f:id:mmorley:20190523223941p:plain:w400
    タイルの出力形式はどれでもCocos Creatorで読み込むことが出来ました。
    タイルの出力形式ファイルサイズ(byte)Cocos Creatorの読込可否
    XML7,130OK
    Base64(未圧縮)2,961OK
    Base64gzip圧縮)1,011OK
    Base64(zlib圧縮)979OK
    CSV1,814OK
  3. 『Tiled map file(*.tmx *.xml)』形式を選択し、任意のファイル名を付けて『Save』をクリック
    f:id:mmorley:20190524073125p:plain:w500
  4. 『新しいタイルセット』をクリック
    f:id:mmorley:20190524074503p:plain:w500
  5. 『参照』をクリックし、保存しておいたタイルセットを選択して『ファイル名をつけて保存』をクリック
    f:id:mmorley:20190524082553p:plain:w400
  6. ファイル名を付けて『Save』をクリック
    『Tiled tileset files(*.tsx *.xml)』ファイルが保存されます。
  7. 『tiledmap.tmx』のタブをクリック
  8. タイルマップ全体を塗りつぶす
    f:id:mmorley:20190524112449p:plain:w500
  9. 地面を範囲指定で塗りつぶす
    f:id:mmorley:20190524125039p:plain:w500
  10. スタンプで塗る
    f:id:mmorley:20190524155807p:plain:w500
  11. 別のパターンのタイルをスタンプで塗り、レイヤー名をダブルクリックして"ground"に変更
    f:id:mmorley:20190524160726p:plain:w500
  12. 『新しいレイヤー』→『Tile Layer』をクリックし、レイヤー名をダブルクリックして"grass"に変更
    f:id:mmorley:20190524162843p:plain:w500
  13. 『grass』レイヤーに葉っぱのタイル塗る
    葉っぱのタイルは透過部分があるので、『ground』レイヤーの上に『grass』レイヤーを作ってから塗っています。
    f:id:mmorley:20190524162548p:plain:w500

オブジェクトを追加

  1. 『新しいレイヤー』→『Object Layer』をクリックし、レイヤー名をダブルクリックして"myobjects"に変更
    f:id:mmorley:20190524205902p:plain:w500
  2. 『myobjects』レイヤーに、下図のようにオブジェクトを配置
    f:id:mmorley:20190525142932p:plain
  3. 『⌘(command) + s』を押してタイルマップを保存

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

  1. 『Empty』プロジェクトを作成
  2. プロジェクトの構成ファイル等を追加
    • 『Cocos Creator』のエディタのメニューで『Cocos Creator』→『Developer』→『VS Code Workflow』→『install VS Code Extension』をクリック
      f:id:mmorley:20190516093649p:plain
    • 『Cocos Creator』のエディタのメニューで『Developer』→『VS Code Workflow』→『Update VS Code API Source』をクリック
      f:id:mmorley:20190516094117p:plain
    • 『Cocos Creator』のエディタのメニューで『Developer』→『VS Code Workflow』→『Add Chrome Debug Setting』をクリック
      f:id:mmorley:20190516144458p:plain
    • 『Cocos Creator』のエディタのメニューで『Developer』→『VS Code Workflow』→『Add Compile Task』をクリック
      f:id:mmorley:20190516144827p:plain
    • 『Cocos Creator』のエディタのメニューで『Developer』→『VS Code Workflow』→『Add Type Script Config』をクリック
      f:id:mmorley:20190516145223p:plain
  3. 『Assets』パネルで、『+』→『Scene』をクリック
  4. 追加したシーンをダブルクリックして名前を"Main"にする
  5. 『Assets』パネルで、『+』→『TypeScript』をクリック
  6. 追加したスクリプトをダブルクリックして名前を"Main"にする
  7. 『Assets』パネルに、『Tiled』で作成した下記のファイルをドロップして追加f:id:mmorley:20190525152738p:plain
  8. 『Assets』パネルで、『Main』シーンをダブルクリックして開く
  9. 『Assets』パネルから『Node Tree』パネルの『Canvas』ノードに、『tilemap』をドラッグして追加
    f:id:mmorley:20190525153907p:plain
  10. Canvas』ノードをクリック
  11. 『Properties』パネルで、『Desine Resolution』を『W:640 H:320』にする
  12. 『Properties』パネルで、『Add Component』→『Custom Component』→『Main』をクリック
    f:id:mmorley:20190525153435p:plain
  13. 『Assets』パネルで、『Main』スクリプトをダブルクリックして開く
  14. 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;
                }                      
                
            }
        }
    }
    

  15. 『Node Tree』パネルで、『Canvas』ノードを選択
  16. 『Node Tree』パネルから、『Properties』パネルの『Main』コンポーネントの『Tiled Map』に『tiledmap』ノードをドラッグ
    f:id:mmorley:20190525221602p:plain:w500
  17. 『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
    

    f:id:mmorley:20190525225313p:plain

あとがき

 2019年5月25日に記事を全面的に書き直しました。
 今回使用したタイルセットは、Cocos2d-xで以前からあるデモ(チュートリアル)のParkourゲームのものを使用しました。元のリンクも貼っておきます。

 コンソールに『cocos2d: TMXFormat: Unsupported TMX version: 1.2』と出力されますが、今の所問題は確認出来ていません。
 下記のサイトは改定前に利用していたタイルセットの配布サイトです。利用する際には使用条件にお気を付け下さい。