Hatena::ブログ(Diary)

1488

2011-11-20

Tiled Map Editorの使い方

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

用意するもの

  1. Tiled Map Editor

Tiled Map Editor

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

マップを作る

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

タイルの大きさは16x16(そのままでOK)
マップの大きさは30x30に
f:id:tetsuroh:20111118140538j:image

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

編集>設定>レイヤーデータの保持方法をCSVに設定する
f:id:tetsuroh:20111118140539j:image

タイルセットを追加する

RPGのサンプルのmap1.gifpngに変換して、
マップ>新しいタイルセットに追加する
map1.png
f:id:tetsuroh:20111118140540j:image

ポチポチとマップを作る

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

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

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

マップの外周に木を生やします。
下に生えている木の上半分はあとから別のレイヤに追加します。
f:id:tetsuroh:20111118140544j:image:w360
f:id:tetsuroh:20111118140545j:image:w360

前景レイヤを追加する

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

前景レイヤーに先ほどした半分しかなかった木の上半分を追加します。
f:id:tetsuroh:20111118143815j:image:w360

当たり判定を追加する

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

保存する

適当な名前をつけて保存

hhhhhh 2015/12/29 00:59 これ複数画像を読み込んだら
出力されるIDがぐちゃぐちゃになりますよ

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証