Phaser を使用した 2D ブロック崩しゲーム
このステップバイステップのチュートリアルでは、シンプルなモバイル MDN ブロック崩しゲーム を、 JavaScript で書き、 Phaser フレームワークを使用して作成します。
各ステップには、編集可能なライブサンプルがあるので、中間ステージがどのように見えるかを確認しながら遊ぶことができます。 Phaser フレームワークを使用して、画像のレンダリングと移動、衝突の検出、コントロールメカニズム、フレームワーク固有のヘルパー関数、アニメーションと調整、勝利と敗北状態などの基本的なゲームメカニズムを使用するための基本を学びます。
この連載記事を最大限に活用するためには、すでに基礎から中級の JavaScript の知識を持っている必要があります。このチュートリアルを動作させた後は、 Phaser を使って自身の簡単なウェブゲームを作ることができるはずです。
学習内容
すべてのレッスン、そして私たちが一緒に作っている MDN ブロック崩しゲームのさまざまなバージョンは、 GitHub で利用可能です。
- フレームワークの初期化
- 拡大縮小
- 資産を読み込んで画面の内側へ表示する
- ボールを移動させる
- 物理演算
- 壁で跳ね返す
- プレイヤーパドルと操作
- ゲームオーバー
- レンガ場を作る
- 衝突判定
- 得点
- ゲームの勝利
- ライフの追加
- アニメーションと調整
- ボタン
- ゲームプレイのランダム化
学習経路に関する注意点として、純粋な JavaScript から始めることが、ウェブゲーム開発の確かな知識を得るための最良の方法です。もしあなたが純粋な JavaScript のゲーム開発にまだ慣れていないなら、先にこのシリーズの対になるものである純粋な JavaScript を使用した 2D ブレイクアウトゲームをやっておくことをお勧めします。
その後、好きなフレームワークを選んで、プロジェクトに使用することができます。私たちは、良いサポートとコミュニティが利用でき、プラグインの良いセットがある、堅実なフレームワークである Phaser を選びました。フレームワークは、開発時間を短縮し、退屈な部分を引き受けてくれるので、あなたは楽しいことに集中することができます。しかし、フレームワークは常に完璧というわけではありません。予期せぬことが起こったり、フレームワークが提供しない機能を書きたい場合、純粋な JavaScript の知識が必要になります。
メモ: この連載記事は、ゲーム開発の体験型ワークショップの素材として使用することができます。また、Phaser を使ったゲーム開発についての講演を行う場合、このチュートリアルを元にした Gamedev Phaser Content Kit を使用することができます。
次のステップ
では、始めましょう。シリーズの最初の部分 - フレームワークの初期化に向かいましょう。