Phaser 3 | UIの固定表示、UI用カメラの作成・設定方法

2020-09-14Phaser3 カメラ,Phaser3

UIの固定表示、UI用カメラの作成・設定方法

Phaser 3でUI用のカメラの作成・設定方法のサンプルコードです。

Phaser 3では主にUI用のカメラをシーンに追加して表示するオブジェクトを設定する方法と、UI用のシーンを作成してゲームのシーンと同時に走らせる方法があります。

この記事ではUI用のカメラをシーンに追加して表示するオブジェクトを設定する方法を紹介します。

また、UIカメラは、UIの表示・非表示を切り替える仕組みが必要であったり、メインカメラがプレイヤー追従型であったり、スクロールを含むゲームの場合に有効となります。

紹介しているサンプルコードを使っているサイドビュー視点のサンプルゲームです。

 

※このサンプルゲーム内のコードでは、紹介しているコードに変更・追加が加えられている場合があります。

シーンにUI用のカメラを追加する

カメラをプレイヤー追従させるサンプルコードです。

カメラの追従設定にはstartFollow()を利用します。基本的に2Dゲームであればサイドビューもトップダウンも指定・設定に大きな違いはないと思います。

基本的な設計であれば、widthにはゲームキャンバスの横幅、heightには高さが代入されます。

this.uiCamera = this.scene.cameras.add(0, 0, width, height);

UI用のカメラからUI以外のオブジェクトを非表示にする

ignore()を利用してUI用のカメラからUI以外のオブジェクトを非表示にしていきます。
一括指定ができませんが、Groupでの指定は可能となっています。

this.uiCameras.ignore(player);
this.uiCameras.ignore(map);
...

UIカメラからUIオブジェクト以外のオブジェクトを非表示にすることで、メインカメラにて画面がスクロールしてもUIオブジェクトは固定表示になります。

メインカメラ側でUIオブジェクトを非表示にしておきます。

this.mainCamera.ignore(ui);

補足

サンプルコードの基本構造とconfig設定

サンプルコードのphaser3を利用している基本構造やconfig設定について、以下の記事にて紹介しています。

Phaser 3 | サンプルコードで利用している基本構造 | ONE NOTES

サンプルで利用している素材、データファイルの一覧

サンプルコードで利用している素材、データファイルの一覧を以下ページで紹介しています。

2020-09-14Phaser3 カメラ,Phaser3

Posted by Yousuke.U