プレイヤーが集める星を作ります。Phaser公式チュートリアルのMaking your first Phaser game: Part 7 - Starshine - Learn - Phaserを参考にして進めます。
(5)プレイヤーの操作の続きです。
先のサンドボックスを閉じてしまっていたら、こちらを右クリックして[新しいウィンドウで開く]で開いて、作業を始めてください。
星を登場させる
プレイヤーが集めるべきアイテムの星を作ります。星は複数登場して、プレイヤーとの接触を物理エンジンに委ねます。プレイヤーと地面を衝突させる時を思い出してください。衝突させる時に、 game.physics.arcade.collide(player, platforms); として、衝突する対象を指示しました。星を個別に作成した場合、全ての星に対してこの指定をしなければならず面倒です。そこで、地面の時と同じく、新しくstarsというグループを作成して、そこに星を登録していくことにしましょう。
createタブを開いて、まずは以下の場所にstarsを定義します。
追加するコードは以下の通りです。
// 7: // (A valiable of the group contains the stars) var stars;
function create() {に星のグループを作成して、星を作成しながら物理エンジンなどの設定をします。以下の場所です。
追加するのは以下のコードです。
// 65: stars = game.add.group(); stars.enableBody = true; // Here we'll create 12 of them evenly spaced apart for (let i = 0; i < 12; i++) { // Create a star inside of the 'stars' group let star = stars.create(i * 50, 0, 'star'); // Let gravity do its thing star.body.gravity.y = 6; // This just gives each star a slightly random bounce value star.body.bounce.y = 0.7 + Math.random() * 0.2; }
PLAYタブに切り替えて動きを見てください。星が作成されて落下をします。ただ、床は通り抜け、プレイヤーで取ろうとしても取れません。
コードの意味
// 8: var stars;
すでに何回か似たようなコードが出ていますね。これでstarsという名前の変数を定義しています。これに、作成した星のグループを代入して利用します。
// 65: stars = game.add.group(); stars.enableBody = true;
65行目で、グループを作成して、変数starsに代入しています。67行目で、星グループの物理エンジンを有効にしています。地面と同じ設定です。
// 70: for (let i = 0; i < 12; i++) {
これはfor文という構文で、プログラムを繰り返すのに使います。細かい意味は後回しにして、一先ずここでは以下のことを確認しておいてください。
- ローカル変数
iが - 0から1ずつ増えながら
- 11になるまで
{と}の間のコードを繰り返します
つまり、iが0～11まで変化しながら、{と}の間を12回繰り返し処理されます。
// 73: let star = stars.create(i * 50, 0, 'star');
星のグループに、X座標は現在のiに50を掛けた場所、Y座標は最上段に、starの名前のグラフィックを作成して、そのインスタンスをローカル変数starに代入します。iは繰り返すごとに、0 > 1 > 2 > … > 11 と変化していきますので、X座標が 0 > 50 > 100 > 150 > … と、50ピクセルごとに並ぶことになります。
// 76:
star.body.gravity.y = 6;
星に重力加速度を設定します。1秒で6ピクセル/秒加速するように重力落下させます。
// 79:
star.body.bounce.y = 0.7 + Math.random() * 0.2;
星のY方向の弾性係数を設定します。Math.random()は、乱数を生成するためのコードで、0以上1未満の範囲の乱数を返します。0以上1未満の乱数に0.2を掛けた値を0.7に足していますので、0.7以上0.9未満の弾性係数を設定しています。
今はまだ跳ね返らないので画面外まで星が落ちてしまいますが、跳ね返りを設定すれば、星ごとに少し異なる高さで跳ね返るはずです。作業を進めて、予想が合っていたかを確認することも大切な作業です。
星と地面を衝突させる
星と地面を衝突させるコードを追加します。これはプレイヤーと地面に当たり判定を付けた時と同じメソッドを利用して、パラメータを星のグループと地面のグループにします。
updateタブに切り替えて、以下の場所にコードを追加します。
追加するコードは以下の通りです。
// 5:
game.physics.arcade.collide(stars, platforms);
これで星が地面で跳ね返ります。PLAYタブに切り替えて確認してください。
予想通り、星が異なる高さで跳ね返ります。
星を取れるようにする
プレイヤーと星グループの重なりを確認して、重なっていたらその星を消すようにします。地面の時は、接触したかと、どこと接触したかを確認すればよかったですが、今回はどの星と接触したかを把握する必要があります。そのために新しい構文を使います。
updateタブに切り替えたら、以下の場所にコードを追加します。
追加するのは以下のコードです。
// 6: game.physics.arcade.overlap(player, stars, collectStar, null, this);
playerとstarsグループが重なる(overlap)かを確認して、重なっていたらcollectStar関数を呼び出します。重なった時の追加的なチェックはせず(null)、collectStar関数はthisから実行します。
collectStar関数が必要になりましたので、updateタブの最後に追加します。これまでと違って、最後の}の下に追加するので注意してください。
追加するコードは以下の通りです。
// 39: function collectStar(player, star) { // Removes the star from the screen star.kill(); }
関数collectStarを定義しています。プレイヤーと星グループ内の星のどれかが接触した時に、Phaserが自動的に呼び出してくれます。このような関数をコールバック関数と呼びます。collectStar関数は2つ引数を取ります。overlap関数の接触対象に並べた順番で、接触したオブジェクトのインスタンスを渡してくれます。
42行目のstar.kill();は、starを星グループから削除するコードです。starは引数で受け取ったものですので、プレイヤーと重なった星がこれで画面から消えます。
PLAYタブに切り替えて操作します。星を集めることができるようになりました。
まとめ
地面を作成した時と同じような手順で星のグループを作成して、星を作成しました。星を12個登場させるために、繰り返し文forを利用しました。物理エンジンの振る舞いを設定した上で、地面との接触、プレイヤーとの接触を有効にして、プレイヤーと重なった星を消す処理を実装しました。
ここまで実装したサンドボックスは以下で確認できます。
以上で、このチュートリアルでのゲームの動きは完成です。最後の仕上げに、文字を表示して、スコアを実装します。
