pixi.js+Typescript自作ゲームエンジンの使い方

2020年3月2日

私がGithubで公開しているpixi.jsを使ったゲーム開発テンプレートの使い方を説明します。

▷▷▷　https://github.com/inwan78/pixijs-game-template

このテンプレートはSmith氏の「HTML5 ゲーム開発の教科書」をもとに私がミニゲーム開発用に改造したものです。enchant.jsのように気軽にゲーム開発できるようなテンプレートに仕上げているのでゲーム開発に興味がある方は使ってみてください。

ちなみにこのテンプレートでつくったゲームも貼っておきます。どんなものができるか気になる方はぜひ一度遊んでください。

WGCコスモのブラウザゲーム館

ファミコン風アクションゲーム「トイレへの道」 | WGCコスモのブラウザゲーム館

https://games.wgc-cosmo.com/game/toilet/

トイレまでの険しい道を戦い抜くファミコン風の本格レトロ横スクロールアクションゲーム。スマホのブラウザでもばっちり遊べます。

1 開発環境と実行の仕方
2 データの保存場所とResouce.tsについて
3 Config.tsで設定変更できる
4 ゲームプログラムの処理の流れ
5 LoadingSceneでデータを読み込む
6 シーンの切り替えについて
7 フレーム毎の更新処理について
8 InputManagerについて
9 音楽の再生について
10 ローカルストレージについて
11 Functions.ts、PixiExtend.tsについて
12 今後改善が必要なところ
13 テンプレートを公開した理由
14 HTML5ゲームの教科書を買おう

開発環境と実行の仕方

開発にはnode.jsとvisual studio codeが必要です。インストールしていない方は検索して入れてください（私は説明できるほど詳しくないです(;^ω^)）。

私のテンプレートをダウンロードしてvisual studio codeで開いき、「ターミナル」→「新しいターミナル」を開いて以下のコマンドを実行すると必要なモジュールのインストールが実行されます。

npm install

インストールが終わったら

npm run server

と入力するとプログラムのコンパイルが始まります(ちょっと時間がかかります)。コンパイルが終わるとブラウザのURL欄に「localhost:8080」と入力するとゲームが起動して遊べるようになります。

この状態でプログラムを変更・保存すると自動的にコンパイルされブラウザに反映されます(めっちゃ便利！)。終了したいときはCtr+Cを押してください。

ゲームが完成しリリースしたい場合は

npm run build

と入力するとwwwフォルダにjavascriptファイルとして書き出してくれます。自分のサイトなどで公開する場合はこのwwwフォルダ内だけアップロードすればOKです。

データの保存場所とResouce.tsについて

ゲームに使う画像ファイルや音楽ファイルはwwwフォルダ内のassetsフォルダに置きます。

プログラム内で扱うファイルはResource.tsファイルのResourceオブジェクトに記述して使います。基本的に使うのはImage（画像）、SE（効果音）、BGMだと思います(それ以外の部分についてはまた書きます)。ファイルのパスはassetsファルダから下の分だけでOKです。

assetsフォルダにファイルを置いてResource.tsに記述すれば後は勝手にプログラムがロードしてくれます。

Config.tsで設定変更できる

ゲームの基本部分の設定をConfig.tsのConfigオブジェクトにまとめてあります。

画面のサイズや音の大きさ、キーボードの入力ボタンの設定などはここで変更できます。

ゲームプログラムの処理の流れ

ゲームプログラムはindex.tsから始まってGameManagerで様々な初期化処理が行われてゲームが動きます。

初期化処理が終わると画像や音楽ファイルの読み込みが始まります。

その後はタイトルシーンやゲームシーンなど各シーンを必要に応じて切り替える感じでゲームが進行します。

LoadingSceneでデータを読み込む

私のテンプレートではsmith氏のサンプルと違いデータの読み込みは一番最初のロードシーンで行われるようになっています。

「Now Loading…」の文字と読み込み状況を知らせるパーセンテージだけが表示されるシンプルな内容になっています。

読み込み中に自己ブランドのロゴなんか表示するように改造するとかっこいいかもしれませんね。

シーンの切り替えについて

ゲームはいくつかのシーンによって構成されています(基本的にこのテンプレートを使ったゲーム開発ではシーンにプログラムを書いていきます)。

シーンはタイトル画面・メインゲーム画面・ポーズ画面・ゲームオーバー画面など役割ごとに分けて作成します。ゲームはこれらのシーンを切り替えながら進行します。

シーンの切り替えは

GameManager.loadScene(new LoadingScene());

のように行います。フェードアウトさせたい場合は

this.beginTransitionOut(() => GameManager.loadScene(new MainScene()));

とするとシーン遷移時にフェードアウト処理を行います(シーンのtransitionOutをFadeにしていた場合のみ）。

フェードインは

this.transitionIn = new Fade(1.0, 0.0, -0.02);

を指定しておくと自動で行われます(この部分を削除するとフェードインせず即切り替わります)。

ポーズ画面などのように一時的に他のシーンの上に表示させたいシーンは

GameManager.pushScene(new PauseScene());

で行います。pushSceneで上にシーンを表示させた場合、下になっているシーンは停止します。下のシーンに戻りたい場合は

 GameManager.popScene();

で戻ります。

フレーム毎の更新処理について

このテンプレートではFPS60になっていて秒間に60回更新処理が行われています。

この更新処理についてはSmith氏のサンプルのままになっているので氏の本を購入してもらうのが一番ですが、簡単に説明するとupdate()が更新処理を行うメソッドでこれを持っているのはSceneクラスとUpdateObjectです。

Sceneクラスはカレントになっているシーンだけが更新処理が行われます。

Spriteなどのクラスは自動更新処理は無いのでUpdateObjectをimplementsで実装します。そしてそれをSceneのregisterUpdatingObjectメソッドで登録するとそれぞれのオブジェクトでupdate処理を書いて更新を行うことができるようになります。

InputManagerについて

これは私がキーボード入力を使えるように作ったものです。

Config.tsのkeysで指定した各ボタンの状態を管理します。各ボタンは「今押した(DOWN)」「押しっぱなし(HOLD)」「押していない(UNDOWN)」「離した(RELEASE)」の4つで押されている状態を管理します。

各ボタンの押したかどうかの判定は以下のように書きます。

if(InputManager.checkButton('Start') == InputManager.keyStatus.DOWN){
  //押したときの処理
}

ただし、InputManager.checkButtonは毎フレーム各ボタン一回だけの使用にしてください。2回以上使う場合は値を保存して使ってください。

方向キーの入力の判定は少し変わっていて、4つのボタンを2進数の1桁ずつ(0000)として考えて左下右上の順番に割り振っています。そして押されたボタンの数字を足した合計が方向となります。

例：左なら1000で8、左上なら1001で９、右上なら0011で3

合計の数字が8方向以外になった場合は入力を無視するようになっています。

音楽の再生について

BGMの再生は各シーンにBGM再生用のメソッドがあります。

最初にsetBgm(ファイル名)でBGMをセットしてplayBgm(ボリューム)でプレイします。Config.tsで音量の設定がありますが、再生ごとにも調整できた方が良いと思ったのでplayBgmでボリュームを引数にしています。ボリュームを変える場合はCongig.Volume.Bgm * 0.5という具合に書けばいいと思います。

ほかに停止のstopBgm()、一時停止のpauseBgm()、再開のresumeBgm()があります。

効果音はSoundManageのplaySound(ファイル名, ボリューム)で鳴らすことができます。ただ、この再生方法では同じ効果音を複数同時に鳴らすことができないので、複数同時再生できるようにクローンを作って再生するクラスSoundPlayerをFunctions.tsに作ってあります。SoundPlayer(ファイル名、クローンの数)でクラスを生成してplayメソッドで再生します。playメソッドではクローンを順繰りに再生します。