Phaser 3 | group関連のサンプルコード集

2020-09-15Phaser 3 オブジェクト,Phaser 3

Phaser 3でオブジェクトのgroupを作成、追加、削除などのgroup関連のサンプルコードまとめです。

※当サイトの記事で紹介しているサンプルコードは物理演算に2D Phaser3ゲームで主流のArcade Physicsを利用しています。
Arcade Physicsの主な機能を扱うため、紹介するコードもArcade Physicsに対応したものとなっています。

groupの作成

add.group()を使ってシーンに新しいgroupを作成します。

let group = this.physics.add.group();

Arcade Physicsを使わない場合は以下のようになります。

let group = this.add.group();

groupにオブジェクトを追加する

Groupにオブジェクトを追加するサンプルコードです。add()を利用します。

group.add(obj);

複数のオブジェクトを同時に追加する場合はaddMultiple()も利用可能です。
addMultiple()では配列で追加するオブジェクトを指定します。

group.addMultiple([obj_A, obj_b]);

groupからオブジェクトを削除する

Groupから既に追加されているオブジェクトを削除するサンプルコードです。

group.remove(obj);

一度には全てのオブジェクトを削除する場合はclear()が利用可能です。

group.clear();

groupに追加されているオブジェクト情報を取得する

Groupに追加されているオブジェクトを取得するにはgetChildren()が利用可能です。
getChildren()は配列としてGroup内のオブジェクト情報を取得します。

let group_children = group.getChildren();

groupのオブジェクトをシャッフルする

shuffle()にてgroup内のオブジェクト情報をシャッフルすることができます。

group.shuffle();

groupを破棄（削除）する

Groupはdestroy()で破棄（削除）することができます。

group.destroy(true);

groupの位置を設定する

groupの位置を指定することが可能です。

group.setX(value);
group.setX(value, step);

group.setX(value);
group.setY(value, step);

group.setXY(x, y);
group.setXY(x, y, stepX, stepY);

groupの角度を変更する

groupはgroup全体の位置を角度することが可能です。

group.angle(value);
group.angle(value, step);

group.rotate(value);
group.rotate(value, step);

group.rotateAround(point, angle);

group.rotateAroundDistance(point, angle, distance);

groupの表示・非表示を切り替える

setVisible()はgroup単位で表示・非表示を指定することが可能です。
toggleVisible()は、表示・非表示を切り替えることが可能で、ボタンで表示、同ボタンで非表示にできる要素などに有効です。

group.setVisible(trueまたはfalse);

group.toggleVisible();

groupの透過を変更する

setAlpha()はgroupの透過度を設定・変更できます。

group.setAlpha(value);
group.setAlpha(value, step);

groupの色合いを変更する

setTint()に指定可能な値は16進数のカラーコードとなっています。（0xff00ffなど）

group.setTint(value);
group.setTint(topLeft, topRight, bottomLeft, bottomRight)

groupのブレンドモードを設定する

setBlendMode()でgroupのブレンドモードを変更できます。

group.setBlendMode(value);

groupのscale（スケール）を設定する

scaleX()やscaleY()でgroupのスケールを変更できます。

group.scaleX(value);
group.scaleX(value, step);

group.scaleY(value);
group.scaleY(value, step);

group.scaleXY(scaleX, scaleY);
group.scaleXY(scaleX, scaleY, stepX, stepY);

groupのorigin（原点）を設定する

setOrigin()でgroupの原点を変更できます。

group.setOrigin(originX, originY);
group.setOrigin(originX, originY, stepX, stepY);

groupのdepth（深度）を設定する

setDepth()でgroupの深度を変更できます。

group.setDepth(value);
group.setDepth(value, step);

groupのアニメーションを再生する

playAnimation()でgroupのアニメーションを変更できます。

group.playAnimation(key, startFrame);

groupのヒットエリアを設定する

setHitArea()でgroupのヒットエリアを変更できます。

group.setHitArea();