プッシャーを動かす

プッシャーを動かす

スクリプトコンポーネントスクリプトを追加してコインドーザーのプッシャーを動かしていきましょう。

1. SCRIPTコンポーネントを追加する

2. ADD SCRIPTをクリック

ADD SCRIPTをクリックすると現在プロジェクト内に入っているスクリプト中からスクリプトを追加できます。

3. Pusher.jsスクリプトを追加

SCRIPTの検索欄からpusher選択します。
今回追加したpusher.jsのソースコードこちらになります。
1
const Pusher = pc.createScript("pusher");
2
Pusher.attributes.add("Speed", { type: "number", default: 0.01 });
3
Pusher.attributes.add("Base", { type: "number", default: 120 });
4
5
Pusher.prototype.initialize = function() {
6
this.count = 0;
7
this.mode = "push";
8
this.base = this.Base;
9
this.reverse = this.base * 2;
10
};
11
12
Pusher.prototype.update = function() {
13
if (this.count < this.base && this.mode === "push") {
14
this.entity.translate(0, 0, this.Speed);
15
} else if (this.count < this.reverse && this.mode === "pull") {
16
this.entity.translate(0, 0, -this.Speed);
17
} else if (this.count > this.base && this.mode === "push") {
18
this.mode = "pull";
19
} else if (this.count > this.reverse && this.mode === "pull") {
20
this.mode = "push";
21
this.count = 0;
22
}
23
this.count++;
24
};
25
26
Pusher.prototype.swap = function(old) {};
Copied!

4. 起動をしてみよう

▶ のボタンで作成したプログラムの起動(Launch)できます。後述しますがこの起動した際に表示されるURLは ログインしているユーザーしかアクセスできません。

プログラムの中身を見る

1. アセットからpusher.jsをダブルクリックする

今回追加したpusher.jsについては下のアセットタブから確認できます。 pusher.jsをダブルクリックすることでコードエディタが開かれるのでソースコードを確認できます。

translate関数

今回使用した関数としては、this.entity.translateという関数を使用しました。このthis.entityというのはスクリプトを追加したエンティティ自身のこととなります。その中のtranslate関数を使用することでエンティティを移動させることができます。
1
//translate関数のサンプル
2
3
//使い方
4
//this.entity.translate(xの移動量, zの移動量, yの移動量);
5
6
// 例 z方向に1移動する
7
this.entity.translate(0, 0, 1);
Copied!

PlayCanvasのライフサイクル

PlayCanvasでは指定した関数が一定ライフサイクルで呼び出される関数があり、pusher.jsではinitializeupdate関数を使用されています。 swapはコードエディタプログラムの更新を取ることができるので、開発中にSwapに対して変更をされたらページを更新するなどのコードを入れておくと、画面の更新することなどということもできます。
プロパティ
タイミング
initialize
起動時
update
フレーム毎
swap
コードエディタなどによるプログラム更新時
postInitialize
すべてのオブジェクトの読み込みが終わった際に一度
postUpdate
すべてのスクリプトが更新された際に呼び出される

参考リンク

  1. 1.
    PlayCanvas pc.Entity#translate