残り時間とコインの増える時間を追加する
残りの枚数
を表示するようにして、よりプッシャーゲームらしい形にしていきます。
文字を表示する
文字を表示するためにヒエラルキーから2D Screen
とText Element
を追加します
1. 2D Screen を追加します。
User Interface
の2D Screen
を追加します。
このとき
floor
の直下にできてしまった場合にはMain
の直下にエンテティをドラッグ&ドロップで移動をさせます。
2. Text Element を追加
+
ボタンからテキスト要素を追加します。
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
のチェックを外す
プッシャーゲームを確認する
任意の場所にタッチをすることと、自分の持っているコインの管理をする機能追加できました。
コメント
0件のコメント
サインインしてコメントを残してください。