床まで落ちたコインを削除する

床まで落ちたコインを削除する

地面に触れたコインを削除するエンティティスクリプトを追加したいと思います。

床となるエンティティを設定する

1. ADD ENTITYをクリック

2. Boxを追加する

ヒエラルキーから床となるエンティティを追加します。

3. 名前を変更する

Box追加をしたら右側インスペクタタブから名前をfloorという名前に変更しましょう。

4. エンティティのサイズを大きくする

名前が変更できたら今度は大きさの調整を調整していきます。 大きさはこのくらいの大きさにしておきましょう。
要素
x
y
z
Scale
50
0.2
50

5. コリジョンを追加する

当たり判定を追加するために、COLLISIONを設定します。コリジョンの追加については、pusherと同じ要領で、床を選択した後、ADD COMPONENTから追加をしましょう。 1つプッシャーと違うのは、今回は物理演算をする必要はないため、RIGID BODYの追加と設定は行いません。
COLLISIONの大きさは下記のようにします。
要素
x
y
z
COLLISION - BOX -Half extents
25
0.1
25

6. 触れると削除するスクリプトを追加する

これからSCRIPTを、追加し触れたら対象のエンティティが削除されるようにします。 先程追加をした、floorのコリジョンに触れたときに動く関数を追加します。
  1. 1.
    floorを選択する
  2. 2.
    ADD COMPONENTからSCRIPTを追加する
  3. 3.
    Scriptからtrigger_destory.jsを追加する
1
const TriggerDestory = pc.createScript('triggerDestory');
2
3
TriggerDestory.prototype.initialize = function() {
4
this.entity.collision.on('triggerenter', this.onTriggerEnter, this);
5
};
6
7
TriggerDestory.prototype.onTriggerEnter = function(entity) {
8
entity.destroy()
9
}
Copied!

7. 起動してみよう

コインが触れると、触れたコインが消える床が追加されました。

8. マテリアルを追加して床を透明にする

床が追加されましたが、この床に色は必要ないので透明にします。その為のマテリアルを追加します。
  • MODELコンポーネントからMaterialをクリック
  • Opacityの設定をしているマテリアルがある、material/transparentというマテリアルを追加します。
これで透明な床を作ることができました。

イベントについて

PlayCanvasにはイベントを管理するためのメソッドが複数用意されています。これらを利用すると、PlayCanvasのアップデートのサイクルから外れたスクリプトを書くことができます。
メソッド
説明
on
イベントハンドラにイベントをアタッチします
once
イベントハンドラにイベントをアタッチします
off
イベントハンドラに追加されたリッスンを停止します
fire
イベントの発行をします
hasEvent
イベントハンドラにイベント名が存在するかチェックします

衝突について

PlayCanvasの衝突時に発行されるイベントにはTriggerCollisionの2種類があります。 先程追加をした、床のようにRIGID BODY設定されていないエンテティはTriggerとして振る舞います。Triggerエンティティに衝突が発生すると以下のイベントが発行されます。そのイベントは2種類あります。
イベント名
説明
triggerenter
エンティティがTriggerに入った場合に発行されます
triggerleave
エンティティがTriggerから抜けた場合に発行されます

エンティティの削除について

今回のスクリプトで床が消えるスクリプトはこちらになります。triggerenterが発生した場合に触れた対象のエンテティをentity.destroy()関数で削除をしています。
1
Trigger.prototype.onTriggerEnter = function(entity) {
2
entity.destroy();
3
};
Copied!

クローン元のエンティティは非表示にしておく

先程、最初からクローン元のコインを非表示に理由は非表示にしていない場合、クローン元のコインが削除されると、wallet.jsから参照しているCoinのクローン元であるコインが消えてしまい、Cloneができなくなってしまいます。 その問題を回避するためにクローン元のコインは非表示にしておきます。