TiledMapEditorの使い方

投稿者: | 2013年8月1日

スクリーンショット 2013-07-20 10.38.22

■はじめに

マルチプラットフォームで動作するレベルエディタ「TiledMapEditor」の使い方を紹介したいと思います。

RPGのマップはもとより、パズルゲームのマップやSTGの敵の配置情報、当たり判定ツールなど色々な使い方ができるツールです。

■基本的な使い方

ここでは、

  1. 新規作成・レイヤーの作成
  2. タイルセットの読み込み
  3. タイルの配置
  4. マップデータの出力

という基本的な使い方を紹介します。スクリーンショットはMac版となっていますが、Windows版でも操作は大きく変わらないと思います。

▼1.新規作成・レイヤーの作成

まずはマップの新規作成です。TiledMapEditorを立ち上げて、「ファイル>新しいファイル」を選択します。

001

新規作成ダイアログが表示されるので、

002

  • 「マップ:種類」を「□が並んだマップ」
  • 「マップの大きさ:幅」を「20タイル」
  • 「マップの大きさ:高さ」を「15タイル」
  • 「タイルの大きさ:幅」を「32px」
  • 「タイルの大きさ:高さ」を「32px」

とします。

これらの設定の説明ですが、1つのマップチップの大きさを「32×32」としています。そして、そのチップを「20×15」で配置できるようにしています。ですのでマップ全体のサイズは、

  • 幅:32px * 20タイル = 640px
  • 高さ:32px * 15タイル = 480px

となります。OKボタンを押すと、レイヤーウィンドウのところに「タイル・レイヤー1」というLayerが追加されます。

003

レイヤーウィンドウが表示されていなければ、「表示>レイヤー」にチェックが入っているかどうか確認します。

006

もしくは、レイヤーウィンドウのレイヤータブが選択されているかどうかですね。

006_2

あと、グリッドが表示されていると便利なので、表示を有効にしましょう。メニューから「表示>グリッドの表示」を選択します。

004

005

そうするとこんな感じでグリッド表示が有効になります。

▼2.タイルセットの読み込み

続いてタイルセットを読み込みます。

32×32のタイルセットになっていれば何でもいいのですが、今回はこれを使うことにします。

enemy

右クリックで「名前をつけて画像を保存」で保存します。保存ができたらタイルセットを読み込みます。メニューから「マップ>新しいタイルセット」を選びます。

007

008 2

新しいタイルセット画面が表示されるので、

  • 名前:map1
  • 画像:参照ボタンを押して「enemy.bmp(上で保存した画像)」を選択
  • 「透過色を設定する」にチェックを入れる。色のボタンを押す

と設定します。

009 2

透過色は、(R,G,B)=(0,255,0)を有効にします。

OKボタンをおしてタイルセットを作成すると、タイルセットウィンドウに読み込んだ画像が表示されます。

010

▼3.タイルの配置

011 2

タイルの配置はタイルウィンドウから配置したタイルを選択して、グリッド上の任意の部分をクリックします。クリックしても配置されない場合は、メニューアイコンの「スタンプ」をクリックします。

012 2

配置したタイルを消す場合には、メニューアイコンの「消しゴム」をクリックすると消すことができます。

▼4.マップデータの出力

マップデータを出力するには、メニューから「ファイル>名前をつけてエクスポート」を選択します。

020

出力ダイアログからは色々なフォーマットが選択できます。

  • DroidCraftマップファイル:MinecraftのAndroid版であるDroidCraftで使用する形式で出力
  • Flareマップファイル:オープンソースのRPG「Flare」で使用する形式で出力
  • jsonファイル:JavaScriptにおけるオブジェクトの表記形式で出力
  • Luaファイル:組み込みスクリプト言語であるLua形式で出力する
  • Replica Islandマップファイル:Androidのオープンソースアクションゲームで使用する形式で出力

自作ゲームで使う場合は、jsonやLuaが妥当なところでしょうか。

例えばjson形式で出力した場合はこのようなデータとなります。

{ "height":15, // マップの大きさ(幅)
 "layers":[ // レイヤー配列
        {
         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, ...], // マップデータ(横に長いので省略)
         "height":15, // マップの大きさ(幅)
         "name":"layer1", // レイヤー名
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":20, // マップの大きさ(高さ)
         "x":0,
         "y":0
        }],
 "orientation":"orthogonal",
 "properties":
    {

    },
 "tileheight":32,
 "tilesets":[
        {
         "firstgid":1,
         "image":"test¥/enemy.bmp",
         "imageheight":128,
         "imagewidth":512,
         "margin":0,
         "name":"map1",
         "properties":
            {

            },
         "spacing":0,
         "tileheight":32,
         "tilewidth":32,
         "transparentcolor":"#00ff00"
        }],
 "tilewidth":32,
 "version":1,
 "width":20 // マップの大きさ(高さ)
}

通常必要な情報はコメントを書いた部分くらいかと思います。これらの情報をうまく抜き出して、ゲーム内でマップを表示したり敵を配置したりします。あとjsonのパーサーですが、C++であれば「picojson」など色々なパーサーを試してみるのがいいと思います。

■おまけ:CSVでの出力

「jsonやLuaのパーサー作るのメンドイ! 何か簡単にマップ読み込むことは出来ないの?」

というあなたのために、CSVでの出力方法もまとめておきます。ただこの設定はマップの新規作成をする前に、設定しておく必要があります。Macであれば、メニューから「Tiled>Preferences…」を選択すると設定画面が表示されます。

csv

レイヤーデータの保存方式を「CSV」に設定します。

あとは、普通にマップを保存すれば、

<?xml version="1.0" encoding="UTF-8"?>
<map version="1.0" orientation="orthogonal" width="20" height="15" tilewidth="32" tileheight="32">
 <tileset firstgid="1" name="map1" tilewidth="32" tileheight="32">
  <image source="kenmo/pygame/doc/temp/enemy.bmp" trans="00ff00" width="512" height="128"/>
 </tileset>
 <layer name="タイル・レイヤー 1" width="20" height="15">
  <data encoding="csv"> // ここからマップデータ
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
// 省略
</data>
 </layer>
</map>

というように、tmxファイルにマップデータCSV形式で保存されることになります。

(※ただしこれでも、XMLファイルとCSVファイルのパースが必要となるのですけれども……)