Phaser を使用した 2D ブロック崩しゲーム

このステップバイステップのチュートリアルでは、シンプルなモバイル MDN ブロック崩しゲーム を、 JavaScript で書き、 Phaser フレームワークを使用して作成します。

各ステップには、編集可能なライブサンプルがあるので、中間ステージがどのように見えるかを確認しながら遊ぶことができます。 Phaser フレームワークを使用して、画像のレンダリングと移動、衝突の検出、コントロールメカニズム、フレームワーク固有のヘルパー関数、アニメーションと調整、勝利と敗北状態などの基本的なゲームメカニズムを使用するための基本を学びます。

この連載記事を最大限に活用するためには、すでに基礎から中級の JavaScript の知識を持っている必要があります。このチュートリアルを動作させた後は、 Phaser を使って自身の簡単なウェブゲームを作ることができるはずです。

Phaser で作成したゲーム MDN ブロック崩しのゲーム画面。パドルを使用してボールを跳ね返し、ポイントとライフを維持しながら、レンガのフィールドを破壊することができます。

学習内容

すべてのレッスン、そして私たちが一緒に作っている MDN ブロック崩しゲームのさまざまなバージョンは、 GitHub で利用可能です。

  1. フレームワークの初期化 (en-US)
  2. 拡大縮小 (en-US)
  3. 資産を読み込んで画面の内側へ表示する (en-US)
  4. ボールを移動させる (en-US)
  5. 物理演算
  6. 壁で跳ね返す (en-US)
  7. プレイヤーパドルと操作 (en-US)
  8. ゲームオーバー (en-US)
  9. レンガ場を作る (en-US)
  10. 衝突判定 (en-US)
  11. 得点 (en-US)
  12. ゲームの勝利 (en-US)
  13. ライフの追加 (en-US)
  14. アニメーションと調整 (en-US)
  15. ボタン (en-US)
  16. ゲームプレイのランダム化 (en-US)

学習経路に関する注意点として、純粋な JavaScript から始めることが、ウェブゲーム開発の確かな知識を得るための最良の方法です。もしあなたが純粋な JavaScript のゲーム開発にまだ慣れていないなら、先にこのシリーズの対になるものである純粋な JavaScript を使用した 2D ブレイクアウトゲームをやっておくことをお勧めします。

その後、好きなフレームワークを選んで、プロジェクトに使用することができます。私たちは、良いサポートとコミュニティが利用でき、プラグインの良いセットがある、堅実なフレームワークである Phaser を選びました。フレームワークは、開発時間を短縮し、退屈な部分を引き受けてくれるので、あなたは楽しいことに集中することができます。しかし、フレームワークは常に完璧というわけではありません。予期せぬことが起こったり、フレームワークが提供しない機能を書きたい場合、純粋な JavaScript の知識が必要になります。

メモ: この連載記事は、ゲーム開発の体験型ワークショップの素材として使用することができます。また、Phaser を使ったゲーム開発についての講演を行う場合、このチュートリアルを元にした Gamedev Phaser Content Kit を使用することができます。

次のステップ

では、始めましょう。シリーズの最初の部分 - フレームワークの初期化 (en-US)に向かいましょう。