Tiled Map Editorの使い方

JavaScript

tiledMapLoader.jsを使ってenchant.jsでマップを表示させたい人向けの解説です。

用意するもの

  1. Tiled Map Editor
Tiled Map Editor

リンク先のページの右側のメニューから、自分が使っているOSのインストーラをダウンロードしてインストールする。
インストーラは日本語にも対応している。

マップを作る

Tiled Map Editorを起動して新しいマップを作成します。

タイルの大きさは16x16（そのままでOK）
マップの大きさは30x30に

レイヤーデータの保持方法をCSVに設定する

編集＞設定＞レイヤーデータの保持方法をCSVに設定する

タイルセットを追加する

RPGのサンプルのmap1.gifをpngに変換して、
マップ＞新しいタイルセットに追加する
map1.png

ポチポチとマップを作る

右下のタイルセットウィンドウから、塗る画像を選んでひたすら地道にぽちぽちやります。


タイルレイヤーを追加して木を生やす

右のレイヤーウィンドウでタイルレイヤを追加します。
レイヤーウィンドウでチェックを外し、非表示にしていると、ゲーム上でも表示されません。（後述する前景レイヤーも同じ）

マップの外周に木を生やします。
下に生えている木の上半分はあとから別のレイヤに追加します。


前景レイヤを追加する

タイルレイヤーを追加し、レイヤー名を「foreground」にします。
レイヤー名が「foreground」で始まるレイヤーは、プレーヤーより手前に表示されます。

前景レイヤーに先ほどした半分しかなかった木の上半分を追加します。

当たり判定を追加する

タイルレイヤーを追加し、レイヤー名を「collision」にします。
「collision」という名前のレイヤーに配置した画像は、どの画像でも当たり判定ありになります。
collisionレイヤーに配置した画像はゲーム上で表示されません。
つまり、プレイヤーが通れないところは「collision」という名前のレイヤーを作ってなにか塗ればいいということです。
レイヤーウィンドウでチェックを外し、非表示にしていても当たり判定は有効になります。

保存する

適当な名前をつけて保存