【pixi.jsテンプレート解説】Sceneクラスの使い方と作り方

公開しているpixi.jsゲーム開発用テンプレートのSceneクラスの使い方を説明します。

テンプレート　▷▷▷　https://github.com/inwan78/pixijs-game-template

データのロードはLoadingSceneで一括読み込み

私のテンプレートではSmith氏のサンプルプログラムのSceneクラスからデータのローディング部分を外して、ローディング部分はLoadingSceneクラスで一括してすべてのファイルを読み込むように変更しています。

そのためSceneクラスにロードに関するものが無くなっていてだいぶコンパクトなクラスになっています。

シーンはSceneクラスを継承して作成

各シーンはSceneクラスを継承して作成します。書き方はテンプレートのクラスを参考にしてください。

Sceneクラス自体はPIXI.Containerを継承して作られています。Containerはただの入れ物なのでタッチなどのイベントを受け付けないので注意してください。

クラスの初期化処理

constructorメソッドに初期化処理を書きます。

BGM、サウンド、背景、プレイヤー、UIなどシーン開始時に欲しいものがあればここで記述しておきます。

ループ処理について

ループ処理はupdate()メソッドに記述します。このupdateの内容が1秒間に60回行われながらゲームは動いています。

このupdate()メソッドに背景や敵キャラの移動などゲーム中に動くものの処理を書きます。

私のテンプレートではpixi.jsのクラスから拡張したcontainerやspriteクラスにupdate()が追加されています。このupdate()が機能するためには親となる要素にaddChildする際に専用のaddUpdateChildを使います。addUpdateChildで要素を追加することでupdate()が毎フレーム実行されるようになります。通常のaddChildではupdate()は機能しません。

シーンの切り替えとフェードイン＆アウトについて

シーンの切り替えはGameManagerにあるloadScene、pushScene、popSceneの３つのメソッドで切り替えることができます。

loadSceneは今のシーンから次のシーンへ完全に切り替える方法です。新しいシーンが表示されるときに古いシーンは消えます。タイトル画面からゲーム画面へ切り替えるような完全に違うシーンに切り替えるときはこれを使います。

pushSceneは今のシーンの上に新しいシーンを表示します。古いシーンは下で停止した状態で待機しています。popSceneはこの上に出ていたシーンを消して下で待機していたシーンに戻ります。ポーズ画面など一時的に表示したいシーンに使います。

 

フェードイン＆アウト処理はSceneのtransitionIn、transitionOutが行っています。Scene.tsではImmediateが設定されていてすぐ切り替わるようになっています。フェードを使う場合は各シーンのconstructorで

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

のようにFadeクラスを設定します。引数は初期値、終了値、増減値になっていて黒の画像のalpha値(0~1)を見える状態から見えない状態(またはその逆)にすることでフェードイン(アウト）してるように見せています。

BGM再生について

音の再生についてはSoundManagerが行っていますが簡単に扱えるようにシーンに再生に関するメソッドが作られています。

まずsetBgm(ファイル名)で使いたい音楽ファイルを設定してGameManagerのbgmNameにファイル名を保存します。これはポーズ画面やメニュー画面などシーンをまたがっても操作できるようにするためです。

playBgm(ボリューム)で再生します。再生時はボリュームを設定します。ConfigオブジェクトでBGMの音量を設定しているので使うときは

playBgm(Config.Volume.Bgm * 0.8);

のような感じにしてシーンに合わせてボリュームを調整すると良いと思います。

あとはstopBgm()で停止、pauseBgm()で一時停止、resumeBgm()で一時停止の停止位置から再生を再開します。