残り時間とコインの増える時間を追加する
残り時間とコインの増える時間を追加する
コインドーザーの機能として
残りの枚数という機能を追加して、よりコインドーザーらしい形にしていきます。文字を表示する
文字を表示するためにヒエラルキーから
2D ScreenとText Elementを追加します1. 2D Screen を追加します。
User Interfaceの2D Screenを追加します。
このとき
floorの直下にできてしまった場合にはMainの直下にエンテティをドラッグ&ドロップで移動をさせます。2. Text Element を追加
+ボタンからテキスト要素を追加します。Text が追加されました
2D Screenの下に
Textを配置します。3. テキストエンティティを複製
4. エンティティの名前を変更する
それぞれのエンティティの名前を変更します。
- 1.
coinという名前に変更 - 2.
timerという名前に変更
5. 位置を調整する
coinエンティティ、timerエンティティともに位置を変更します。
- 1.coinエンティティを選択
- 2.位置を調整する
- 1.timerエンティティを選択
- 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 に対してスクリプトを追加
timerにtimer.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.ヒエラルキーから、
scoreを選択 - 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エンテティを追加したことで前にコインが落ちた場合にコインが増えるようになりました。フォントについて
日本語を表示するには、日本語のフォントを設定する必要があります。
Last modified 2yr ago