押された場所にコインを出す
押された場所にコインを出す
Ray Castを使用して押された範囲場所にコインを出現させること、時間が立ったらコインを増やすというコードを追加していきます。1. タッチできる領域を追加する
タッチできる領域を追加します。そのために
TouchableSpaceというあらかじめ用意されているエンテティを表示します。- 1.非表示になっている
TouchableSpaceエンテティのEnabledにチェックを入れる。
この
TouchableSpaceにはあらかじめcreate_coin.jsというコインの枚数が1枚以上あった場合にコインを出すスクリプトが追加されています。create_coin.js
1
const CreateCoin = pc.createScript("createCoin");
2
CreateCoin.attributes.add("Coin", { type: "entity" }); //テンプレート化するコインの型と名前を指定
3
4
CreateCoin.prototype.create = function(point) {
5
if (WalletValue < 1) return;
6
WalletValue--;
7
const { x, y } = point; // 引数に押された場所(point)を取る
8
const coin = this.Coin.clone(); // テンプレート化されたコインを取得する
9
coin.setName("coin");
10
coin.setLocalPosition(x, y, 0);
11
this.app.root.addChild(coin);
12
coin.enabled = true; // 非表示になっているコインを表示する
13
};
Copied!
2. タッチされた場合にコインを出す
指定した領域をタッチした場合にコインを出すスクリプトをついかします。
- 1.Camera2の
pickerRayCastスクリプトがOFFになっているのでONに切り替える。
picker_raycast.js
1
const PickerRaycast = pc.createScript("pickerRaycast");
2
3
PickerRaycast.prototype.initialize = function() {
4
if (this.app.touch) {
5
this.app.touch.on(pc.EVENT_TOUCHSTART, this.onSelect, this);
6
} else {
7
this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onSelect, this);
8
}
9
};
10
11
PickerRaycast.prototype.onSelect = function(e) {
12
let from, to;
13
if (this.app.touch) {
14
from = this.entity.camera.screenToWorld(
15
e.touches[0].x,
16
e.touches[0].y,
17
this.entity.camera.nearClip
18
);
19
to = this.entity.camera.screenToWorld(
20
e.touches[0].x,
21
e.touches[0].y,
22
this.entity.camera.farClip
23
);
24
} else {
25
from = this.entity.camera.screenToWorld(
26
e.x,
27
e.y,
28
this.entity.camera.nearClip
29
);
30
to = this.entity.camera.screenToWorld(e.x, e.y, this.entity.camera.farClip);
31
}
32
const result = this.app.systems.rigidbody.raycastFirst(from, to);
33
if (result) {
34
const pickedEntity = result.entity;
35
if (pickedEntity.name === "TouchableSpace") {
36
pickedEntity.script.createCoin.create(result.point);
37
}
38
}
39
};
Copied!
スマートフォンのタッチ対応
1
if (this.app.touch) {
2
//タッチがあるかどうかの判断をするタッチがあればタッチ、タッチがなければクリックで反応させる
3
this.app.touch.on(pc.EVENT_TOUCHSTART, this.onSelect, this); //タッチされた場合にonSelect関数を呼ぶ
4
} else {
5
this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onSelect, this); //クリックされた場合にonSelect関数を呼ぶ
6
}
Copied!
- ① スマートフォンのタッチ動作については
this.app.touchというプロパティが存在するかどうかでタッチ動作にするかPCとしてマウス操作にするかを判断しています。
3. wallet.js を非表示にする
先ほど追加したスクリプトと
walletエンテティの中のスクリプトの役割がかぶっており、このままではコインが2枚出てきてしまうため、今までコインを追加するために使用していたwalletエンテティを非表示にします。- 1.ヒエラルキーから
walletを選択 - 2.
Enableのチェックを外す
コインドーザーを確認する
任意の場所にタッチをすることと、自分の持っているコインの管理をする機能追加できました。 これでコインドーザーの作る流れの紹介は終わりになります。
Last modified 2yr ago