Phaser 3 | 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
サンプルで利用している素材、データファイルの一覧
サンプルコードで利用している素材、データファイルの一覧を以下ページで紹介しています。