ここまでの冒険を記録しますか？

長岡技大ソフトウェア開発サークルの開発ブログ

Tiled Map Editorの使い方

筆者：J

Tiled Map Editor とは

ゲームでよく使うMapを簡単に作るためのツール．
RPGのマップ・アクションゲームのステージ・ただの背景のどれにも使える．
インストールが必要．

Tiled Map Editorのサイト http://www.mapeditor.org/

記事中で使ったタイルセット http://opengameart.org/content/lpc-tile-atlas

  • 「タイルセット」と「マップチップ」は言葉の違いのみ．

f:id:NUT_SoftwareDevelopper:20150505230647j:plain

使い方

  • 起動
  • 「ファイル」→「新しいファイル」
    • タイルの出力形式をCSVに
    • マップの大きさを適当に

f:id:NUT_SoftwareDevelopper:20150505231439j:plain

  • 「マップ」→「新しいタイルセット」

    • パスにタイルセットに使う画像ファイルを指定．
    • 画像ファイルの設定に合わせてタイル幅，高さを指定．
      • 今回のタイルセット(base_out_atlas, terrain_atlas)は32px*32px
    • 複数枚のタイルセットを使っていい．

  • 「レイヤー」→「タイル・レイヤーの追加」

    • RPGのマップとして使うなら「床」・「オブジェクト」・「当たり判定」の3つは欲しい．必要に応じてイベントレイヤーなども加える．

  • あとはペイント感覚でペタペタする．

    • タイルセットはドラッグでまとめて選択できる．
    • ランダムモード，塗りつぶし，消しゴムが使える．

f:id:NUT_SoftwareDevelopper:20150505235848j:plain f:id:NUT_SoftwareDevelopper:20150506001112j:plain

  • 「ファイル」→「名前を付けて保存」

    • Tiledマップファイル(.tmx)形式で保存する．

  • 保存ファイルをプログラマ向けのテキストエディタで開く．メモ帳などでは改行形式が違うため適切に表示されない．

    • 自分はNotePad++をよく使う．

  • Sample.tmx の中身

<?xml version="1.0" encoding="UTF-8"?>
<map version="1.0" orientation="orthogonal" renderorder="right-down" width="12" height="12" tilewidth="32" tileheight="32" nextobjectid="1">
 <tileset firstgid="1" name="terrain_atlas" tilewidth="32" tileheight="32">
  <image source="terrain_atlas.png" width="1024" height="1024"/>
  <tile id="561">
   <objectgroup draworder="index">
    <object id="0" x="8" y="13" width="13" height="15"/>
    <object id="0" x="40" y="44"/>
   </objectgroup>
  </tile>
 </tileset>
 <tileset firstgid="1025" name="base_out_atlas" tilewidth="32" tileheight="32">
  <image source="base_out_atlas.png" width="1024" height="1024"/>
 </tileset>
 <layer name="床" width="12" height="12">
  <data encoding="csv">
514,515,516,514,515,516,514,515,516,514,515,516,
546,547,548,546,547,548,546,547,548,546,547,548,
578,579,580,578,579,580,578,579,580,578,579,580,
514,515,516,514,515,516,514,515,516,514,515,516,
546,547,548,546,547,548,546,547,548,546,547,548,
578,579,580,578,579,580,578,579,580,578,579,580,
514,515,516,514,515,516,514,515,516,514,515,516,
546,547,548,546,547,548,546,547,548,546,547,548,
578,579,580,578,579,580,578,579,580,578,579,580,
514,515,516,514,515,516,514,515,516,514,515,516,
546,547,548,546,547,548,546,547,548,546,547,548,
578,579,580,578,579,580,578,579,580,578,579,580
</data>
 </layer>
 <layer name="オブジェクト" width="12" height="12">
  <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,926,927,928,0,0,0,0,0,0,0,
0,0,958,959,960,0,0,0,0,0,0,0,
0,0,990,991,992,0,0,1277,1278,0,0,0,
0,0,1022,1023,1024,0,0,1309,1310,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,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>
 <layer name="当たり判定" width="12" height="12">
  <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,1019,1019,1019,0,0,0,0,0,0,0,
0,0,1019,1019,1019,0,0,0,0,0,0,0,
0,0,0,1019,0,0,0,0,1019,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,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>

  • 重要なのはtilesetタグ．

    • firstgidがそのタイルセットの左上のタイルのIDとなっている．
    • 1枚目のタイルセットが 1 から始まっている点に特に注意．
    • 2枚目以降は連番になっている．

  • あとは，dataタグの中身をコピペなりなんなりして使うことができる．

タイルセットの入手法

http://opengameart.org/ のサイトではゲーム用画像素材，音楽素材を投稿・配布している．
ライセンスは複数あるが，CC-BY,GPLを含むなら営利目的での利用も可能．(要精査)

お気に入りランキングでソートなどもできる．

http://opengameart.org/art-search-advanced?keys=&field_art_type_tid[]=9&field_art_tags_tid_op=and&field_art_tags_tid=&name=&sort_by=count&sort_order=DESC&items_per_page=24&Collection=

f:id:NUT_SoftwareDevelopper:20150505230654j:plain

黄色の丸の部分がライセンス．
赤い丸の部分がファイル．