Friction River Software - Phaser4入門【開発環境構築編③】ファイル構成

Ｂ美

まずは全体のファイル構成がどうなっているかを説明するわね

作業ディレクトリである「D:\phaser」の下に「hello」ディレクトリが作られ、その下はこんな感じで構成されているの

Ｃ菜

開発者が見るべき箇所はどこなんでしょうか～？

Ｂ美

とてもシンプルよ

まず画像等のリソースを格納するのが「public\assets」ディレクトリ
（すでに二つの画像ファイルが格納されているわ）

Ａ子

Assetって「資産」という意味だっけ？

Ｂ美

そうよ

実際の意味合いとしては「リソース」と言ったほうが合ってるかもしれないけど…

Ｃ菜

前回に見たゲーム画面でもこの二つの画像が使われてましたね～

それでは、ソースコードについては（CakePHPと同様に）「src」ディレクトリの中でしょうか～？

Ｂ美

正解！

こんな感じよ

Ａ子

ん？
ファイルの拡張子が「ts」って、どういうこと？

あっ！
TypeScriptだから「ts」かー

Ｂ美

そういうこと

もしもプログラム言語として「JavaScript」を選択していた場合は「js」になるけどね

Ｃ菜

メインルーチンは「src\game」ディレクトリの中にある「main.ts」ですか～？

Ｂ美

このファイルではゲーム全体の設定を行うの
（例えば、背景色や画面の縦横サイズ等）

あ、新しい画面を追加するときって「import」とconfigの「scene」への追加が必要だからね

Ａ子

…ってことは、（基本的には）「src\game\scenes」ディレクトリの中にあるファイル群を書き換えれば良いってことか

てか、画面は三つだったはずだけど、ファイルは五つあるね（苦笑）

Ｂ美

起動の順番としてはこうなるわ

１．Boot.ts
　↓
２．Preloader.ts
　↓
３．MainMenu.ts
　↓（マウスクリックすると）
４．Game.ts
　↓（マウスクリックすると）
５．GameOver.ts
　↓（マウスクリックすると）
６．３番に戻る

つまり、実際の画面としては３～５番の三つだけよ

Ｃ菜

順番にテキストエディターで開いて見てみますね～

まずは「Boot.ts」です～

Ａ子

Google翻訳を使って「preload」メソッド内のコメント行を訳してみた

『ブートシーンは、ゲームのロゴや背景など、プリローダーに必要なアセットを読み込むために一般的に使われるよ。』
『アセットのファイルサイズは小さいほどいいよ、ブートシーン自体にはプリローダーがないからね。』

…らしい

Ｃ菜

「create」メソッドがPreloaderをスタートしていますので、次は「Preloader.ts」ですね～

Ａ子

英語の意味合い的にまずは「init」メソッドだろうね

最初のコメント行を翻訳するとこうなったよ
『この画像をブートシーンで読み込んだから、ここに表示できるよ』

Ｃ菜

あ、たしかに「Boot.ts」の中の「preload」メソッドで背景画像ファイル（assets/bg.png）をロードしてますよ～

それを「Preloader.ts」のほうで使ってるわけですね～

Ａ子

その下のコメント行は順番にこんな感じ

『シンプルなプログレスバーです。これがバーのアウトラインです。』
『これは進捗バーそのものです。進捗の％に応じて左からサイズが大きくなります。』
『LoaderPlugin が発する 'progress' イベントを使ってロードバーを更新しよう』

うーん
なに言ってんだか、よく分からん（笑）

Ｂ美

あまり気にしなくても良いわよ

どうせ「生成AI」にコードを書いてもらうんだし…（笑）

Ｃ菜

「preload」メソッドの中のコメント行はこう言ってますね～
『ゲームのアセットを読み込む - 自分のアセットに置き換えてね』

たしかに、ここでロゴ画像（logo.png）をロードしているように見受けられます～

Ａ子

ついでに「create」メソッド内のコメントも訳しておくかー

『すべてのアセットが読み込まれたら、他のゲーム部分でも使えるグローバルオブジェクトをここで作るのがよくあります。』
『例えば、ここでグローバルアニメーションを定義できるので、他のシーンでも使うことができるよ。』
『メインメニューに移動します。また、これをカメラフェードのようなシーン遷移に置き換えることもできます。』

まぁ、とにかく（よく分からんけど）メインメニューである「MainMenu.ts」に移動するわけだね

Ｃ菜

それでは、その「MainMenu.ts」の中身です～

Ａ子

コメントが一切ないけど、なんとなく言ってることは分かる（気がする…）

画像（image）二つと文章（text）一つを設定して、あとはイベントとしてマウスクリック（pointerdown）したら「Game.ts」に移動する…ってことだよね？

Ｂ美

そうね

んで、その「Game.ts」こそがゲームとしての中核部分よ

Ａ子

camera（Phaser.Cameras.Scene2D.Camera）ってのがよく分からんけど、イベントとしてはさっきの「MainMenu.ts」と同じだね

クリックで「GameOver.ts」に移動するってだけ

Ｃ菜

では、最後に「GameOver.ts」です～

Ａ子

ん？
ほとんど「Game.ts」と同じじゃん

表示するテキストが異なる（「Game Over」という文言）くらいかな

Ｂ美

細かいことはほっておいて、少しだけ改造してみましょうか

ゲーム画面に「Hello World」という文字を表示してみなさい

Ｃ菜

ゲーム画面ですから、「Game.ts」ですね～

「Make something fun!\nand share it with us:\nsupport@phaser.io」
という部分を
「Hello World」

に変えるだけで良いと思います～

Ａ子

それじゃ、実行確認してみよう

えっと、まずはコマンドプロンプトを管理者として実行するよ
（Windowsの検索欄に以下を入力）

cmd[Ctrl]+[Shift]+[Enter]

んで、コマンドはこうだね

> cd /d d:\phaser\hello[Enter]
> npm run dev[Enter]

Ｃ菜

ブラウザソフトを開いて、URL欄にはこう入力するです～

http://localhost:8080

メインメニューの次の画面（Game.ts）は以下のようになりましたよ～
（きちんと変更されてます～）

Ｂ美

それじゃ、最後にリリース版を作りましょう
コマンドプロンプトに以下の一文を打ち込んでね

> npm run build[Enter]

要するに、最後が「dev」ではなく「build」になってるだけ

Ｃ菜

最初は存在しなかった「dist」というディレクトリが新たに作られてますよ～

その中身は以下の通りです～

Ａ子

もしかして、この「dist」以下のファイルを公開Webサーバにアップするだけ？

いや、まさかね

Ｂ美

そのまさかよ

ちなみに、TypeScriptのコードはJavaScriptに変換されて、「js」ファイルとして全てまとめられているわ
（ブラウザソフトではJavaScriptでないと動かないからね）

Ｃ菜

「Phaser」本体は要らないんですか～？

CakePHPのときはプロジェクトファイル全体をWebサーバにアップロードしましたよね～？

Ｂ美

「Phaser」本体を含めて、必要なファイルを「dist」以下に全て圧縮したのよ

それを行うコマンドがさっきの「npm run build」ってわけ

Ａ子

へぇー
それは配布の手間って観点から見れば、なかなか良い仕組みだね

んじゃ、実際に公開Webサーバにアップしてみよう！
ドキュメントルートの下に「dist」ディレクトリ以下を全てアップして、終わったら「hello」に名前を変更するよ

Ｃ菜

改名ではなく「hello」ディレクトリを作って、その下に「dist」を丸ごとアップしましょう～

https://friction-river.jp/phaser/app/hello/dist/

インターネット経由でアクセスできますので、こちらをクリックしてみてください～
（クリックすると別ウィンドウで開きます）

Ａ子

お、バッチリ動いてるじゃん

最初にＢ美が言ってた通り、めっちゃお手軽だってことがよく分かったよ

Ｂ美

あ、そうだ

この「dist」をさらに圧縮して、ただ一つのファイルにすることもできるわよ

Ａ子

それ良いじゃん

さっそくやってみよう

Ｃ菜

なんとなくですが、あまりＢ美部長のお勧めではないような気もするんですけど～

Ｂ美

さっすがＣ菜、良い勘してるー

プラグイン（vite-plugin-singlefile）をnpmで導入しなきゃいけないし、色々と制約もあるのよね
あと、パフォーマンスも（もしかしたら）低下するかもしれない

まぁ、メリットとしては（一つにまとめられた）HTMLファイルをダブルクリックで起動できることくらいかしら
（普通はWebサーバが必要だからね）

Ａ子

なるほど
んじゃ、別にやらなくても良いや

「dist」ディレクトリ、ただ一つに圧縮できるだけでもすごいと思うからね

Ｂ美

それじゃ、開発環境構築についてはここまでね

次回は、実際に遊べるようなゲームを作ってみましょう

Ｃ菜

楽しみです～