CoffeeScriptってなに?

CoffeeScriptはJavaScriptにコンパイルできるプログラム言語です。
CoffeeScriptを使うにはNode.jsが必要です。
インストール方法とかはこの記事が分かりやすいです。
naveを使う方法がおすすめです。
Ubuntu 11.04 Natty Narwhal に Node と npm をインストールAdd Star
CoffeeScriptのインストール

AptanaでCoffeeScriptを保存するたびにコンパイルする

Aptana Studioの左上にある端末のアイコンから端末を開いて

$coffee -wc test.coffee

って打ち込むと、保存するたびにtest.coffeeをコンパイルしてtest.jsを吐き出してくれるます。

test.coffeeとtest.jsのエディタを並べて表示すると、CoffeeScriptがどんなJavaScriptにコンパイルされるのかすぐに見れてなかなかナイスです。

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で教えてください。

tiledMapLoader.jsの使い方 ３ 〜マップにイベントを配置する

tiledMapLoader.jsはTiled Map Editorというソフトで作ったマップをenchant.jsで使えるようにするプラグインです。
この記事はtiledMapLoader.jsの解説です。
全三回のつもりでしたがこれプラスあと一回の全四回になりそうです、はい。

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

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

マップにイベントを配置できます。
マップの中の特定の場所にプレイヤーが移動したらメッセージを表示したりするアレですね。
と、言っても、二回目の応用です。

map0.tmxの編集

Tiled Map Editorでmap0.tmxを開いて、オブジェクトを配置します。

オブジェクトを右クリック→オブジェクトのプロパティをクリック

名前を「eventArea1」にします。<新しいプロパティ>と書いてあるところをぽちぽちっとクリックして、
名前を「message」に、値を「イベントエリアに入りました」にします。
OKを押して保存してマップの編集は終了

game.jsの編集

playerのintersectメソッドを使ってイベントエリアに入ったか判定する

player.addEventListener('enterframe', function() {の次の行に以下のif文を挿入し、保存します。

  if ( player.intersect(tiled[0].object.eventArea1) ) {
    document.title = tiled[0].object.eventArea1.message;
  }

動作確認

index.htmlをfirefoxで開いて、さっき配置したイベントエリアに移動すると・・・
メッセージがウィンドウのタイトルに表示されました。

今回はここまで。

<新しいプロパティ>について（補足的なもの）

名前は、JavaScriptでオブジェクトのプロパティ名に使えるものなら何でも平気です。
値は、parseFloatしてNaNならStringに、そうでないならNumberになります。

value = isNaN(parseFloat(value))? value: parseFloat(value);

次回予告

次は、いよいよ複数のマップを読み込んでほげほげします。

tiledMapLoader.jsの使い方 ２ 〜マップからプレイヤーの初期位置を指定する。

Tiled Map Editorで作ったマップをenchant.jsで読み込むtiledMapLoader.jsの使い方、第二回目です。
第一回はこちら

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

• マップからプレイヤーの初期位置を指定できるようになります

前回のおさらい

前回までで、Tiled Map Editorで作ったマップを表示することは出来ました。
が、しかし！
島から出られない・・・

というわけで、プレイヤーのスタート位置を変えてしまいましょう。
もちろんマップを使って。

マップを編集

オブジェクトを配置する

Tiled Map Editorでマップを開いて、
オブジェクトレイヤーを追加します。

追加したオブジェクトレイヤーをアクティブにして、ツールバーの「オブジェクトを追加」をクリックします。

ここだ！ってところをクリックしてマップにオブジェクトを配置します。

オブジェクトを移動したり、リサイズする手順

1. オブジェクトレイヤーをアクティブにする
2. ツールバーの「オブジェクトを選択」をクリック
3. マップ上のオブジェクトをドラッグしたりリサイズしたり

オブジェクトのプロパティを編集する

オブジェクトを右クリックして、「オブジェクトのプロパティ」をクリック。
名前を、「playerStartPoint」に変えます。

OKをクリックして保存したらマップの編集は完了

game.jsを編集

playerの初期位置をマップに追加したオブジェクトから指定

player.x = tiled[0].object.playerStartPoint.x - 8;
player.y = tiled[0].object.playerStartPoint.y - 16;

これだけ！
保存したらfirefoxで動作確認。

いいですね！

おまけ、というか補足

マップに追加したオブジェクトが持っているプロパティ

デフォルトで持っているのは以下の４つだけです

tiled[0].object.playerStartPoint.x;//px
tiled[0].object.playerStartPoint.y;//px
tiled[0].object.playerStartPoint.width;//px
tiled[0].object.playerStartPoint.height//px

デフォルトで、と言うことは追加できるの・・・？それは次回です！

次回予告

次回は、マップ上に追加したオブジェクトにプレイヤーが乗っかったらイベントを発生させる方法を解説します。
書きました↓
tiledMapLoader.jsの使い方 ３ 〜マップにイベントを配置する

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

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だと怒られます。サーバーに上げれば問題ありません

プロトタイプベースの継承とコンストラクタ

JavaScriptのコンストラクタとか継承とかわからないなりにまとめ。

人間のトムとミュータントのケンをJavaScriptで表現してみるよ。

//人間
var Human = function(name, age){
	this.name = name;
	this.age = age;
	this.type = 'Human';
};

//人間は、聞いたら自分のことを紹介してくれるよ
Human.prototype.showStatus = function(){
	var str = '';
	for(var i in this)if(this.hasOwnProperty(i)){
		 str += i + ' = ' +this[i] + '\n';
	}
	alert(str);
};
//トムはtomって名前の17歳の人間だよ
var tom = new Human('tom', 17);

//ミュータント
function Mutant(name, age, skill){
	Human.call(this, name, age);//人間としての名前と年齢
	this.type = 'Mutant';
	this.skill = skill;//ミュータントのスキル
};

//ミュータントも人間だからHumanクラスを継承するよ
Mutant.prototype = new Human;

//ケンはkenって名前で19歳ですごい必殺技を持ってるよ
var ken = new Mutant('ken', 19, 'エターナルフォースブリザード');

//トムもケンも人間だから
//聞いたら自己紹介してくれるはずだよ
tom.showStatus();
/*
name = tom
age = 17
type = Human
*/
ken.showStatus();
/*
name = ken
age = 19
type = Mutant
ability = エターナルフォースブリザード
*/

相手は死ぬよ！

mapLoader.jsでオブジェクトレイヤに配置されたオブジェクトを読み込めるようになりました。

• オブジェクトレイヤに配置されたオブジェクトを読み込めるようになりました
• MITライセンス表記付けました
• enchant.jsのコードを少し書き換えてたんですが、書き換えなくてもいけたので修正しました。

これにより以下のようにマップ読み込むときのコードが変わってます。

var map = new Map(16, 16);
map.image = game.assets['map1.gif'];   
map.loadData.apply(map, mapLoader.map);
map.collisionData = mapLoader.collision;
var foregroundMap = new Map(16, 16);
foregroundMap.image = game.assets['map1.gif'];
foregroundMap.loadData.apply(foregroundMap, mapLoader.foreground);

上記サンプルコードに前景を読み込む処理が抜けていたので修正しました