📚

Phaserでコンテナを使って親機と子機を実現

2022/05/28に公開

コンテナを利用した動きの実現

コンテナ

コンテナを利用するとゲームオブジェクトをまとめることができます。グループとは異なり、個別のゲームオブジェクトを保持するためのもの。

コンテナについて

スプライト画像の読み込み

ジェット機の画像をスプライト画像で読み込みます

https://github.com/hiroshees/phaser-game-sample/blob/main/src/work03.html#L19-L22

コンテナの作成

コンテナを作成します。今回は、コンテナがプレイヤーの役割をするので変数はthis.playerにします。コンテナを画面中央に配置します

https://github.com/hiroshees/phaser-game-sample/blob/main/src/work03.html#L59-L70

// コンテナの作成
コンテナオブジェクト = this.add.container(X座標, Y座標);

ジェット機の作成

3台のジェット機をゲームオブジェクトとして作成します。1台目を中央に配置、2台目を右側に配置、3台目を左側に配置します。3台のジェット機を作成して、コンテナに追加します。ポイントは、コンテナに追加する画像オブジェクトの座標です。コンテナに追加する画像オブジェクトの座標はコンテナ内での相対的座標です

https://github.com/hiroshees/phaser-game-sample/blob/main/src/work03.html#L73-L99

// コンテナに追加
コンテナオブジェクト.add(ゲームオブジェクト);

実行結果

画面には表示されていないコンテナがプレイヤーの役割をはたしています。移動させているのは中央のジェット機ではなく、あくまでも表示されていないコンテナです。コンテナに配置した3台のジェット機が移動します

Discussion