物理演算

page(Doc) not found /ja/docs/Games/Workflows/2D_Breakout_game_Phaser/Move_the_ball

これは、Gamedev Phaser チュートリアルの 16 ステップ中、 5 ステップ目になります。このレッスンを終えた後のソースコードは Gamedev-Phaser-Content-Kit/demos/lesson05.html で見ることができます。

モノ同士の衝突を正しく処理するためには、物理演算が必要になります。この文書では、 Phaser での実装と、典型的な例を紹介します。

物理演算の追加

Phaser は Arcade Physics、P2、そして Ninja Physics と、3 つの異なる物理演算エンジンを備えています。また商用プラグインとして Box2D も物理演算エンジンとして利用できます。チュートリアルで作成しているような単純なゲームでは、複雑な幾何計算を必要としません。そのような場合には Arcade Physics を利用すると良いでしょう。

まず最初に、ゲーム内の Arcade Physics エンジンを初期化しましょう。以下のように、create 関数の最初に physics.startSystem() メソッドを追加します（関数内の最初の行にします）。

game.physics.startSystem(Phaser.Physics.ARCADE);

標準では Phaser オブジェクトは物理演算エンジンを利用しません。そのため、create() の末尾に次の行を追加して、ボールから物理演算エンジンを利用できるようにします：

game.physics.enable(ball, Phaser.Physics.ARCADE);

次にボールを動かします。次のように、create() 末尾で body 属性の持つ velocity 属性を設定します。

ball.body.velocity.set(150, 150);

以前作成した、更新処理の削除

update() 関数から x と y に値を追加する古いメソッドを削除することを忘れないでください。

function update() {
  ball.x += 1;
  ball.y += 1;
}

以上で、物理演算エンジンを組み込むことができました。

最終的に作成されたコード

最終的に得られたコードは以下の通りです。

let ball;

function preload() {
  game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
  game.scale.pageAlignHorizontally = true;
  game.scale.pageAlignVertically = true;
  game.stage.backgroundColor = "#eee";
  game.load.image("ball", "img/ball.png");
}

function create() {
  game.physics.startSystem(Phaser.Physics.ARCADE);
  ball = game.add.sprite(50, 50, "ball");
  game.physics.enable(ball, Phaser.Physics.ARCADE);
  ball.body.velocity.set(150, 150);
}

function update() {}

index.html を再読み込みすると、ボールは 1 方向に進み続けます。現在、物理エンジンには重力加速度も摩擦係数も設定されていません。重力加速度を設定すれば、ボールは落下するようになります。また、摩擦係数を設定すれば、ボールが摩擦で停止するようになります。

物理演算

物理演算の追加

以前作成した、更新処理の削除

最終的に作成されたコード

物理学を楽しむ

自分のコードと比較しよう

次のステップ