Phaser 3 | カメラをプレイヤーに追従させる方法

2020-09-15Phaser3 カメラ,Phaser3

カメラをプレイヤーに追従させる方法

Phaser 3でカメラをプレイヤーに追従させる方法のサンプルコードです。

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

 

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

カメラをプレイヤーに追従させる方法

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

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

mainCamera.startFollow(target, true);

プレイヤーを追従したいカメラにstartFollow()でプレイヤーを指定することで実装可能です。

例えば、「mainCamera」というカメラを作成して、「player」というプレイヤーオブジェクトを追従する場合のサンプルコードです。

mainCamera = this.scene.cameras.main;
mainCamera.startFollow(this.player, true);

追従する範囲を指定する

setBounds()を利用して、プレイヤーの追従を可能とする範囲、追従を停止する位置を指定できます。

正確には「カメラがスクロール可能な範囲を設定する」ですがstartFollow()はsetBounds()の設定を優先します。

mainCamera.setBounds(x, y, width, height);

タイルマップを使ったサンプルゲームでは以下のように指定しています。

//16×16ピクセルのタイルサイズで横100タイル×縦20タイルのタイルマップ
mainCamera.setBounds(0, 0, 100 * 16, 20 * 16);

補足

Gameについて

当サイトのサンプルコードでは、create()の最初にthisをGame.sceneに代入しています。
Game.sceneに代入しない場合は「Game.scene」を「this」に置き換えて下さい。

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

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

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

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

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

2020-09-15Phaser3 カメラ,Phaser3

Posted by Yousuke.U