JavaScript のゲームプログラミング入門
５. アニメの切り替えと当たり判定
１つ説明を忘れていました。それは コメント についてです。
前回のプログラムを見てみましょう。
色を付けた行には、コメントが入ってます。
Crafty.init(500,400, document.getElementById('game'));
Crafty.background('#87ceeb');
// 歩きの絵
Crafty.sprite(96,96,"walk.png",{player:[0,0]});
Crafty.e('2D, Canvas, player, Twoway, Gravity, SpriteAnimation')
.attr({x:220, y:50})
.reel('walk',300,0,0,2) // アニメ設定
.animate('walk', -1) // アニメ再生
.bind('KeyDown', function(e) {
if( e.key == Crafty.keys.LEFT_ARROW ){
this.flip("X"); // 絵をx軸反転させる
}
if( e.key == Crafty.keys.RIGHT_ARROW ){
this.unflip("X");
}
})
.gravity('Floor')
.twoway(200);
Crafty.e('Floor, 2D, Canvas, Color')
.attr({x:50, y:360, w:400, h:20}).color('#830');
ダブルスラッシュ // を使うと、そこより右側は実行されません。
コメントはプログラムを見たとき、どのような処理が行われているのか分かるようにするためのものです。 プログラムを作っているときは完全に把握していても、あとで見たときに分からなくなることもあるからです。
また、プログラムは再利用する機会が多いです。共同開発などで他の人が見ることもあります。 そんなときコメントは役に立ちます。
また次のように、ちょっと値を変えてテストしたいときにも便利です。
テストしたい行をコピーして、もとをコメントにします。
コピーした行は値を変えてテストするのです。
テストが終わったら、変更した行を消しコメントを外せば元の状態に戻せます。
Crafty.e('Floor, 2D, Canvas, Color')
// .attr({x:50, y:360, w:400, h:20})
.attr({x:180, y:250, w:400, h:20}) // xy座標を変更してテスト
.color('#830');
スラッシュとアスタリスク /* */ で囲んで複数行をコメントにする方法もあります。
下の例では、23行目から26行目までがコメントになります。
また、36行目のように一部分をコメントにすることも可能です。
|
|
私は、他の処理との関係をコメントに残すこともあります。
そうすると修正するときなど、見落としが減るからです。
コメントは有効に使いましょう。
複数の絵を使ってみよう
前回、walk.png を使って2枚の絵で歩くアニメにしました。
今回は all.png を使ってみたいと思います。
all.png には歩き以外の絵も入っているので、他のアニメも簡単に作れるようになります。
全パターンの絵 all.png を使ったやり方です。
player の処理のみ表示しています。注意してください。
// 全パターンの絵
Crafty.sprite(96,96,"all.png",{player:[0,0]});
Crafty.e('2D, Canvas, player, Twoway, Gravity, SpriteAnimation')
.attr({x:220, y:50})
.reel('walk',300,[[2,0],[3,0]]) // 歩きアニメ設定
.animate('walk', -1) // 歩きアニメ再生
.bind('KeyDown', function(e) {
if( e.key == Crafty.keys.LEFT_ARROW ){
this.flip("X"); // 絵をx軸反転させる
}
if( e.key == Crafty.keys.RIGHT_ARROW ){
this.unflip("X");
}
})
.gravity('Floor')
.twoway(200);
やり方が変わったのは reel のところだけです。
開始位置を指定する方法から、使うコマをすべて指定する方法に変えます。
(変更前) .reel('walk',300,0,0,2)
(変更後) .reel('walk',300,[[2,0],[3,0]])
歩くアニメは [2,0] と [3,0] を使います。
これをさらに角かっこで閉じて指定します。[ [2,0], [3,0] ]
ジャンプの絵を入れてみよう
ジャンプをしたときの絵を入れます。
アニメの名前（任意）は jump としました。
// 全パターンの絵
Crafty.sprite(96,96,"all.png",{player:[0,0]});
Crafty.e('2D, Canvas, player, Twoway, Gravity, SpriteAnimation')
.attr({x:220, y:50})
.reel('walk',300,[[2,0],[3,0]]) // 歩きアニメ設定
.reel('jump',300,1,0,1) // ジャンプアニメ設定
.animate('walk', -1) // 歩きアニメ再生
.bind('KeyDown', function(e) {
if( e.key == Crafty.keys.LEFT_ARROW ){
this.flip("X"); // 絵をx軸反転させる
}
if( e.key == Crafty.keys.RIGHT_ARROW ){
this.unflip("X");
}
if( e.key == Crafty.keys.UP_ARROW ){
this.animate('jump'); // ジャンプアニメ
}
})
.gravity('Floor')
.twoway(200);
jump で使うアニメの設定をします。
[1,0] の絵を使います。絵は一枚だけ使うので、パラメータは 1,0,1 になります。
.reel('jump',300,1,0,1) // ジャンプアニメ設定
上矢印キーを押したとき、ジャンプのアニメに切り替えます。
if( e.key == Crafty.keys.UP_ARROW ){
this.animate('jump'); // ジャンプアニメ
}
this は this.flip(“X”) の時と同じように player そのものです。
this.animate(‘jump’) とすることで player の絵を切り替えることができます。
実行してみましょう。
ジャンプすると、ちゃんとジャンプの絵に切り替わります。
しかし、待ってください。着地したあともジャンプの絵のままです。
地面に着地したあとは歩きアニメに切り替えます。
歩きアニメは walk という名前で登録してあるのでこれを再生します。
// 全パターンの絵
Crafty.sprite(96,96,"all.png",{player:[0,0]});
Crafty.e('2D, Canvas, player, Twoway, Gravity, SpriteAnimation')
.attr({x:220, y:50})
.reel('walk',300,[[2,0],[3,0]]) // 歩きアニメ設定
.reel('jump',300,1,0,1) // ジャンプアニメ設定
.animate('walk', -1) // 歩きアニメ再生
.bind('KeyDown', function(e) {
if( e.key == Crafty.keys.LEFT_ARROW ){
this.flip("X"); // 絵をx軸反転させる
}
if( e.key == Crafty.keys.RIGHT_ARROW ){
this.unflip("X");
}
if( e.key == Crafty.keys.UP_ARROW ){
this.animate('jump'); // ジャンプアニメ
}
})
.bind('LandedOnGround', function(){ // 着地したとき
this.animate('walk', -1) // 歩きアニメ再生
})
.gravity('Floor')
.twoway(200);
また出ました bind です。
LandedOnGround を使い、着地のイベントが起こったら function の中の処理をするようにしています。
実行すると、着地後も歩きアニメするようになりました。
コインを表示しよう
次はコインを表示したいと思います。
下の絵をダウンロードして、作業中のフォルダに入れてください。
【 gold_1.png 】
せっかくなので、空中に小さい地面を表示して、その上にコインを表示します。
いま表示中の地面の下にプログラムを追加します。
Crafty.e('Floor, 2D, Canvas, Color')
.attr({x:50, y:360, w:400, h:20}).color('#830');
// 空中の地面
Crafty.e('Floor, 2D, Canvas, Color')
.attr({x:350, y:230, w:100, h:20}).color('#830');
// コインの絵
Crafty.sprite(84,84,"gold_1.png",{Coin:[0,0]});
Crafty.e('Coin, 2D, Canvas')
.attr({x:420, y:180, w:40, h:40});
実行します。
空中に地面とコインが表示されます。
空中の地面にも着地できますね。
コインは表示しているだけなので、プレイヤーと重なっても何も起こりません。
ちなみにコインの表示で、さりげなく拡縮機能を使ってます。
絵の切り出しサイズより、表示サイズを小さくすることで縮小できます。
コインに当たり判定を入れよう
CraftyJS では、当たり判定（重なりの判定）も簡単に入れることができます。
コインで試してみましょう。
プレイヤーがコインをゲットできるようにします。
仕組みはコイン側に入れます。
状況にもよりますが、ゲームならコインを取るのはプレイヤーだけなので、コイン側がいいですね。
// コインの絵
Crafty.sprite(84,84,"gold_1.png",{Coin:[0,0]});
Crafty.e('Coin, 2D, Canvas, Collision')
.checkHits("player")
.bind("HitOn", function (hitData) {
this.destroy();
})
.attr({x:420, y:180, w:40, h:40});
当たり判定には３つの手順があります。
一つ目は、当たり判定の宣言をすること。
パラメータに Collision をセットします。
Crafty.e('Coin, 2D, Canvas, Collision')
２つ目は、相手を設定すること。今回は player です。
.checkHits("player")
３つ目は、当たったときの処理を書きます。
bind を使って、イベント（何かが起こったとき）のセットをします。
イベントの種類は HitOn で、当たり判定が発生したかどうかを調べます。
.bind("HitOn", function (hitData) {
this.destroy();
})
this.destroy() を使ってコインのオブジェクト自体を消しています。
今回の this は Coin の中で使っているので、コインオブジェクトそのものを指しています。
実行して、プレイヤーをコインのところへ移動させてください。
プレイヤーとコインが重なる瞬間、コインは消えます。
これまでの説明で、すごくシンプルなミニゲームは作れます。
でも自分でルールを考えてゲームを作ることは難しいことだと思います。
次回からは、ミニゲームを題材として少し実践的な話にしていきます。