【Part7】スマホで作るPhaserゲーム〜チュートリアル編〜

どうもです。タドスケです。

404 NOT FOUND | しぬまでワクワクしていたい

〜年中夢中で挑戦中！〜

tadosuke.com

前回はプレイヤーと足場の衝突判定を追加しました。

今回はプレイヤーの操作処理を作っていきます。

動かしてみる

PCの場合

このシリーズのコンセプトは「スマホだけでゲームを作る」なので、少し本筋とは逸れてしまうのですが、参考までに公式のコードを載せておきます。

var cursors;
function create()
{
    // (その他の処理)

    // キー入力の取得
    cursors = this.input.keyboard.createCursorKeys();
}

function update()
{
    if (cursors.left.isDown)
    {
        player.setVelocityX(-160);
        player.anims.play('left', true);
    }
    else if (cursors.right.isDown)
    {
        player.setVelocityX(160);
        player.anims.play('right', true);
    }
    else
    {
        player.setVelocityX(0);
        player.anims.play('turn');
    }

    if (cursors.up.isDown && player.body.touching.down)
    {
        player.setVelocityY(-330);
 
    }
}

このコードを貼り付けると、矢印キー左右で移動、上キーでジャンプができる……らしいです。（試していません）

スマホの場合

スマホには矢印キーが無いので、別の実装が必要になります。

Phaserにはマウスクリックを判定する機能もあるので、そちらを利用しましょう。

マウスクリックはタッチ操作で代用できるので、マウスだけでプレイできるゲーム＝スマホでもプレイできるゲームとなります。

以下のコードをcreate / update関数に貼り付けてみてください。

function create()
{
    // マウス入力を有効にする
    this.input.mouse.capture = true;

    // （その他の処理）
}

function update ()
{
    var pointer = this.input.activePointer;
    if(pointer.isDown)
    {
        // 左移動
        if(pointer.x < 150)
        {
            player.setVelocityX(-160);
            player.anims.play('left',true);
        }
        // 右移動
        else if(150 < pointer.x)
        {
            player.setVelocityX(160);
            player.anims.play('right',true);
        }

        // ジャンプ
        if(pointer.y < 200 && player.body.touching.down)
        {
            player.setVelocityY(-330);
        }
    }
    // 停止
    else
    {
        player.setVelocityX(0);
        player.anims.play('turn');
    }
}

実行すると以下のように動きます。

• 画面左側をタッチ→左移動
• 画面右側をタッチ→右移動
• 画面上側をタッチ→ジャンプ

コード解説

入力

this.input.mouse.capture = true;

まず初めにPhaserがマウス（タッチ）入力を受け付けるようにします。

var pointer = this.input.activePointer;

input.activePointerで現在アクティブなマウス（タッチ入力）を取得できます。

if(pointer.isDown) // 押された
{
    if(pointer.x < 150)
    {
    }
}

pointerから以下の情報を取得しています。

x	X座標
y	Y座標
isDown	ボタンが押された（タッチされている）か

isDownとx,yを組み合わせることで、タッチされた時の座標を取得しています。

あとはタッチ座標が画面のどのあたりにあるかで処理を分けるだけです。

プレイヤー動作

設定しているのは

• 速度(Velocity)
• アニメーション(名前)

です。

横移動

player.setVelocityX(-160);

プレイヤーのX(横)方向の速度を-160に設定しています。

Phaser内では右方向が+になるので、-160は左方向に160という意味です。

ジャンプ

player.setVelocityY(-330);

横移動と考え方は同じで、Y(縦)方向に-330。

Phaser内では下方向が+なので、上方向に330という意味になります。

ただし縦方向はconfigで設定した重力(gravity)があるので、徐々に減速して落下に転じる動きになります。

この重力と上向きの速度のバランスこそが、ジャンプの挙動を決める鍵になります。

例えば最近のマリオシリーズでは、マリオよりもルイージの方がジャンプ力が高くフワッとした動きになっていることが多いです。

あの動きは、ルイージにかかる重力を弱くすることで得られます。

逆に上方向の速度を上げたとしても、素早くジャンプして素早く落ちてくる動きになり、あの独特の浮遊感は得られません。

アニメーション

player.anims.play('left',true);

createで登録しておいたアニメーション名を指定して切り替えています。

2つめのパラメーターのtrueは、既に同じアニメーションを再生していたら無視するかという意味になります。

これを指定しないと、常に頭からアニメーションが再生し直されてしまうため、1フレーム目で静止したような見た目になってしまいます。

まとめ

今回はプレイヤーの入力処理を追加し、アニメーションによる動きも出たことで一気にゲームっぽくなりました。

次回はよりゲームらしくなるように、他の要素も入れていきます。

【Part8】スマホで作るPhaserゲーム〜チュートリアル編〜

どうもです。タドスケです。前回はプレイヤーを配置してタッチで操作できるところまで作りました。今回はゲームらしい要素として、⭐️を登場させたいと思います。動かしてみるいつものように動かすところから...

tadosuke.com

2021.05.01