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

残り時間とコインの増える時間を追加する

残りの枚数を表示するようにして、よりプッシャーゲームらしい形にしていきます。

文字を表示する

文字を表示するためにヒエラルキーから2D ScreenとText Elementを追加します

1. 2D Screen を追加します。

User Interfaceの2D Screenを追加します。

このときfloorの直下にできてしまった場合にはMainの直下にエンテティをドラッグ&ドロップで移動をさせます。

2. Text Element を追加

+ボタンからテキスト要素を追加します。

Text が追加されました

2D Screenの下にTextを配置します。

3. テキストエンティティを複製

4. エンティティの名前を変更する

それぞれのエンティティの名前を変更します。

coin という名前に変更
timer という名前に変更

5. 位置を調整する

coinエンティティ、timerエンティティともに位置を変更します。

coinエンティティを選択
位置を調整する

timerエンティティを選択
位置を調整する

デフォルトで表示される文字を変更する

① デフォルトで表示される文字を変更するにはTextElementのTextを変更します。

時間が立つとコインが増えるようにする

1. スクリプトを追加する

configエンテティを選択
エンティティをEnabledにする

このconfigには初期のコインの値を管理するスクリプト、config.jsと一定時間でコインを増やすmanager.jsというスクリプトが含まれています。

config.js


  const Config = pc.createScript("config");
Config.attributes.add("Wallet", { type: "number", default: 5 });
Config.attributes.add("Timer", { type: "number", default: 5 });
Config.attributes.add("Interval", { type: "number", default: 1000 });

let TimerValue, WalletValue, Interval;
Config.prototype.initialize = function() {
  TimerValue = this.Timer;
  WalletValue = this.Wallet;
  IntervalValue = this.Interval;
};

manager.js


  const Manager = pc.createScript("manager");
Manager.attributes.add("MainCamera", { type: "entity" });
Manager.attributes.add("Interval", { type: "number", default: 1000 });

Manager.prototype.initialize = function() {
  this.cameraAnimation(this.MainCamera);
  this.setTimer(this.Interval);
};

Manager.prototype.cameraAnimation = function({ camera }) {
  if (this.app.touch) {
    camera.fov = 55;
  } else {
    this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.create, this);
  }
};

Manager.prototype.setTimer = function(IntervalValue) {
  setInterval(() => {
    if (TimerValue > 0) {
      TimerValue = TimerValue - 1;
    } else {
      TimerValue = 5;
      WalletValue++;
    }
  }, IntervalValue);
};

2. coin に対してスクリプトを追加

次にエンテティをに対して値を表示するスクリプトをcoin,timerとそれぞれのエンテティに追加をします。

coinに対してcoin.jsを追加する

const Coin = pc.createScript("coin");

Coin.prototype.update = function() {
  this.entity.element.text = WalletValue.toString();
};

3. timer に対してスクリプトを追加

timerにtimer.jsを追加する

const Timer = pc.createScript("timer");
Timer.prototype.update = function() {
  this.entity.element.text = TimerValue.toString();
};

4. 起動する

残りのコイン枚数とコインが増える時間を追加できました。この状態ではまだ、コインは減りませんのでこれから追加をしていきます。

床に触れるとコインが増える

1. score を追加する

得点を追加するために触れるとコインが増える場所を追加します。

ヒエラルキーから、scoreを選択
Enabledにチェックを入れる

Scoreには以下のようなスクリプトが追加されています。

trigger_score.js

const TriggerScore = pc.createScript("triggerScore");

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

TriggerScore.prototype.onTriggerEnter = function(entity) {
  WalletValue++;
};

このscoreエンテティを追加したことで前にコインが落ちた場合にコインが増えるようになりました。

フォントについて

日本語を表示するには、日本語のフォントを設定する必要があります。

押された場所にコインを出す

Ray Castを使用して押された範囲場所にコインを出現させること、時間が立ったらコインを増やすというコードを追加していきます。

1. タッチできる領域を追加する

タッチできる領域を追加します。そのためにTouchableSpaceというあらかじめ用意されているエンテティを表示します。

非表示になっているTouchableSpaceエンテティのEnabledにチェックを入れる。

このTouchableSpaceにはあらかじめcreate_coin.jsというコインの枚数が1枚以上あった場合にコインを出すスクリプトが追加されています。

create_coin.js

const CreateCoin = pc.createScript("createCoin");
CreateCoin.attributes.add("Coin", { type: "entity" }); //テンプレート化するコインの型と名前を指定

CreateCoin.prototype.create = function(point) {
  if (WalletValue < 1) return;
  WalletValue--;
  const { x, y } = point; // 引数に押された場所(point)を取る
  const coin = this.Coin.clone(); // テンプレート化されたコインを取得する
  coin.setName("coin");
  coin.setLocalPosition(x, y, 0);
  this.app.root.addChild(coin);
  coin.enabled = true; // 非表示になっているコインを表示する
};

2. タッチされた場合にコインを出す

指定した領域をタッチした場合にコインを出すスクリプトをついかします。

Camera2のpickerRayCastスクリプトがOFFになっているのでONに切り替える。

picker_raycast.js

const PickerRaycast = pc.createScript("pickerRaycast");

PickerRaycast.prototype.initialize = function() {
  if (this.app.touch) {
    this.app.touch.on(pc.EVENT_TOUCHSTART, this.onSelect, this);
  } else {
    this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onSelect, this);
  }
};

PickerRaycast.prototype.onSelect = function(e) {
  let from, to;
  if (this.app.touch) {
    from = this.entity.camera.screenToWorld(
      e.touches[0].x,
      e.touches[0].y,
      this.entity.camera.nearClip
    );
    to = this.entity.camera.screenToWorld(
      e.touches[0].x,
      e.touches[0].y,
      this.entity.camera.farClip
    );
  } else {
    from = this.entity.camera.screenToWorld(
      e.x,
      e.y,
      this.entity.camera.nearClip
    );
    to = this.entity.camera.screenToWorld(e.x, e.y, this.entity.camera.farClip);
  }
  const result = this.app.systems.rigidbody.raycastFirst(from, to);
  if (result) {
    const pickedEntity = result.entity;
    if (pickedEntity.name === "TouchableSpace") {
      pickedEntity.script.createCoin.create(result.point);
    }
  }
};

スマートフォンのタッチ対応

if (this.app.touch) {
  //タッチがあるかどうかの判断をするタッチがあればタッチ、タッチがなければクリックで反応させる
  this.app.touch.on(pc.EVENT_TOUCHSTART, this.onSelect, this); //タッチされた場合にonSelect関数を呼ぶ
} else {
  this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onSelect, this); //クリックされた場合にonSelect関数を呼ぶ
}

① スマートフォンのタッチ動作についてはthis.app.touchというプロパティが存在するかどうかでタッチ動作にするかPCとしてマウス操作にするかを判断しています。

3. wallet.js を非表示にする

先ほど追加したスクリプトとwalletエンテティの中のスクリプトの役割がかぶっており、このままではコインが2枚出てきてしまうため、今までコインを追加するために使用していたwalletエンテティを非表示にします。

ヒエラルキーからwalletを選択
Enableのチェックを外す

プッシャーゲームを確認する

任意の場所にタッチをすることと、自分の持っているコインの管理をする機能追加できました。