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

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

コインドーザーの機能として残りの枚数という機能を追加して、よりコインドーザーらしい形にしていきます。

文字を表示する

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

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

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

2. Text Element を追加

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

Text が追加されました

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

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

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

それぞれのエンティティの名前を変更します。
  1. 1.
    coin という名前に変更
  2. 2.
    timer という名前に変更

5. 位置を調整する

coinエンティティ、timerエンティティともに位置を変更します。
  1. 1.
    coinエンティティを選択
  2. 2.
    位置を調整する
  1. 1.
    timerエンティティを選択
  2. 2.
    位置を調整する

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

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

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

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

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

config.js

1
const Config = pc.createScript("config");
2
Config.attributes.add("Wallet", { type: "number", default: 5 });
3
Config.attributes.add("Timer", { type: "number", default: 5 });
4
Config.attributes.add("Interval", { type: "number", default: 1000 });
5
6
let TimerValue, WalletValue, Interval;
7
Config.prototype.initialize = function() {
8
TimerValue = this.Timer;
9
WalletValue = this.Wallet;
10
IntervalValue = this.Interval;
11
};
Copied!

manager.js

1
const Manager = pc.createScript("manager");
2
Manager.attributes.add("MainCamera", { type: "entity" });
3
Manager.attributes.add("Interval", { type: "number", default: 1000 });
4
5
Manager.prototype.initialize = function() {
6
this.cameraAnimation(this.MainCamera);
7
this.setTimer(this.Interval);
8
};
9
10
Manager.prototype.cameraAnimation = function({ camera }) {
11
if (this.app.touch) {
12
camera.fov = 55;
13
} else {
14
this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.create, this);
15
}
16
};
17
18
Manager.prototype.setTimer = function(IntervalValue) {
19
setInterval(() => {
20
if (TimerValue > 0) {
21
TimerValue = TimerValue - 1;
22
} else {
23
TimerValue = 5;
24
WalletValue++;
25
}
26
}, IntervalValue);
27
};
Copied!

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

次にエンテティをに対して値を表示するスクリプトをcoin,timerとそれぞれのエンテティに追加をします。
  • coinに対してcoin.jsを追加する
1
const Coin = pc.createScript("coin");
2
3
Coin.prototype.update = function() {
4
this.entity.element.text = WalletValue.toString();
5
};
Copied!

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

  • timertimer.jsを追加する
1
const Timer = pc.createScript("timer");
2
Timer.prototype.update = function() {
3
this.entity.element.text = TimerValue.toString();
4
};
Copied!

4. 起動する

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

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

1. score を追加する

得点を追加するために触れるとコインが増える場所を追加します。
  1. 1.
    ヒエラルキーから、scoreを選択
  2. 2.
    Enabledにチェックを入れる
Scoreには以下のようなスクリプトが追加されています。

trigger_score.js

1
const TriggerScore = pc.createScript("triggerScore");
2
3
TriggerScore.prototype.initialize = function() {
4
this.entity.collision.on("triggerenter", this.onTriggerEnter, this);
5
};
6
7
TriggerScore.prototype.onTriggerEnter = function(entity) {
8
WalletValue++;
9
};
Copied!
このscoreエンテティを追加したことで前にコインが落ちた場合にコインが増えるようになりました。

フォントについて

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