tiledMapLoader.jsの使い方 １ （全３回予定）

JavaScript

tiledMapLoader.jsはTiled Map Editorというソフトで作ったマップをenchant.jsで使えるようにするプラグインです。
こんなやつ
http://9leap.net/games/966

できること

  • Tiled Map Editorで作ったマップを読み込む
  • マップ上にオブジェクトを配置する（←これはTiled Map Editorの機能）
    • マップ上に配置したオブジェクトの位置にプレイヤーをセットする。
    • マップ上に配置したオブジェクトとプレイヤーが接触したらメッセージを表示する。
    • オブジェクトにはプロパティとバリューを追加でき、これをゲーム上で参照できる。

使い方

これをダウンロードします。tiledMapLoader
ファイル一式入ってます。

マップを作ろう

Tiled Map Editorの使い方を見てください。

注意するポイントは

  • foregroundで始まる名前のレイヤーが前景になる（複数でも可）
  • collisionという名前のレイヤーが当たり判定になる（一枚のみ）
  • レイヤーウィンドウで非表示にしたレイヤは読み込まれない
  • collisionは非表示でも有効になる
  • タイルセットは一つのマップに一枚のみ（複数のタイルセットを使いたいときは一枚の画像にしておく）

です。

ゲームにマップを表示させよう

index.html

さっきダウンロードしたtiledMapLoader.zipを解凍して、index.htmlを編集します。
tiledMapLoader.jsを読み込みます。
必ずgame.jsより後に読み込んでください。*1

<script type="text/javascript" src="game.js"></script>
<script type="text/javascript" src="tiledMapLoader.js"></script>
<script type="text/javascript">
  //読み込むファイルを指定する
  tiled.files = ['map0.tmx'];
  //複数のファイルの時は
  //tiled.files = ['map0.tmx','map1.tmx','map2.tmx'];
</script>
game.js

game.jsを編集します。
game.preloadからvar playerの前までを書き換えます。

game.preload(tiled[0].image, 'chara0.gif');
game.onload = function() {
  var map = new Map(tiled[0].map.tileheight, tiled[0].map.tilewidth);
  map.image = game.assets[tiled[0].image];
  map.loadData.apply(map, tiled[0].background);
  map.collisionData = tiled[0].collision;

  var foregroundMap = new Map(tiled[0].map.tileheight, tiled[0].map.tilewidth);
  foregroundMap.image = game.assets[tiled[0].image];
  foregroundMap.loadData.apply(foregroundMap, tiled[0].foreground);

動作確認はfirefoxで

index.htmlとgame.jsを保存したら、index.htmlをfirefoxで開いて動作確認してください。*2

次回予告

おつかれさまでした。
次は、Tiled Map Editorのオブジェクトレイヤーを使って、プレイヤーが最初に現れる位置をマップで指定する方法を紹介します。
書きました↓
tiledMapLoader.jsの使い方 ２ 〜マップからプレイヤーの初期位置を指定する

おまけ（おまけ？）

tiledMapLoader.jsが使っているtiledという名前を変えたいとか、その名前すでにプログラム中に使ってるんですけどという場合の名前の変え方。
tiledMapLoader.jsの最後の一行

//これを
})(this, 'tiled');
//こうするだけで
})(this, 'yourNamespace');
//こうなります
game.preload(yourNamespace[0].image, 'chara0.gif');

*1:マップを読み込んでいる間にゲームの初期化処理が始まってしまうのを防ぐために、ゲームの初期化処理を一旦止めておく必要があるため

*2:XMLHttpRequestでローカルのマップを読み込んでいるため、Chromeだと怒られます。サーバーに上げれば問題ありません