ブラウザ2Dゲームエンジン Phaser をはじめよう！（環境の構築）

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

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

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

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

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

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

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

フロントエンドのWebアプリケーション開発において、人気の高いプログラミング言語 **PHP** や **Python** を勉強したことのある人であれば、ローカルサーバの必要性というのはなんとなくわかるかと思います。
 
## 余談...
最近Web向けのアプリケーション開発とかプログラミング言語に興味が出始め、あまり開かなかったGithubを珍しく開くと [GameOff](https://itch.io/jam/game-off-2018) というジャムイベント（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](https://phaser.io/)

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

**1. [Phaserパッケージを入手する](#phaserパッケージを入手する)**
**2. [ローカルサーバの構築（XAMPPの導入）をする](#ローカルサーバ環境の構築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** にでも移動したあと）

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

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

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

```terminal
$ npm install phaser@3.15.1
```

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

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

## ローカルサーバ環境の構築（XAMPPの導入）
[こちらのページ](https://www.apachefriends.org/jp/index.html)から自分のOSに当てはまる XAMPP をダウンロードしましょう。
インストールは基本的に **[Next]** を押していけば良いです。
途中でわからなくなってしまった人は[こちらの記事](https://qiita.com/t_hori_20030/items/7d021d7720303c7a3d51)を参考にしてください。

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

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

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

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

<!--
## Node.js のインストール
次にNode.jsの環境を構築します。

「Node.jsってなに？」という記事はたくさんあるので、ここでは特に説明はしません。解説記事のリンクだけ紹介しておきます。
→→ [いまさら聞けないNode.jsの基礎知識とnpm、Gulpのインストール](http://www.atmarkit.co.jp/ait/articles/1501/09/news040.html)

これもXAMPP同様、Node.jsの[公式サイト](https://nodejs.org/ja/)から手軽にインストーラをダウンロードできますので、推奨版をダウンロードしましょう。

※インストーラのパッケージツールを選択する画面で「**npm**」は欠かさないでください（デフォルトでチェックが入っていますので、特に気にしなくて良いです）。

**Npm**とはNode.jsのモジュールを管理するためのツールです。

Npmをインストール後、コンソール上で`npm -v`と入力すると、npmのバージョンが見られれば導入成功です。
以下のコマンドを実行しましょう。

```terminal
$ npm install phaser@3.15.1
```
-->

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

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

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

最後に`http://localhost/index.html`にアクセスして、下図のような"PHASER"のロゴが画面上を動き回っていれば完了です！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/258689/274769b3-f5b6-2cf9-d82b-f20525802a75.png)

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

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

本格的に一から作れるようになりたくなったら、[Phaser Shop](https://phaser.io/shop) からドキュメントを購入してみるのも良いかと思います。

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

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