カードゲーム対戦サーバ構築への道 5 -Phaserのことはじめ-
2025年01月02日
前回は擬似コードやレイアウトを決めたので、ゲーム制作の環境構築をしていきます。
Phaserについて情報を集める
様々なサイトの情報をざっと読んでみたところ、Phaserを落とし、サーバをPhaserから立てるという使い方のようです。
まずは立ち上げるサーバの検証が必要です。なるべくnginxだけで済ませたいですが、可能なのでしょうか？というところです。
Phaserを動かす要件を探る
公式のチュートリアルである "Getting Started with Phaser 3 Part 1 - Introduction"[1]を読んでみます。
"A web server? But I want to make games!"の項目によると、ファイルの読み書き、送受信をコントロールできないというセキュリティ上の懸念からサーバを立てる事になっているようです。
以前Node.jsでリアルタイムの対戦用サーバを立てた際、クライアントはキー入力のみをサーバに送り、その結果を受け取って描画するという仕組みにしました。こうすれば、そもそも不正なHPを送信して自機を無敵にしたりみたいなことは仕組み上やりにくいわけです。
しかし、最初から今回は「P2Pでやる」という事を決めています。これに従ったらサーバの負荷が大きいままです。第3回では、その負荷を減らした上での監視の仕組みを考えました。
チュートリアルの"Part 2 - Installing a web server"[3]へ進むと、タイトルの通りサーバの事が書いてあります。
ここまで集めた情報から判断するに、どうにもやはりPhaserはhtml単体で動かす事が可能なようです。
Phaserのお勧めはWAMP.Netとのことですが、既に少々構築してあるnginxで動かすことを想定しているので、これには従わないという事になります。
Phaserをローカル(Windows11)で動かしてみる
Phaserをローカルで動かしてみます。
実は何かしらのhtmlファイルにに"Getting Started with Phaser 3 Part 5 - Hello World!"[4]の内容をコピペする"だけ"で、Phaserのロゴが跳ね回るページは表示されます。ローカルでのHello World!は達成！………これでは意味がありません。
というのもチュートリアルのコードでは、ローカルに見えて全く別のサーバからスクリプトを呼んでいるからです。htmlファイルにこのコードをコピペするだけで、Phaserをダウンロード/インストールなどせずともこのチュートリアルはできてしまいます。
ちゃんとしたものを探ります。
まず、GitHub[5]からPhaserをzip形式で落とします。(2025/1/1時点v3.87.0)
zipを解凍し、phaser-3.87.0の直下にindex.htmlを作成、"Getting Started with Phaser 3 Part 5 - Hello World!"[4]の内容をコピペします。
headタグ > scriptタグ で呼び出されているjsファイルに注目すると、"https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser-arcade-physics.min.js"というパスです。phaser@3.60.0以降はzipファイルの中身に対応するものがあるので、ここを"./dist/phaser-arcade-physics.min.js"に書き換え、VSCodeのLiveServerなどでサーバを立ち上げると同じように動作します。(localhostとしてサーバを立ち上げないとGoogleChromeはオリジンがnullとなって動作しませんでした)
ちなみに、インターネット接続を切ってこのスクリプトを動作させると、ロゴのパスが通らなくなるので代替の画像が表示されます。(画像をローカルに落としてパスを変えると正常に動作しました)
これでPhaserが完全ローカルで動作する事が分かりました。つまり、Hello World! 成功です。
リモートで動作させる
Phaserはライブラリなので、前章のようにライブラリにアクセスさえあれば動きます。
(ライブラリなら当たり前ではあります)
pyrhonのimportやC/C++の#includeのように呼び出して使うものです。では、nginxで構築してみましょう。
はっきり言ってしまうと
<script src="https://cdn.jsdelivr.net/npm/phaser@3.87.0/dist/phaser.js"></script>でライブラリを呼び出すだけで究極的には動きます。
要はライブラリを「どこから呼び出すか」だけが問題なのでした。ということで、リモートだろうが、ローカルだろうがどこに置いていようが「アクセスできればどこでもよい」のです。
TypeScriptやNode.jsを使う場合はそれを動かす環境が必要ですが、JavaScriptだけならそのまま呼び出せます。
まとめ・次回予告
長くなりそうなので一度ここで区切ります。
今回はPhaserを動かしてみました。次回もPhaserで制作を続けていきます。
参考
[1]:PHASER: Tutorial Making your first Phaser 3 game Part 1 - Introduction
[2]:Zenn@nyoroko: PhaserでHTML5ゲームを作ってみた
[3]:PHASER: Tutorial Getting Started with Phaser 3 Part 2 - Installing a web server
[4]:PHASER: Tutorial Getting Started with Phaser 3 Part 5 - Hello World!