ゼロから1:Phaser.jsは小さなゲームを意図的に開発する(Chapter 2-ゲームの骨格を構築する)

前に書く
前の節ではPhaserと知り合ったjsは、Phaserが2 Dの小さなゲームを開発するのに適しているとも述べていますが、次のいくつかの文章では、モバイル端末の小さなゲームを開発する例として、Phaserを上手にする方法を紹介します.js.このセクションの主な内容はPhaserです.jsはゲームのスケルトンを構築する.
ゲームに関するいくつかの概念
キャンバス
一般的には、ゲームをするとDOMベースよりもCanvasベースの方が性能が優れています.特にアニメが多い場合です.Phaserはcanvas要素にすべてをレンダリングします.すると、bodyラベルにはcanvas要素が1つしか含まれていない可能性があります.
本節では,移動端の小さなゲームを開発することを目標としているため,キャンバスは一般的に全画面に満ちている.
シーン
完全なゲームにはシーンがあり、「迷宮」や「砂漠」などのゲームシーンではなく、「ロード」、「開始」、「ゲーム」、「終了」などのシーンを指します.一般的に私たちが実際にプロジェクトをするときも、次の4つのシーンがあります.

ロード--プログレスバーとloadingアニメーションを表示し、主な操作は画像、オーディオなどのゲームリソースをロードすることです.

から始まります.展示開始ボタン、活動規則などは、主にプレイヤーが自発的に開始できるようにする操作です(重要ですが、後述します).

ゲーム--ゲーム全体の主な論理はこのシーンの中で、最も核心的な部分です.

終了--ゲームの最終得点、ランキングなどを展示します.

このようなシーンの区分もゲーム全体のライフサイクルを描いていると思いますが、上記の4つのシーンが最も基本的で、どのシーンが欠けてもゲームが完全ではないか、体験が不十分だと思います.
また、もう1回遊ぶには、スタートシーンに戻る、つまりもう1回注文してゲームを始める、という2つの方法があります.このとき、ゲームのルールなどを見てもいいです.もう一つは直接ゲームを始めることです.どちらを選ぶかは、具体的な項目によって異なり、直接ゲームを開始するのが一般的です.
オブジェクトプール
ゲームでは非常に多くの要素が生成され、オブジェクトプールがGroupと理解できるオブジェクトプールが必要です.では、オブジェクトプールについては、次の操作があります.

は、可能な限りオブジェクトを多重化し、メモリのオーバーヘッドを削減します.たとえば、可視範囲のオブジェクト(クールなゲームの障害など)を移動し、再作成ではなく位置を再設定します.

破棄するオブジェクトが特定された場合、distroyメソッドを明示的に呼び出すことを覚えておいてください(一般的なゲームフレームワークはkilledオブジェクトを破棄することはなく、「復活」することもできます).

本番
各ステップでサンプルコードを提示しますが、サンプルコードリンクの横にある「プレビューをクリック」をクリックすると効果が表示されます.
ステップ1:インスタンスの作成

はPhaserを導入する.js

ゲームインスタンス

を作成する
説明:ここで幅が320*568に設定されているのは、サンプルを簡単に見るためであり、実際にシーンを適用するには

var width = window.innerWidth;
var height = window.innerHeight;

サンプルコード:https://jsfiddle.net/Vincent_...
ステップ2:シーンの定義

各シーンの内容を定義する

ゲームインスタンスにシーンを追加

説明:

各シーンはfunctionです.

は、game.state.addを介してゲーム

にシーンを追加することができる.
サンプルコード:https://jsfiddle.net/Vincent_...
ステップ3:シーンをタンデムする

各シーンのライフサイクル

を具体的に定義する.

は、あるシーンから別のシーン

に切り替える.

ゲーム開始

説明:
各シーンには独自のライフサイクルがあり、preload(ロード)、create(準備完了)、update(更新サイクル)、render(レンダリング完了)が一般的です.ちなみに、この4つのライフサイクルについて説明しましょう(詳細は公式オフラインドキュメントを参照できます):

preload-プリロードされたシーンがありますが、ページに入るときにロードする時間を短縮したい場合は、他のシーンに割り当てることができます.他のシーンにpreloadメソッドを追加するだけでいいです.

create-preloadメソッドが存在する場合、このメソッドはロードが完了した後に実行されます.そうでなければ、この方法はシーンに入るときに直接実行されます.

update-更新サイクルが自動的に実行される方法、例えばプレイシーンのupdate方法では、2つの物体が接触しているかどうかを検出することができる.

render-レンダリングが完了した後に実行される方法.例えば、この方法では、物体の衝突領域を容易に観察するために、物体のエッジを描画することができる.

サンプルコード:https://jsfiddle.net/Vincent_...
第一歩を踏み出した
これで、ゲームのシーンを設定し、ゲームを開始することに成功しました.ゲームの背景色の変化を通じてシーンの切り替えを体験することができ、ゲーム全体が4つの部分に分かれており、各部分に独自のライフサイクルがあることがわかります.
多くのチュートリアルは主役の作成から始まりますが、まずゲームの骨格を構築し、各シーンの細部を豊かにすると、ゲーム全体の実行過程を理解しやすくなると思います.
コードには多くの行がなく、私もES 5で書いているので、読むのに苦労しないはずです.この節は後の章を含めてあまり多くないので、みんなが消化しやすいです.同時に、一歩一歩がどのようにしているのかをできるだけ紹介します.
ゲームの骨格を作った後、私たちはやっと第一歩を踏み出した.
未完待機
回顧:Chapter 1-Phaserを知る.js
次のセクション:Chapter 3-ゲームリソースのロード