tiledMapLoader.jsの使い方４〜複数のマップを読み込んで遷移させる

tiledMapLoader.jsはTiled Map Editorというソフトで作ったマップをenchant.jsで使えるようにするプラグインです。
この記事はtiledMapLoader.jsの解説です。

一回目はマップを読み込んで表示する方法。
二回目はマップに配置したオブジェクトの使い方。
三回目はマップに追加したオブジェクトにplayerが乗ったらhogehogeする方法をやりました。

今回できるようになること

複数のマップを読み込んで、マップの移動ができるようになります。
どうぞ、サンプルをダウンロードして、実行しながら読み進めてみてください。
それでは始めて行きましょう。

map1.tmxの作成

今回は複数のマップを使うのでmap1.tmxを作成します。
スクロールなしの20×20です。
マップの作り方はこちらを見てください。
マップを作り終わったら、「enterPoint1」という名前のオブジェクトを適当な位置に配置します。

隣のマップからこのマップに入ってきたときにplayerが出現する位置に使います。
オブジェクトの配置方法はこちらを見てください。

map0.tmxの編集

隣のマップへplayerを移動させるため、「goMap1」という名前のオブジェクトを適当な位置に配置します。

index.htmlの編集

先ほど作成したmap1.tmxを読み込めるようにします。

tiled.files = ['map0.tmx', 'map1.tmx'];

game.jsの編集

map1.tmxを読み込んだマップをenchant.jsで読み込みます。
複数のマップを読み込むのでcurrentMapとうい変数に現在のマップをつっこみます。
18行目

var map2 = new Map(tiled[1].map.tileheight, tiled[1].map.tilewidth);
map2.image = game.assets[tiled[1].image];
map2.loadData.apply(map2, tiled[1].background);
map2.collisionData = tiled[1].collision;

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

var currentMap = map;

playerが移動可能か判定するのにcurrentMapを使います。
67行目

if (this.vx || this.vy) {
  var x = this.x + (this.vx ? this.vx / Math.abs(this.vx) * 16 : 0) + 16;
  var y = this.y + (this.vy ? this.vy / Math.abs(this.vy) * 16 : 0) + 16;
  if (0 <= x && x < currentMap.width && 0 <= y && y < currentMap.height && !currentMap.hitTest(x, y)) {
	this.isMoving = true;
	arguments.callee.call(this);
  }
}

マップ遷移させる処理を書きます。
goMap1にplayerが乗ったらmap1.tmxで作ったマップに移動します。
78行目

map.addEventListener('enterframe', function () {
  if (player.isMoving) {
	return;
  }

  if (player.intersect(tiled[0].object.goMap1)) {
	var stage2 = new Scene();
	
	stage2.addChild(map2);
	stage2.addChild(player);
	stage2.addChild(foregroundMap2);

	currentMap = map2;

	player.x = tiled[1].object.enterPoint1.x - 8;
	player.y = tiled[1].object.enterPoint1.y - 16;
	
	game.pushScene(stage2);
	game.current.addChild(stage);
  }
});

こんな感じで複数のマップを読み込んで遷移させることができます。

おわりに

これで、tiledMapLoader.jsの基本的な使い方はすべて解説したと思います。
あとはあなたのアイディア次第です。
なにか気づいたことやわからないことがあったらコメントかTwitterで教えてください。