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

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

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

属性について

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

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

2. ヒエラルキーからwalletというエンティティを選択する
3. 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. 属性にコインを追加しテンプレート化をする

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

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

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

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

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

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

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

複製について

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

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

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

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

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

1. ADD ENTITYをクリック

2. Boxを追加する

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

3. 名前を変更する

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

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

名前が変更できたら今度は大きさの調整を調整していきます。 大きさはこのくらいの大きさにしておきましょう。

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

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

COLLISIONの大きさは下記のようにします。

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

これからSCRIPTを、追加し触れたら対象のエンティティが削除されるようにします。 先程追加をした、floorのコリジョンに触れたときに動く関数を追加します。

1. floorを選択する
2. ADD COMPONENTからSCRIPTを追加する
3. 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のアップデートのサイクルから外れたスクリプトを書くことができます。

衝突について

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

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

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

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

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

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

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

• チュートリアル - PlayCanvasでプッシャーゲームを作る 1/7
• チュートリアル - PlayCanvasでプッシャーゲームを作る 2/7
• チュートリアル - PlayCanvasでプッシャーゲームを作る 3/7
• チュートリアル - PlayCanvasでプッシャーゲームを作る 4/7
• チュートリアル - PlayCanvasでプッシャーゲームを作る 5/7
• チュートリアル - PlayCanvasでプッシャーゲームを作る 6/7
• チュートリアル - PlayCanvasでプッシャーゲームを作る 7/7