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

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

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

属性について

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

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

  1. 1.
    ヒエラルキーからwalletというエンティティを選択する
  2. 2.
    Enabled にチェックを入れます。
walletというエンティティはあらかじめwallet.jsというスクリプトが追加されています。 このエンティティは画面がタッチされたらコインを出すというスクリプトが追加されているエンティティで、大きさやコリジョンなどは持っておりませんが起動時には存在しているエンティティとなります。
1
const wallet = pc.createScript("wallet");
2
wallet.attributes.add("Coin", { type: "entity" }); //複製するコインの型と名前を指定
3
wallet.prototype.initialize = function() {
4
if (this.app.touch) {
5
//もしタッチができる端末だったら
6
this.app.touch.on(pc.EVENT_TOUCHSTART, this.create, this); //タッチされたらコインを出すcreate関数を呼ぶイベントを登録
7
} else {
8
this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.create, this); // マウスが押されたらコインを出すcreate関数を呼ぶイベントを登録
9
}
10
};
11
12
wallet.prototype.create = function() {
13
const coin = this.Coin.clone(); // テンプレート化されたコインを取得する
14
coin.setName("coin_nomal");
15
coin.setLocalPosition(0, 10, 0);
16
this.app.root.addChild(coin);
17
coin.enabled = true; // 非表示になっているコインを表示する
18
};
Copied!

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

実際にコインのエンティティをテンプレート化をしてみます。
  1. 1.
    wallet.jsの下にあるPARSE ボタンをクリック
  2. 2.
    Select Entityをクリック
  3. 3.
    ヒエラルキーの中からcoin_nomalを選択
これでテンプレートかができました、この属性という機能を使えばたとえば新しいコインをエンティティとして追加した場合にはそのコインを選択することでコードを一切変更せずに表示するコインを変更できます

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

これでゲームを起動すると、画面をタッチしたらコインが出現するようになりました。最初に表示されていたコインについては、コインドーザーとして最初に落ちてくるということは少し不気味なので非表示にしておきましょう。
  • coin_nomalをクリック
  • Enabledをクリックして非表示にします
この行為には複数の意味があり、それにつきましてはコインを削除するという章で説明をします。

複製について

wallet.jsではエンティティの複製にclone()関数を使用しています。この関数を使用してAttributesで設定したエンティティをクローンし、新しいエンティティを生み出しています。
これで起動をしてみるとプッシャーが動き、タップをするとコインの落ちるコインドーザーができているはずです。次の章では床に落ちたコインを消える処理を追加し、よりコインドーザーらしくしていきます。