この記事で紹介すること

本記事では以下のような方に向けてPhaserを紹介する記事です。

本格的なブラウザゲームを作ってみたいけど、どう始めれば良いかわからない方
何でも良いけど、ゲーム開発環境構築に悩んでいる方
とりあえず、ゲームを作ってみたい！（←私）

また、本記事では以下のポイントに分けて説明します。

Phaserってなに？
Phaserの導入
- Phaserパッケージのダウンロード
- ローカルサーバ環境の構築（今回は手軽に始められるPHP開発環境構築アプリ"XAMPP"を使用します）
Phaserの動作確認

途中で、ローカルサーバを構築するステップがあります。

近頃のウェブページは動的なものが一般的で、基本的にリアルタイムでWebサーバに接続して自分のほしい拡張機能、環境（例：Node.js）を引っ張り出して、ウェブサイトを構築することが多くなってきています。

公開するつもりはない個人用のウェブサイトであっても、Webサーバ上にある拡張機能を使用するためには、ローカルサーバを構築しなければなりません。Phaserもエンジンを動かすためにはWebサーバに接続しなければなりません。

フロントエンドのWebアプリケーション開発において、人気の高いプログラミング言語 PHP や Python を勉強したことのある人であれば、ローカルサーバの必要性というのはなんとなくわかるかと思います。

余談...

最近Web向けのアプリケーション開発とかプログラミング言語に興味が出始め、あまり開かなかったGithubを珍しく開くと GameOff というジャムイベント（11月で終了）、ゲームアプリのコンペを見つけた。いろいろと読んでいたら、「Help—I’ve never created a game before!」っていう節を見つけ、ゲームを作ったことない人向けの代表的な開発環境を紹介している中に「Phaser」というのを見つけた。

そんな私はJavaScriptをウェブサイト作成上、軽く触ったことある程度で、全くゲームを作ったことがない。そのため、理解不足と思しき箇所やわかりにくい箇所はコメントにてどんどん指摘していただければ幸いです。

Phaserってなに？

Phaser とはHTML5用ブラウザゲームのオープンソースプラットフォームで、2Dゲーム向けのエンジンです。

しかし、このエンジン、侮れない。
サウンドや物理演算といった本格的な仕込みも可能でかつ高速に動作するのがウリだそうな。

また、PhaserはMITライセンスのもとでリリースされていますので、商用利用可能です。

早速、ウェブサイトにアクセスしてみましょう！
→→ Phaser - A fast, fun and free open source HTML5 game framework

Phaserの導入

ここからは Phaser を動作させるまでの環境を構築する方法を以下の2ステップに分けて説明します。動的ウェブサイト構築経験のある方であれば一瞬だと思います。

1. Phaserパッケージを入手する
2. ローカルサーバの構築（XAMPPの導入）をする

Phaserパッケージを入手する

Phaser.io より [DOWNLOAD] に進むと、Phaserの始め方をステップで紹介しているページに飛びます。
「Download Phaser from GitHub」と書かれている画像をクリックすると、Phaserパッケージのダウンロードページに移動します（記事作成時（2018年12月03日）では、3.15.1 (Batou) が最新となっています）。

今回は git でクローンを作成する方法でダウンロードしたいと思います（「gitって何だよ」って言う人はWindowsなら.zip、macOSなら.tar.gz版を「ダウンロード」ディレクトリにひとまずダウンロードして展開しておきましょう）。

Git環境が入っている人はターミナル上で（ひとまず ~/Downloads にでも移動したあと）

$ git clone https://github.com/photonstorm/phaser.git

と入力してクローンを作成しましょう。

※補足
Node.js環境をインストールしたことのある人はnpm -vと入力してnpmコマンドが使用できることを確認した後、

$ npm install phaser@3.15.1

と入力すれば、phaser が入手できます。

どの手法を用いようと、この段階でひとまず「phaser」という名前のフォルダが自分のPCにあることになると思います。

ローカルサーバ環境の構築（XAMPPの導入）

こちらのページから自分のOSに当てはまる XAMPP をダウンロードしましょう。
インストールは基本的に [Next] を押していけば良いです。
途中でわからなくなってしまった人はこちらの記事を参考にしてください。

XAMPP Control Panel を起動しましょう
[NetStat]を開き、Port番号80と443がほかのアプリで使用していないかを確認しましょう（Skypeを起動していると同一のPort番号を使用するため、セキュリティ上の仕様でApacheが起動しません）
使われていないことを確認したら、Apacheを起動してみましょう。**[Start]**を押すと、PID(s)とPort(s)に番号が表示され、「Apache」と表示されている部分が緑色になると思います
ブラウザのURLに「http://localhost/」と入力し、Enterを押します。「Welcome to XAMPP」というタブ名のページが表示されていれば、Apache の起動に成功です

さて、これで自分のPC上に自分だけのローカルサーバーが構築されました。サーバということはファイルを格納する場所がなければいけません。

XAMPPの場合は、インストールしたディレクトリから./xampp/htdocs/が実際にアップロードする場所になります。

例えば、Windowsの方でデフォルト設定でインストールした場合、インストール場所はC:\\xamppだと思いますので、絶対パスで書くとC:\\xampp\htdocs\となります。

Phaserの動作確認

ここまでは準備ばかりで退屈だったと思いますが、あと一歩でphaser環境が使えるようになりますので、頑張ってください！！

あとは以下の手順に従うのみです。

先ほどダウンロードした phaser フォルダ一式をhtdocsの中に入れてください
好きなエディタ（メモ帳でも良い）を立ち上げ、Getting Started with Phaser 3: Part 5 - Hello World! - Learn - Phaserにあるサンプルコードをコピペしてください
htdocs上でファイル名をindex.htmlとして保存してください

最後にhttp://localhost/index.htmlにアクセスして、下図のような"PHASER"のロゴが画面上を動き回っていれば完了です！

さいごに

環境の構築で満足せず、ここから自分の作りたいモノを作ってみましょう！
とは言っても、「どうやって進めていけば良いの？」ってなりますよね？

まずは公式サイトの [LEARN] から様々なチュートリアルが公開されていますので、そこから学んでみてはいかがでしょうか？

本格的に一から作れるようになりたくなったら、Phaser Shop からドキュメントを購入してみるのも良いかと思います。

私も始めたばかりで現在勉強中の身ですので、いろいろ調べながら作っています。

それでは、ここまで読んで方に感謝もしつつ、締めさせていただきます。