チュートリアル - 3DなBackgroundコンテンツを作ってみる 4/5 – PlayCanvas

Boxがジャンプする処理を作る

Root EntityにADD COMPONENTでScriptを追加し、「jumpfire.js」を作成し登録します。

jumpfire.js のコードを以下に書き換えます。

var Jumpfire = pc.createScript('jumpfire');

Jumpfire.prototype.initialize = function() {
    var self = this;
    
    self.app.on("jump", function(targetEntity){ // イベント作成
        if(targetEntity.tags._list.includes("move")) return; // targetEntityにTagsに「move」が入っているかif文
        targetEntity.tags.add("move"); // targetEntityのTagsに「move」追加
        
        self.tPosition = targetEntity.getLocalPosition(); // targetEntityのPositionを変数に

        var targetPos = { // targetEntityのPositionを保管
            x: self.tPosition.x,
            y: self.tPosition.y,
            z: self.tPosition.z
        };
        var changePos = { // targetEntityのジャンプするPositionを保管
            x: self.tPosition.x,
            y: self.tPosition.y+1,
            z: self.tPosition.z
        };
        
        // ↓ TweenでPositionをTweenさせる処理
        targetEntity.tween(targetEntity.getLocalPosition()).to(changePos, 0.2, pc.SineOut).on("complete", function(){
            targetEntity.tween(targetEntity.getLocalPosition()).to(targetPos, 0.1, pc.SineOut).on("complete",function() {
                targetEntity.tags.remove("move"); // Tweenが終わったらTagsのmoveを削除
            }).start();
        }).start();
    });
    
};

ここでTweenを使用しているので、PlayCanvasのTweenライブラリが必要です。
以下からtween.jsをダウンロードしてPlayCanvasにインポートします。
https://developer.playcanvas.com/en/tutorials/tweening/

jumpfire.js で作成したイベントを hoverMove.js のconsole.logが記載していた場所に書き換えます。
onMouseMove を以下に書き換えます。

HoverMove.prototype.onMouseMove = function(ev) {
    var farClip = this.entity.camera.farClip; // カメラのfarClipの設定(Editorから設定可能)
    var nearClip = this.entity.camera.nearClip; // カメラのnearClipの設定(Editorから設定可能)
    this.entity.camera.screenToWorld(ev.x, ev.y, nearClip, this.rayStart); // 平面座標から3D空間へ座標を変換しRaycastの始まりの座標を作成
    this.entity.camera.screenToWorld(ev.x, ev.y, farClip, this.rayEnd); // 平面座標から3D空間へ座標を変換しRaycastの終わりの座標を作成

    // ↓ ここでレイキャストの処理を書いているよ
    this.result = this.app.systems.rigidbody.raycastFirst(this.rayStart, this.rayEnd); // 作成した座標を元に当たり判定を持つEntityとぶつかったか結果を出す
    if (this.result) { // raycastの結果が出ているか
        var hitEntity = this.result.entity; // Raycastで取得したEntity
        
        this.app.fire("jump", hitEntity); // jumpfireイベント
    }
};

これでLaunchを確認してみましょう。

マウスオーバーでBoxがジャンプしているのが確認できたら完成です！
おつかれさまです。

ついでにPublishをしてしまいましょう。