はじめに
諸事情によりブラウザで動作する簡単なゲームを作る講座を開くこととなりました．いくつかのライブラリを調べた結果，Phaserにたどり着きました．こちらの特長は以下のとおりです．実際にまだ使いこなす前なのですべて推測です．
- ブラウザで動作するアプリを簡単に作れそう
- 作ったアプリを簡単に公開できるプラットフォーム(たとえばこちら)があるらしい
- JavascriptまたはTrueScriptで開発ができるらしい
- 日本ではあまりまだメジャーでないため，英語で説明されたサイトが多いらしい
作るゲーム
チュートリアルを使えば簡単なゲームを自分のパソコンのブラウザで動作させられることを確認しました．あとはゲームのネタを考えてそれを実装してみようと思います．今考えているネタは以下の感じです．
- 主人公は小鳥
- 横スクロール
- 地面には栄養価の高い虫がいるのでそれを取ると得点が多く増える
- 地面には敵である猫が跳ねているため，あまり地面に近づきづらい
- 木には栄養価の低い虫がいるのでそれを取ると得点が少し増える
- 空には敵であるカラスが横一直線で飛んでくる
絵心が全くないので問題は各キャラクタをどう入手するかです．こちらのサイトでフリーの画像が得られそうです．本当はアニメーション(例えば鳥は羽ばたいていたり，猫はジャンプしているときと地面にいるときで画像を変える)とかしたいですが，もうこの際そこは目をつぶることにしました．
これがプレイヤーです．鳩にしました．
これがカラスです．
これが猫です．
これが通常の虫です．芋虫です．
これが特別の虫です．テントウムシです．
Phaserの開発環境
数少ないPhaserの紹介サイト(日本語)では，割とnpmでインストールする方法が述べられているのですが，もっと気楽にWindowsで始められるようにする方法をここでは説明します．要は必要なファイルを公式サイトからダウンロード＋解凍するだけにし，VS Codeに必要なプラグインをインストールすることでローカルのパソコンで動作を確認するというような感じです．こちらのサイトを参考にしました．
Phaser本体のダウンロード
こちらのサイトに最新のPhaserが置かれています．下の図はバージョン3.90.0の場合です．下の方にzipファイルがあります．こちらをダウンロードしてください．
解凍
舶来のプログラムは日本語のパスが含まれるとどうなるかよくわからないので，例えば下のようにCドライブ直下へ置いてください．
Visual Studio Codeのプラグイン
Live Serverというプラグインを入れるといい感じです．下の図はVisual Studio Codeのプラグインをインストールしている様子です．検索ワードとしてLive Serverを入力してインストールしてください．
開発の流れ
先ほどCドライブの直下に置いたフォルダを開き，そこにhtmlファイルを置きます．ここでは試しにindex.htmlファイルを置いてみます．下の図はVisual Studio Codeでフォルダを開いている様子です．このあと現れるファイルセレクタにて，先ほど解凍したフォルダを指定してください．
次にindex.htmlファイルを作成します．下の図のように新規作成ボタンを押し，ファイル名をindex.htmlという名前を付けます．
開いたindex.htmlについて，HelloWorld的なプログラムを書きます．こちらのサイトにプログラム(正確にはHTMLファイルにJavaScriptが含まれているもの)がありますので，コピーしてindex.htmlにペーストします．下の図はペーストしたのちの様子を表します．このあと，Live Serverで動作を確認します．下の図のように画面右下に「Go Live」というところがありますので，こちらをクリックしてください．そうするとブラウザで動作し始めるはずです．
下の図は動作し始めた時の様子を表します．ローカルパソコンで動いているため，IPアドレスは127.0.0.1となっています．また，Live Serverでは5500番ポートを使うようです．
おわりに
たったこれだけでプログラムを作る下地が出来上がりです．このあとは横スクロールのプログラムを探し出し，上記のアイコンを使ったゲームを作成していこうと思います．なんとなくこちらのサイトにあるものが参考になりそうです．こちらも使えそうです．あとでしっかり読みます．