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の使い方 4 〜複数のマップを読み込んで遷移させる
tiledMapLoader.jsはTiled Map Editorというソフトで作ったマップをenchant.jsで使えるようにするプラグインです。
この記事はtiledMapLoader.jsの解説です。
一回目はマップを読み込んで表示する方法。
二回目はマップに配置したオブジェクトの使い方。
三回目はマップに追加したオブジェクトにplayerが乗ったらhogehogeする方法をやりました。
今回できるようになること
複数のマップを読み込んで、マップの移動ができるようになります。
どうぞ、サンプルをダウンロードして、実行しながら読み進めてみてください。
それでは始めて行きましょう。
map1.tmxの作成
今回は複数のマップを使うのでmap1.tmxを作成します。
スクロールなしの20×20です。
マップの作り方はこちらを見てください。
マップを作り終わったら、「enterPoint1」という名前のオブジェクトを適当な位置に配置します。
隣のマップからこのマップに入ってきたときにplayerが出現する位置に使います。
オブジェクトの配置方法はこちらを見てください。
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の使い方 3 〜マップにイベントを配置する
tiledMapLoader.jsはTiled Map Editorというソフトで作ったマップをenchant.jsで使えるようにするプラグインです。
この記事はtiledMapLoader.jsの解説です。
全三回のつもりでしたがこれプラスあと一回の全四回になりそうです、はい。
一回目はマップを読み込んで表示する方法。
二回目はマップに配置したオブジェクトの使い方をやりました。
今回できるようになること
マップにイベントを配置できます。
マップの中の特定の場所にプレイヤーが移動したらメッセージを表示したりするアレですね。
と、言っても、二回目の応用です。
map0.tmxの編集
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の使い方 2 〜マップからプレイヤーの初期位置を指定する。
Tiled Map Editorで作ったマップをenchant.jsで読み込むtiledMapLoader.jsの使い方、第二回目です。
第一回はこちら
今回できるようになること
- マップからプレイヤーの初期位置を指定できるようになります
前回のおさらい
前回までで、Tiled Map Editorで作ったマップを表示することは出来ました。
が、しかし!
島から出られない・・・
というわけで、プレイヤーのスタート位置を変えてしまいましょう。
もちろんマップを使って。
マップを編集
game.jsを編集
playerの初期位置をマップに追加したオブジェクトから指定
player.x = tiled[0].object.playerStartPoint.x - 8; player.y = tiled[0].object.playerStartPoint.y - 16;
これだけ!
保存したらfirefoxで動作確認。
いいですね!
おまけ、というか補足
マップに追加したオブジェクトが持っているプロパティ
デフォルトで持っているのは以下の4つだけです
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の使い方 3 〜マップにイベントを配置する
tiledMapLoader.jsの使い方 1 (全3回予定)
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);
次回予告
おつかれさまでした。
次は、Tiled Map Editorのオブジェクトレイヤーを使って、プレイヤーが最初に現れる位置をマップで指定する方法を紹介します。
書きました↓
tiledMapLoader.jsの使い方 2 〜マップからプレイヤーの初期位置を指定する
おまけ(おまけ?)
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);
上記サンプルコードに前景を読み込む処理が抜けていたので修正しました