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

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

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

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

タッチできる領域を追加します。そのためにTouchableSpaceというあらかじめ用意されているエンテティを表示します。
  1. 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. 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. 1.
    ヒエラルキーからwalletを選択
  2. 2.
    Enableのチェックを外す

コインドーザーを確認する

任意の場所にタッチをすることと、自分の持っているコインの管理をする機能追加できました。 これでコインドーザーの作る流れの紹介は終わりになります。