チュートリアル - 箱庭・ミニスケープなコンテンツを作ってみる 2/5 – PlayCanvas

新規プロジェクトから作成する

PlayCanvasの自身のアカウントページから新規プロジェクトを作成します。

テンプレートは「Blank Project」にします。

__________2022-11-22_16.57.36.png

作成後、プロジェクトページに飛ばされます。

プロジェクトのEDITORボタンをクリックしてエディット画面へ進みます。

__________2022-11-22_16.58.06.png

Blank Projectなので最低限の構成になっています。
「Camera」、「Light」、Primitiveな「Box」と「Plane」があります。

クリックしたらPlayerが移動するスクリプトを作成

本チュートリアルでは、Planeのステージをクリックした場所に3DモデルのPlayerが移動するというものです。
早速、PlaneをクリックしたらPlayerが移動するというスクリプトから作ってみましょう。

スクリプトの前準備に、「Plane」や「Player」の設定をしていきます。
Planeを選択し、「Collision」と「RigidBody」を設定します。
Ammo.jsも忘れずにインポートしてください。

__________2022-11-28_11.21.01.png

以下のように、「Plane」を設定してください。

Scale
x : 20 , y : 1 , z : 20

Collision
Type : Box
Half Extents : x: 10 , y : 0.01 , z : 10

Scaleはお好みのサイズに変更してください。それに合わせてCollisionのサイズも変更してください。
RigidBodyのTypeは「Static」のまま。Materialもお好みで設定してください。

次はPlayerを設定します。
PlayerというEntityを作成して、「Camera」と「Box」のEntityを入れ子にします。

__________2022-11-28_11.33.31.png

PlayerにCameraとBoxを入れ子にすることで、Playerが移動すると合わせてBoxもCameraも付いてくるように移動します。

次からPlayerを移動させるスクリプトを作っていきます。
移動させるために、「Tweenライブラリ」を使用します。

以下からTween.jsをダウンロードしてPlayCanvasにインポートします。
Tweenについて: https://developer.playcanvas.com/ja/tutorials/tweening/
github: https://github.com/playcanvas/playcanvas-tween

Tween.jsをインポートしたら、「playerMove.js」を作成しEntityのPlayerに設定します。

__________2022-11-28_11.43.54.png

設定ができたら、以下のスクリプトを「playerMove.js」にコピペします。

let PlayerMove = pc.createScript('playerMove');

PlayerMove.attributes.add("targetCamera", {type:"entity"});

PlayerMove.prototype.initialize = function() {
    this.targetPosition = new pc.Vec3();　// 移動先のPosition
    
    this.app.mouse.on(pc.EVENT_MOUSEUP, this.mouseUp, this);　// クリックされたらmouseUp() を発火

    this.app.on("move:able", () => { // 
        this.app.mouse.on(pc.EVENT_MOUSEUP, this.mouseUp, this);
    }, this);
    this.app.on("move:unable", () => {
        this.app.mouse.off(pc.EVENT_MOUSEUP, this.mouseUp, this);
    }, this);
};

PlayerMove.prototype.mouseUp = function (e) {
    this.doRaycast(e.x, e.y); // doRaycastをクリックしたPositionのx,yを引数に実行
    this.entity.tween(this.entity.getLocalPosition()).to(this.targetPosition, 0.5, pc.Linear).start(); // Playerの現PositionからtargetPositionへTween実行
};

PlayerMove.prototype.doRaycast = function(screenX, screenY) {
    let from = new pc.Vec3(); // クリックした座標をカメラから見た出発点
    let to = new pc.Vec3(); // クリックした座標の最終目的点

    if(this.targetCamera.camera.projection !== pc.PROJECTION_ORTHOGRAPHIC) {　// CameraのProjectionに応じてRaycastの処理が異なるのでif文で分けている
        from = this.targetCamera.getPosition(); // カメラのPositionがRayの出発点
        to = this.targetCamera.camera.screenToWorld(screenX, screenY, this.targetCamera.camera.farClip); // クリックした座標からカメラの farClip の設定までの最終点
    } else {
        var farClip = this.targetCamera.camera.farClip; // カメラの設定した farClip (描画するクリッピング最終距離)
        var nearClip = this.targetCamera.camera.nearClip; // カメラの設定した nearClip (描画するクリッピング最短距離)
        this.targetCamera.camera.screenToWorld(screenX, screenY, nearClip, from); // クリックした座標を from と　nearClip を基に3D空間に落とし込む
        this.targetCamera.camera.screenToWorld(screenX, screenY, farClip, to); // クリックした座標を to と　nearClip を基に3D空間に落とし込む
    }
    const result = this.app.systems.rigidbody.raycastFirst(from, to); // 2D座標から3D座標に置き換えた from と to でRaycastを飛ばしてぶつかったオブジェクトをResultで返す

    if (!result) return; // オブジェクトにぶつからなければ処理終了、ぶつかっていれば処理を以下に継続
    this.targetPosition = result.point; // クリックした3D座標のポイントをtargetPointに代入

};

マウスのPositionを3D空間に置き換える場合は、screenToWorld()を使用していきます。
詳しくはこちらから: https://developer.playcanvas.com/api/pc.CameraComponent.html#screenToWorld

マウスでクリックした2D空間の座標をコンテンツである3D空間の座標にクリックした箇所を変換してくれます。

このクリックした箇所が当たり判定を持っているか判定するのが、raycastFirst()です。
詳しくはこちらから: https://developer.playcanvas.com/api/pc.RigidBodyComponentSystem.html#raycastFirst

RigidbodyとCollisionを設定しているEntityが引数であるfrom, toの直線上に存在していれば、その座標ポイントと直線上に存在したEntityを返してくれます。

ここで返した座標ポイントを、Tween.jsを使ってPlayerを移動させているスクリプト内容になります。

スクリプトをコピペし保存したら、Parseしてスクリプト属性の「targetCamera」にCameraを設定します。

__________2022-11-28_17.51.08.png