ドラッグでオブジェクトを移動する(Phaser3)

やりたいこと

Phaser3でオブジェクトをドラッグで移動します。

実装

準備

シーンにドラッグで動かすオブジェクトを追加します。

ここではRectangle(長方形)を追加しました。

    create ()
    {
        const rect = this.add.rectangle(400, 300, 100, 100, 0xff0000);
    }

以下のように表示されます。(シーン全体は800ｘ600なのでシーンの中心に表示されています。)

ドラッグの実装

まずはrect.setInteractive({ draggable: true })を呼び、作成したRectにドラッグ操作を許可します。

    create ()
    {
        const rect = this.add.rectangle(400, 300, 100, 100, 0xff0000);
        rect.setInteractive({ draggable: true }); //追加
    }

つづいてrect.on(‘drag’, …）によりドラッグ時の処理を指定します。

…部分はfunctionを指定します。今回はドラッグ先にrectを移動するため(pointer, pos_x, pos_y) => rect.setPosition(pos_x, pos_y)としました。

    create ()
    {
        const rect = this.add.rectangle(400, 300, 100, 100, 0xff0000);
        rect.setInteractive({ draggable: true });
        rect.on('drag', (pointer, pos_x, pos_y) => rect.setPosition(pos_x, pos_y)); //追加
    }

結果

下の用に(静止画なのでわかりにくいですが)ドラッグでオブジェクトの場所を移動できるようになりました。

参考にさせていただいたサイト

Phaser 3 Examples

labs.phaser.io