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

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

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

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

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