【PlayCanvas】レベルアップ!レイキャストの魔法を解き明かす

【PlayCanvas】レベルアップ!レイキャストの魔法を解き明かす

福田です!
今回は、3D開発をするうえで必須となるレイキャストについてご紹介します!
3Dゲーム開発の世界では、プレイヤーの操作や環境とのインタラクションが、没入感あふれる体験を生み出す鍵となります。その中でも、レイキャスト(Raycast)は、ゲームオブジェクトの検出や選択、シーンとの相互作用を実現する強力なテクニックとなります!

そもそもレイキャストって何?

レイキャストとは、その名の通り、「光線(Ray)を投射(Cast)する」技術です。具体的には、3D空間内のある点から特定の方向へ仮想的な光線を飛ばし、その光線が最初に交差するオブジェクトを検出します。

この仕組みは、私たちが目で見ている世界と同じです!
目から光線が放たれ、それが物体に当たって反射することで、私たちは物体を認識しています。
レイキャストも同様に、仮想的な光線を使ってオブジェクトを「見る」ことができるのです。

PlayCanvasでのレイキャストの使い道

  • マウスやタッチによるオブジェクトの選択: 画面をクリックした際に、その位置からレイを飛ばし、どのオブジェクトがクリックされたかを判定できます。これは、ゲーム内のアイテムを選択したり、キャラクターを移動させたりする際に不可欠です。

  • キャラクターの視線判定: キャラクターの目からレイを飛ばし、その視界内に他のキャラクターやオブジェクトが入っているかどうかを判定できます。これは、敵AIがプレイヤーを認識したり、特定のアイテムに反応したりするロジックに使用できます。

  • 物理的な衝突判定の補助: 厳密な物理演算を行う代わりに、レイキャストを使って簡易的な衝突判定を行うことができます。例えば、キャラクターが壁に近づいた際に、レイを飛ばして壁の存在を検知し、それ以上進めないようにするなどの処理が可能です。

  • 地面の判定: キャラクターが立っている地面の高さを取得するために、キャラクターの足元から真下にレイを飛ばし、地面との交点を検出するなどの用途に利用できます。

PlayCanvasでレイキャストを使ってみよう!

それでは、実際にPlayCanvasでレイキャストを使う方法を見ていきましょう。ここでは、マウスでクリックした場所に球体を生成する簡単なサンプルコードを例に解説します!

ステップ1: レイキャスト用の関数を作成する

まずは、レイキャストを実行する関数を作成します。PlayCanvasでは、pc.EntityraycastFirstメソッドを利用して、最初の交差するオブジェクトを検出できます。
以下は、マウスの位置からスクリーン上のレイキャストを実行し、結果を表示する関数です。

var RaycastTest = pc.createScript('raycastTest');

RaycastTest.prototype.initialize = function() {
    // マウスイベントのリスナーを追加
    this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onMouseDown, this);
};

RaycastTest.prototype.onMouseDown = function (event) {
    // マウスの位置からカメラの向いている方向へレイを飛ばす
    var from = this.entity.getPosition();
    var to = this.entity.camera.screenToWorld(event.x, event.y, this.entity.camera.farClip);

    // レイキャストを実行
    var result = this.app.systems.rigidbody.raycastFirst(from, to);

    // 結果をコンソールに表示
    if (result) {
        console.log('ヒットしたエンティティ:', result.entity.name);
        console.log('ヒットした位置:', result.point);
        console.log('ヒットした法線:', result.normal);

        // ヒットした位置に新しいエンティティを生成
        this.createSphere(result.point);
    } else {
        console.log('何もヒットしませんでした');
    }
};

// レイキャストが当たった位置に球体を生成する関数
RaycastTest.prototype.createSphere = function(position) {
    var sphere = new pc.Entity();
    sphere.addComponent('model', {
        type: 'sphere'
    });
    sphere.setLocalScale(0.1, 0.1, 0.1);
    sphere.setPosition(position);
    this.app.root.addChild(sphere);
};

ステップ2: スクリプトをエンティティに追加する

作成したスクリプトをシーン内の任意のエンティティに追加します。ここでは、カメラを持つエンティティに追加することを想定しています。
スクリプトはエディターのコンポーネントを追加から追加できます。

ステップ3: 物理シミュレーションを有効にする

レイキャストを実行するためには、シーン内で物理シミュレーションが有効になっている必要があります。シーン設定のPhysicsタブからEnable Physicsにチェックを入れましょう。

ステップ4: 実行して確認する

シーンを実行し、マウスでクリックしてみましょう。クリックした位置に球体が生成されれば成功です!コンソールには、ヒットしたオブジェクトの情報も表示されます。

さらに高度なレイキャストテクニック

上記の例は基本的なレイキャストの使用方法ですが、さらに高度なテクニックも存在します。

  • 複数のオブジェクトを検出する: raycastAllメソッドを使用すると、レイと交差するすべてのオブジェクトを検出できます。

  • 特定のレイヤーのオブジェクトのみを検出する: layersオプションを使用すると、特定のレイヤーに属するオブジェクトのみを対象にレイキャストを実行できます。

  • レイの長さを制限する: レイの最大距離を指定することで、遠くのオブジェクトを無視することができます。

これらのテクニックを組み合わせることで、より複雑なゲームロジックを実現することができます!

まとめ

PlayCanvasにおけるレイキャストは、ゲーム開発において非常に強力で汎用性の高い技術です。オブジェクトの選択、AIの視線判定、簡易的な衝突判定など、様々な場面で活用できます!

この記事で紹介した基本的な使い方をマスターすれば、ゲーム開発の幅が大きく広がると思います!
さらに、高度なテクニックを学ぶことで、より洗練されたゲーム体験を創造していきましょう!
以上、福田でした!