🐦

【phina.js】グループ管理の基本テクニック

2022/06/10に公開

JavaScript

はじめに

通常ゲームを作る時には、配置物や敵キャラなどをグループとして管理する必要性がいずれ出てきます。この場合、一般的には配列を使用することになると思いますが、phina.jsでは、 DisplayElementクラスがオブジェクトのグループ管理用に良く使われます。

DisplayElementクラスについて

DisplayElement クラスは、アルファ値 などを持った基本クラスで、 Shapeなどの継承元です。更に基底のElementクラスなどを使うこともできますが、最低限の要素しか持っていませんので避けた方が良いかと思います。

グループの作成

以下がDisplayElementを使ってグループを追加する例です。

var group = DisplayElement().addChidTo(this)

オブジェクトをグループに追加する

オブジェクトは直接Sceneに追加するのではなく、 groupに追加していきます。
以下はCircleShapeを追加する例です。

CircleShape().addChildTo(group);

childrenを常に意識する

追加されたオブジェクトは、グループのchildrenという子要素配列に格納されており、上記の場合だと、 group.childrenで参照することができます。
このchildrenを常に意識しておくことが、オブジェクトのグループ管理では大切になってきます。

グループからオブジェクトを削除する方法

children自体は配列です。通常の配列に行う操作は一通り可能ですが、折角なので、今回はphina.jsで拡張されているArrayクラスのメソッドを使ってみたいと思います。
API Documentation：Array

最初の要素を削除する

firstプロパティで最初の要素を参照できますので、以下のようにします。

group.children.first.remove();

最後の要素を削除する

lastプロパティで最後の要素を参照できますので、以下のようにします。

group.children.last.remove();

条件にマッチした要素を削除する（単発）

eraseIfメソッドを使います。引数には、削除される条件を書いた無名関数を与えます。 trueを返した場合、その要素が削除されてループ処理から抜けます。

group.eraseIf(function(elem) {
  if (elem.fill === 'red') {
    return true;
  }  
});

条件にマッチした要素を削除する（一括）

eraseIfAllメソッドを使います。使い方はeraseIfと同じですが、1回のループで条件にマッチした要素を一括で削除することができます。

group.eraseIfAll(function(elem) {
  if (elem.fill === 'red') {
    return true;
  }  
});

要素を全て削除する

clearメソッドを使います。

group.children.clear();

要素のプロパティの一括変更

グループに追加された要素に対して、拡大、回転、アルファ値などのプロパティを一括で変更することもできます。ただし、拡大や回転については、 groupの原点を変更するなどの工夫が必要です。

// 拡大
group.scaleX = 1.2;
// 回転
group.rotation = 45;
// 透明度
group.alpha = 0.5;

サンプルプログラム

これまで紹介した内容は、以下のサンプルで実際に動作確認できます。

まとめ

グループ管理は、ゲーム制作において不可欠な要素と言えるかと思います。
管理の方法は個々で異なると思うので、今回はその一例とお考え下さい。
phina.jsの機能を色々と試して、自分に合った効率的な管理方法を是非見つけて下さい！