f:id:am1tanaka:20170417221324p:plain

プレイヤーが集める星を作ります。Phaser公式チュートリアルのMaking your first Phaser game: Part 7 - Starshine - Learn - Phaserを参考にして進めます。

先のサンドボックスを閉じてしまっていたら、こちらを右クリックして[新しいウィンドウで開く]で開いて、作業を始めてください。

星を登場させる
コードの意味
星と地面を衝突させる
星を取れるようにする
まとめ
参考URL

星を登場させる

プレイヤーが集めるべきアイテムの星を作ります。星は複数登場して、プレイヤーとの接触を物理エンジンに委ねます。プレイヤーと地面を衝突させる時を思い出してください。衝突させる時に、 game.physics.arcade.collide(player, platforms); として、衝突する対象を指示しました。星を個別に作成した場合、全ての星に対してこの指定をしなければならず面倒です。そこで、地面の時と同じく、新しくstarsというグループを作成して、そこに星を登録していくことにしましょう。

createタブを開いて、まずは以下の場所にstarsを定義します。

f:id:am1tanaka:20170418174449p:plain

追加するコードは以下の通りです。

// 7:
// (A valiable of the group contains the stars)
var stars;

function create() {に星のグループを作成して、星を作成しながら物理エンジンなどの設定をします。以下の場所です。

f:id:am1tanaka:20170418174756p:plain

追加するのは以下のコードです。

    // 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タブに切り替えて動きを見てください。星が作成されて落下をします。ただ、床は通り抜け、プレイヤーで取ろうとしても取れません。

f:id:am1tanaka:20170417210700p:plain

コードの意味

// 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タブに切り替えて、以下の場所にコードを追加します。

f:id:am1tanaka:20170418175442p:plain

追加するコードは以下の通りです。

    // 5:
    game.physics.arcade.collide(stars, platforms);

これで星が地面で跳ね返ります。PLAYタブに切り替えて確認してください。

f:id:am1tanaka:20170417213658p:plain

予想通り、星が異なる高さで跳ね返ります。

星を取れるようにする

プレイヤーと星グループの重なりを確認して、重なっていたらその星を消すようにします。地面の時は、接触したかと、どこと接触したかを確認すればよかったですが、今回はどの星と接触したかを把握する必要があります。そのために新しい構文を使います。

updateタブに切り替えたら、以下の場所にコードを追加します。

f:id:am1tanaka:20170418175645p:plain

追加するのは以下のコードです。

    // 6:
    game.physics.arcade.overlap(player, stars, collectStar, null, this);

playerとstarsグループが重なる(overlap)かを確認して、重なっていたらcollectStar関数を呼び出します。重なった時の追加的なチェックはせず(null)、collectStar関数はthisから実行します。

collectStar関数が必要になりましたので、updateタブの最後に追加します。これまでと違って、最後の}の下に追加するので注意してください。

f:id:am1tanaka:20170418180114p:plain

追加するコードは以下の通りです。

    // 39:
function collectStar(player, star) {

    // Removes the star from the screen
    star.kill();    

}

関数collectStarを定義しています。プレイヤーと星グループ内の星のどれかが接触した時に、Phaserが自動的に呼び出してくれます。このような関数をコールバック関数と呼びます。collectStar関数は2つ引数を取ります。overlap関数の接触対象に並べた順番で、接触したオブジェクトのインスタンスを渡してくれます。

42行目のstar.kill();は、starを星グループから削除するコードです。starは引数で受け取ったものですので、プレイヤーと重なった星がこれで画面から消えます。

PLAYタブに切り替えて操作します。星を集めることができるようになりました。

f:id:am1tanaka:20170417221324p:plain