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

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

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

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

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

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

学習内容

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

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

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

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

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

次のステップ

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

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