「Phaser3」でブラウザゲームつくろう!

こんにちは、最近FPSばっかりやって引きこもっているYMOです。誰か飲みに誘ってくださな~。

早速ですが、プロジェクトでゲームフレームワークを調査する機会があったので、「Phaser(フェイザー)」について纏めたいと思いますっ!

Phaser(フェイザー)とは?

「Phaser」は2Dのブラウザゲームを作ることができるゲームフレームワークです。
ゲーム開発によく使われるオートスケールや物理エンジンなどの機能が既に内包されているため、1から作るのに比べると簡単にブラウザゲームを作ることができます。
現時点の最新Verは3で、オープンソース(MITライセンス)になりますので、必要であればフレームワークの拡張なども可能です。

その他、国内でメジャーなゲームフレームワークでは、enchant.js と PixiJS などがありますが(他にもフレームワークは無数にありますが)、enchant.jsは国産で有名でしたが長らく更新されていませんので利用は難しく、PixiJSはレンダリングに特化したエンジンですので、アニメーションやエフェクトは作りやすいですが、ゲーム絡みで必要なモジュールがあれば開発者が追加していく必要があるため、ゲームを作るのであればPhaserは有力候補となります。

ブラウザゲームとは?

Phaserがブラウザゲームが作れるよ!と言いましたがそもそもブラウザゲームとは何なのでしょう。
※今回はスマホ向けのブラウザゲーム開発を前提に話を進めます。

ブラウザゲームとはSafariやchromeで遊べるゲームのことです。
よく比較されるスマホアプリとの大きな違いは、スマホアプリはAppStoreやGooglePlayからアプリをインストールする必要がありますが、ブラウザゲームはインストールは不要でWindowsやMac、Androidのブラウザからアクセスすることでゲームをプレイすることができます。
ブラウザゲームはスマホアプリに比べ、気軽に遊べることが最大のメリットかなと思います。

ブラウザゲームのメリット・デメリット

スマホアプリと比較したメリット・デメリットになります。

■メリット

  • アプリのインストールが不要なので、すぐにプレイでき参加しやすい(スマホアプリはインストールが必要で且つ端末のストレージを使うため重たいアプリは削除対象となってしまう)
  • ブラウザに対応するのでOS毎の開発が不要で工数が比較的少なく済む(スマホアプリはiOS/Android向けに製造が必要なためコストがかかる)
  • ゲームのアップデートが任意のタイミングで簡単に行える(スマホアプリをアップデートする場合はAppStore/GooglePlayへの申請が必要なため更新に時間がかかる)

■デメリット

  • グラフィックの品質やアニメーション、特に3Dやインタラクティブコンテンツはスマホアプリにくらべ表現力が下がる、または処理に時間がかかったり端末によってはカクついたりする
  • プッシュ通知が送れないため、リアルタイムでのアプローチができない
  • ブラウザの上下にアドレズバーやメニューバーが表示されるため没入感が低い
  • 都度グラフィッフを読むため通信容量が大きくなる(Webもローカルストレージを持っているが容量が5Mのためスマホアプリにくらべ通信料が増す傾向がある)

総じて、スマホアプリの方がクオリティが高いものが出来ますが、開発と運用コストが高くなります。

今ではUnityやReact Native、Flutterなどのハイブリッド開発も一般的ではありますが、それでもブラウザに比べると開発工数は大きくなってしまいますので、実現したい施策やサービス内容になり、どちらを選ぶか検討することになります。

「Phaser」の特徴

「Phaser」は以下のような特徴があります。

  • 2Dゲーム制作において代表的なライブラリ
  • 2DのアクションやRPG、ノベルゲームの開発に向いている
  • オートスケールや物理エンジンなどの機能が既に内包されている
  • WebGLで2Dグラフィックの描画を高速で処理できる
  • 現在も更新が続いておりドキュメントも豊富
  • MTライセンスのため仕事でも利用できる
  • Webサーバとコードエディタ、あとJavaScriptが動く環境があれば開発できる
  • Javascriptの1ライブラリなので、他のライブラリやWeb技術と組み合わせることができる

基本的には無料で使えるので文句はありませんが、3Dゲームや本格的なゲームとなるとUnityなど他のツールが候補にあがってくるかと思います。

今回はゲームフレームワークの調査を行いましたので纏めましたが、開発を行った際は工程や実現方法なども書きたいと思いますのでお楽しみに!

以上、「Phaser」のお話でした!!