チュートリアル - PlayCanvasでプッシャーゲームを作る 3/7 – PlayCanvas

テンプレート化をして1枚のコインを複製する

PlayCanvasではテンプレート化という機能がありますこれは、UnityでいうPrefab化と同じようなものになります。 テンプレート化をするメリットとしては同じエンティティを複数用意せずとも、1つ用意することでそれを複製して使用できます。Launchボタンからゲームを起動すると、今は１枚のコインが表示されています。この１枚のコインをテンプレート化し複数枚出現させます属性とテンプレート化の２つについてこの節では解説をしながら作っていきます。

属性について

PlayCanvasには属性(Attributes)という機能があり、コードを触らなくても、ゲーム内で使用される値を（初期値）PlayCanvas Editorから値を変更できます。

1. 隠れているエンティティを表示する

ヒエラルキーからwalletというエンティティを選択する
Enabled にチェックを入れます。

walletというエンティティはあらかじめwallet.jsというスクリプトが追加されています。
このエンティティは画面がタッチされたらコインを出すというスクリプトが追加されているエンティティで、大きさやコリジョンなどは持っておりませんが起動時には存在しているエンティティとなります。


  const wallet = pc.createScript("wallet");
wallet.attributes.add("Coin", { type: "entity" }); //複製するコインの型と名前を指定
wallet.prototype.initialize = function() {
  if (this.app.touch) {
    //もしタッチができる端末だったら
    this.app.touch.on(pc.EVENT_TOUCHSTART, this.create, this); //タッチされたらコインを出すcreate関数を呼ぶイベントを登録
  } else {
    this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.create, this); // マウスが押されたらコインを出すcreate関数を呼ぶイベントを登録
  }
};

wallet.prototype.create = function() {
  const coin = this.Coin.clone(); // テンプレート化されたコインを取得する
  coin.setName("coin_nomal");
  coin.setLocalPosition(0, 10, 0);
  this.app.root.addChild(coin);
  coin.enabled = true; // 非表示になっているコインを表示する
};

2. 属性にコインを追加しテンプレート化をする

実際にコインのエンティティをテンプレート化をしてみます。

wallet.jsの下にあるPARSE ボタンをクリック
Select Entityをクリック
ヒエラルキーの中からcoin_nomalを選択

これでテンプレートかができました、この属性という機能を使えばたとえば新しいコインをエンティティとして追加した場合にはそのコインを選択することでコードを一切変更せずに表示するコインを変更できます

3. 元から1枚表示されていたコインをデフォルトでは非表示にしておきます

これでゲームを起動すると、画面をタッチしたらコインが出現するようになりました。最初に表示されていたコインについては、プッシャーゲームとして最初に落ちてくるということは少し不気味なので非表示にしておきましょう。

coin_nomalをクリック
Enabledをクリックして非表示にします

この行為には複数の意味があり、それにつきましてはコインを削除するという章で説明をします。

複製について

wallet.jsではエンティティの複製にclone()関数を使用しています。この関数を使用してAttributesで設定したエンティティをクローンし、新しいエンティティを生み出しています。

これで起動をしてみるとプッシャーが動き、タップをするとコインの落ちるプッシャーゲームができているはずです。次の章では床に落ちたコインを消える処理を追加し、よりプッシャーゲームらしくしていきます。

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

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

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

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のコリジョンに触れたときに動く関数を追加します。

floorを選択する
ADD COMPONENTからSCRIPTを追加する
Scriptからtrigger_destory.jsを追加する


  const TriggerDestory = pc.createScript('triggerDestory');

TriggerDestory.prototype.initialize = function() {
     this.entity.collision.on('triggerenter', this.onTriggerEnter, this);
};

TriggerDestory.prototype.onTriggerEnter = function(entity) {
    entity.destroy()
}

7. 起動してみよう

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

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

床が追加されましたが、この床に色は必要ないので透明にします。その為のマテリアルを追加します。

MODELコンポーネントからMaterialをクリック
Opacityの設定をしているマテリアルがある、material/transparentというマテリアルを追加します。

これで透明な床を作ることができました。

イベントについて

PlayCanvasにはイベントを管理するためのメソッドが複数用意されています。これらを利用すると、PlayCanvasのアップデートのサイクルから外れたスクリプトを書くことができます。

メソッド	説明
on	イベントハンドラにイベントをアタッチします
once	イベントハンドラにイベントをアタッチします
off	イベントハンドラに追加されたリッスンを停止します
fire	イベントの発行をします
hasEvent	イベントハンドラにイベント名が存在するかチェックします

衝突について

PlayCanvasの衝突時に発行されるイベントにはTriggerとCollisionの２種類があります。先程追加をした、床のようにRIGID BODY設定されていないエンテティはTriggerとして振る舞います。Triggerのエンティティに衝突が発生すると以下のイベントが発行されます。そのイベントは2種類あります。

イベント名	説明
triggerenter	エンティティがTriggerに入った場合に発行されます
triggerleave	エンティティがTriggerから抜けた場合に発行されます

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

今回のスクリプトで床が消えるスクリプトはこちらになります。triggerenterが発生した場合に触れた対象のエンテティをentity.destroy()関数で削除をしています。

Trigger.prototype.onTriggerEnter = function(entity) {
  entity.destroy();
};

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

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