1. コインの枚数と増える時間を表示するための2D Screenの追加
①「ASSETS」 -> 「4-1」 -> 「2D Screen」をドラックアンドドロップ
ドラッグアンドドロップをすると2D Screenエンティティが追加されます。このエンティティ内には、コインの持っている数（Score）と次にコインが増える時間を表示するためのTextの(Time)の2つのエンティティが子要素として追加されています。
② 「2D Screen」の位置を調整
位置変更します。2D Screenについては、位置を移動しても、起動時に表示をされる場所は変わらないので開発時にはメインのエンティティと重ならない位置に動かします。
2D Screenでは文字の他に画像やスクロールバーなどの表示にも使用することができます。また、PlayCanvasで文字を扱う場合には事前にフォントを入れる必要があります。今回はハンズオンで使用しているフォントについては、「アセット」というフォルダの中に格納されているフォントを使用しています。
2. コインの増減の処理をcoin-pusher.jsに追加
続いて、文字の増減をスクリプトに記述をします。今までのスクリプトをコインを出すとコインが１枚減るという機能を追加します。また、3秒に1度コインの枚数が増えるという処理を追加します。コードの書き換えには、「ハンズオン資料」-> 「3-2」->「coin-pusher.js」のスクリプトをダブルクリックをしエディタを開きコードエディタから書き換えます。スクリプトを書き換えた後、コードエディタ上で保存をします。
coin-pusher.js
class CoinPusher extends pc.ScriptType {
initialize() {
this.app.score = 50;
this.app.timer = 3;
this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onPress, this);
}
createCoin(x, y) {
const coin = this.Coin.resource.instantiate();
coin.setLocalPosition(x, y, 0);
this.app.root.addChild(coin);
}
onPress(event) {
const { x, y } = event;
const position = this.Camera.camera.screenToWorld(
x,
y,
this.Camera.getPosition().z
);
if (this.app.score > 0) {
this.createCoin(position.x, position.y);
this.app.score -= 1;
}
}
update(deltaTime) {
this.app.timer -= deltaTime;
if (this.app.timer < 0) {
this.app.score += 1;
this.app.timer = 3;
}
this.Timer.element.text = Math.round(this.app.timer);
this.Score.element.text = this.app.score;
}
}
pc.registerScript(CoinPusher);
CoinPusher.attributes.add("Coin", { type: "asset", assetType: "template" });
CoinPusher.attributes.add("Score", { type: "entity" });
CoinPusher.attributes.add("Timer", { type: "entity" });
CoinPusher.attributes.add("Camera", { type: "entity" });
変更点は主に2つとなります。
1つ目は(score, timer)の機能の追加です。PlayCanvasで使用する値を保持するためにthis.app.score, this.app.timerの2つを起動時に宣言します。
2つ目は文字の書き換えの処理を追加します。スクリプト属性を使用して(Score, Timer)それぞれのエンティティを操作できるようにします。2D Screen上の文字を書き換えるためにはそれぞれのエンティティのtextの値(this.Timer.element.text, this.Score.element.text)を書き換えることで表示される文字の変更ができます。
② Parseボタンをクリック
スクリプトを書き換えた場合にはParseボタンをクリックし、スクリプトの適用をする必要があります。
③「スクリプト属性」にScoreとTimerのエンティティを追加
Parseが完了すると、Score,Timerの2つのスクリプト属性を指定できるようになりますので、こちらをそれぞれのエンティティをドラックアンドドロップで追加します。
3. Saucerの追加
最後に得点源となるSaucerを追加します。床に落ちる前に得点源に触れた場合にコインを増やす処理を追加します。
①「ASSETS」 -> 「4-3」 -> 「Saucer」をドラックアンドドロップ
② ヒエラルキーから「Saucer」の位置を調整します。
得点源の位置を調整します。それぞれ(Position)をx:0, y:0.5, z:4.5と設定します。
③ Saucer.jsを追加
得点源用のスクリプトを追加するために、Scriptコンポーネントを追加しSaucer.jsを追加します。
Saucer.js
class Saucer extends pc.ScriptType {
initialize() {
this.entity.collision.on("triggerenter", this.onTriggerEnter, this);
}
onTriggerEnter(){
this.app.score += 1;
}
}
pc.registerScript(Saucer);
このスクリプトでは、this.entity.collision.on("triggerenter", this.onTriggerEnter, this);としてコリジョンが触れた際の処理を追加しています。onTriggerEnterで得点源に触れた際に this.app.score（コインの数）を追加する処理を記述しています。
お疲れさまでした。これでコインプッシャーゲームの基本的な動きを作ることができました。
このあとはできたゲームを公開をします。
コメント
0件のコメント
サインインしてコメントを残してください。