Phaserで遊んでみる
Phaserのプロジェクト作成
ひな形からDemoを選んでみる

設定およびゲーム起動
画像配置
画像をクラスで設定し作成
画像の一部を使用する方法
透明なクリックエリアを配置
webフォントの使用
DOM操作

イベントメモ
入力デバイスの検出と制限
乱数メモ
イベント先のthisについて

yarn create @phaserjs/game

今度は、 Project名を Dewmo001とでもして、
Demo Game (Matching Pairs, Clicker, Shmup) を選択

一番上のDemoを選ぶ。
作成されたら、フォルダに移動して、 yarn install でモジュールのインストール
yarn run dev で起動します。

20秒間、敵が上下繰り返すのでマウスクリックで玉をうちこみ、当てたら 敵も玉をうってくるので、それを上下に移動してかわしながらどれくらい得点をのばせるかというゲームのようです。

どうように次のDemoを作成してみます。
次のゲームは、コインクリッカーというゲームで、上からふってきて、地面にぶつかったら跳ね返る動きをするのでクリックして、コインをとっていくゲームですね。

どうように最後のDemoを作成してみます。
記憶するゲームのようですね。

１２枚のカードで、２枚選び絵が一致したら、カードをとりのぞいていき、全部なくしたら終了。
また、ミスすするとハートがへっていくので、ハートを多く残してクリアするってゲームのようですね。

ここらへんのサンプルも含めて、解析していろいろ調べていくか・・

ひな形を使ってプロジェクトをつくっていく。

作成

実行すると、プロジェクト名を聞かれるので適当に入力します。

次に、Demo Game(３つ選べる)か Client Framework か Web Bundler　の選択画面になります。

大規模なJS書いたことないんで、フレームワークさわっていないので、
Frameworkは軽くスルーして・・・

Web Bundlerを選択。
ひとまず、webpackを選択。

今度は、最小限の設定か、一通り設定された完成されたプロジェクトかを選べるので、
いろいろ込々のComplete Projectを選択

最後に TypeScriptか JavaScriptか聞かれます。おすきなほうを…

? We anonymously record which template was selected to help guide development.
If you don't agree, press N to Quit. Otherwise, press Y. » (Y/n)
どのテンプレート選んだのか、匿名で情報を蓄積するけどいいよね？　と言われるので、どうぞどうぞの Y で。

そうするとこんな感じのひな形が作られます

プロジェクト作成に成功したら次のステップとして３つ書かれています。
フォルダに移動して、モジュールをインストールして、実行してみるってことですね。

指示どおり、フォルダに移動し、yarn installでインストールを行い
yarn run devで実行

バンドルして開発用サーバーが起動し、ページを開いてくれます。

最初のひな型は、MainMenuシーン(クリック) → Gameシーン(クリック) → GameOverシーン(クリック) → MainMenuシーン
と設定されているようです。

しばらくこれを使って、使い方を探っていきます。