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

モーリーのメモ

プログラミングやCG作成等、アプリ開発を中心に情報を収集中!

タイルマップ(Tiled)でステージを作成!:Cocos Creator

 タイルマップとは、
 下図のような色々なパターンのタイルを並べて、
f:id:mmorley:20160519214336p:plain:w400
 マップやステージを作成したものです。
f:id:mmorley:20160519215403p:plain:w400
 タイルのパターンのセットは、タイルセットとかマップチップとか呼ばれます。素材配布サイト等で有償/無償で入手出来ます。
 
 タイルセットからマップを作るためのエディタもあります。
f:id:mmorley:20160519221945p:plain:w500
 ↑これは、Tiledというエディタです。
 無償で使えます。(寄付は募っています。)
 Tiledのファイル形式(.tmx)は、Cocos Creatorでサポートされています。
 Cocos Creatorで、作成したマップを読み込んで、配置したオブジェクトの位置情報等を取得出来ます。
 マップエディタで配置したコインの位置を取得する、とかです。
  
 以前、Cocos Studio2でも使用しました。
 こちらの記事です。
mmorley.hatenablog.com
 
 Tiledの使い方と、Cocos Creatorへタイルマップを読み込む方法をまとめました。
 Cocos Creatorへの読み込み方が他のコンポーネントと違い特殊です。

使用環境

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

  • Mac OS X El Capitan Version 10.11.4
  • Tiled Versio 0.16.1
  • Cocos Creator Version 1.0.3
  • ブラウザ:Google Chrome Version 50.0.2661.102 (64-bit)

Tiledの入手

 Tiledは下記のサイトでダウンロード出来ます。
thorbjorn.itch.io
 ページの中程辺りの『Download』をクリックします。
 f:id:mmorley:20160520104542p:plain
 寄付を募る画面が出ます。ダウンロードだけする場合は、
 『No thanks, just take me to the downloads』
 をクリックします。
 『tiled-0.16.1.dmg』がダウンロードされるので、ダブルクリックでマウントし、『Tiled』をアプリケーションフォルダにドラッグ&ドロップします。

タイルセットの入手

 今回は、下記で入手したタイルセットを使用します。
opengameart.org
 このタイルセットは、クレジットを表記すれば商用にも使えるみたいです。
 『CuteSistersGFX.zip』というファイルをダウンロードして、解凍します。

捕捉

 このサイトでは色々な素材が配布されています。
 Homeから探せます。
 ライセンス形態は、素材ごとに異なるので確認して下さい。

タイルマップの作成手順

 Cocos Creatorの新規プロジェクト(HelloWorld)でタイルマップを使用します。
 タイルセットの画像ファイルが『assets』フォルダ以下に含まれている必要があります。

Cocos Creatorで新規プロジェクトを作成

  1. Cocos Creatorを起動
  2. 『New Project』の『Hello World』を選択し、プロジェクトの保存場所を設定して『Create』をクリック

タイルセットをassetsフォルダに追加

  1. ダウンロード→解凍した『CuteSistersGFX』フォルダの下記のファイルを『Assets』パネルの『assets/Texture』フォルダにドラッグ&ドロップ
    • 『CuteSistersGFX/Land Objects/LevelObjectTiles.png

Tiledでタイルマップを新規作成


記事を修正しました。

  • 2016.06.10:追記
     タイルの出力形式に"CSV"を選ぶと、iOSシミュレータではアプリが起動出来ませんでした。
     Base64(未圧縮)、Base64(zlib圧縮)、Base64gzip圧縮)、XMLiOSシミュレータで起動出来ました。
     既存のファイルは、メニューの『マップ』-『マップのプロパティ』から変更出来ます。Base64gzip圧縮)、XMLはそこで選択出来ます。


  1. Tiledを起動
  2. 画面上部の『新しいファイルf:id:mmorley:20160519232315p:plain』ボタンをクリック
  3. 下図の用に設定し、『OK』をクリック
    f:id:mmorley:20160610102553p:plain:w350

タイルセットを読み込む

  1. 『新しいタイルセット』ボタンをクリック
    f:id:mmorley:20160520105829p:plain:w250
  2. 『参照』ボタンをクリックして、作成した『Cocos Creator』のプロジェクトフォルダの『assets/Texture/LandLevelObjectTiles.png』を指定し、『OK』をクリック
    f:id:mmorley:20160520173502p:plain:w350

マップの作成

  1. タイルセットで『LevelObjectTiles』の下図のタイルを選択
    f:id:mmorley:20160520174402p:plain:w250
  2. 画面上部の『塗りつぶしf:id:mmorley:20160519234555p:plain』を選択し、マップ内をクリックして塗りつぶす
  3. タイルセットで『LevelObjectTiles』の下図のタイルを選択
    f:id:mmorley:20160520174846p:plain:w250
  4. 画面上部の『スタンプf:id:mmorley:20160519235833p:plain』を選択して、下図のようにマップを塗ります。
    f:id:mmorley:20160520175903p:plain:w450
    クリックやドラッグで塗ったり、『範囲選択f:id:mmorley:20160520180347p:plain』で選択して塗りつぶしたりして下さい。

タイル・レイヤーの名前を変更

  1. タイル・レイヤーの名前をダブルクリックし、"map1"に変更
    f:id:mmorley:20160520115745p:plain:w250

オブジェクト・レイヤーの追加

  1. 『レイヤー追加ボタン』-『オブジェクト・レイヤーの追加』をクリック
    f:id:mmorley:20160520120504p:plain:w250
  2. 追加されたオブジェクト・レイヤーの名前を"object1"に変更

オブジェクトの追加

 object1(オブジェクト・レイヤー)を選択した状態で作業します。
 尚、再度マップを塗る時は、map1(タイル・レイヤー)を選択します。

  1. Tiledのメニューの『表示』-『吸着グリッド』にチェックを入れる
  2. 『四角形を追加f:id:mmorley:20160520132824p:plain』ボタンを選択し、地面とブロックをそれぞれ囲む
    作成された四角の枠がオブジェクトです。
    f:id:mmorley:20160520183644p:plain:w450
  3. オブジェクトビューで、オブジェクトに名前を付ける
    f:id:mmorley:20160520135752p:plain:w250

タイルマップファイル(.tmx)の保存

  1. Tiledのメニューの『ファイル』-『ファイル名を付けて保存...』をクリック
    f:id:mmorley:20160520140129p:plain:w250
  2. Cocos Creatorのプロジェクトフォルダの『assets/Texture』フォルダ内に"stage"という名前で保存

Cocos Creatorでのタイルマップの利用方法


  • 2016.06.02:追記

 Cocos Creator Version 1.1.0では、TiledMapコンポーネントにMap Loadedのプロパティがなくなりました。
 onLoad関数が呼び出された時にはマップデータを取得済みになったので、下記のようにタイルマップの読み込み処理だけを別にしなくても良くなりました。



 作成したタイルマップをCocos Creatorに読み込みます。

HelloWorldスクリプトの編集

  1. Assetsパネルで『assets/Script/HelloWorld』をダブルクリックして開き、下記のコードに書き換える
    cc.Class({
    extends: cc.Component,

    properties: {
    stage: { // タイルマップ
    default: null,
    type: cc.TiledMap,
    },
    },

    // 初期化処理
    onLoad: function () {

    },

    // タイルマップロード時の処理
    onMapLoaded: function(){
    // タイルマップコンポーネントからオブジェクトグループ(レイヤー)を取得
    var objectGroup = this.stage.getObjectGroup("object1");
    // 取得できない場合は、処理を抜ける
    if(objectGroup === null) return;
    // オブジェクトグループからオブジェクトを取得
    var objects = objectGroup.getObjects();
    // オブジェクトの数だけループ
    for(let i = 0; i < objects.length; i++){
    // オブジェクトのプロパティをログに出力
    cc.log("Name: " + objects[i].name
    + ", x:" + objects[i].x
    + ", y:" + objects[i].y
    + ", width:" + objects[i].width
    + ", height:" + objects[i].height);
    }
    },

    // 周期処理
    update: function (dt) {

    },
    });

Canvasノードにstageを追加

  1. Assetsパネルの『assets/Texture/stage』をドラッグして、Node Treeパネルのサブノードとして追加
    f:id:mmorley:20160520220355p:plain:w250

HelloWorldコンポーネントにstageを登録

  1. Node TreeパネルでCanvasノードを選択
  2. Node Treeパネルのstageノードを、PropertiesパネルのHello WorldコンポーネントのStageに登録
    f:id:mmorley:20160520220704p:plain:w500

StageノードのTileMapコンポーネントの設定

  1. Node Treeパネルでstageノードを選択
  2. PropertiesパネルのTiledMapコンポーネントを下図のように設定
    f:id:mmorley:20160520222204p:plain

 
 設定は以上です。

プレビュー実行

 ブラウザ(chrome)で、プレビュー実行します。
 起動したページで、キーボードの『option + control + i』を押して、デベロッパーツールを起動します。
 Consoleで下記のログが確認できました。
f:id:mmorley:20160520231035p:plain

タイルセットのクレジット

 今回使用したタイルセット用画像のクレジットです。
 Graphics by "Master484" – "Cute Platformer Sisters"(2015) / CC BY 3.0

捕捉

タイル選びに注意

 タイルによっては、下図のようになります。
 f:id:mmorley:20160520233317p:plain:w500
 Cocos Creatorで実行すると
 f:id:mmorley:20160520233333p:plain:w500
 隣のタイルが割り込んじゃっています。
 なので、手順内では上下左右のタイルが影響なさそうなタイルを選びました。
 f:id:mmorley:20160520174402p:plain

複数のタイルセットは未対応

 Tiledでは複数のタイルセットを使用して、組み合わせてマップを作れますが、Cocos Creator側では片方のタイルシートのタイルしか読み込まれませんでした。

タイルマップの読み込みは後


  • 2016.06.02:追記

 Cocos Creator Version 1.1.0では、TiledMapコンポーネントにMap Loadedのプロパティがなくなりました。
 onLoad関数が呼び出された時にはマップデータを取得済みになりました。。



 タイルマップはHelloWorldスクリプトのonLoad()が実行された時点では、まだ読み込まれていません。
 なので、onLoad()内でthis.stageを処理しようとしてもnullです。
 手順に書いたように、読み込まれた時に実行する関数をTileMapコンポーネントに登録します。
 周期処理で読み込み待ち等をしないとだめですね。

あとがき

 捕捉に書いた内容がハマった箇所ですね。
 タイルマップを上手く使えば、ステージの作成が楽になりそうです。