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

福田です!
今回は、3D開発をするうえで必須となるレイキャストについてご紹介します!
3Dゲーム開発の世界では、プレイヤーの操作や環境とのインタラクションが、没入感あふれる体験を生み出す鍵となります。その中でも、レイキャスト(Raycast)は、ゲームオブジェクトの検出や選択、シーンとの相互作用を実現する強力なテクニックとなります!
そもそもレイキャストって何?
レイキャストとは、その名の通り、「光線(Ray)を投射(Cast)する」技術です。具体的には、3D空間内のある点から特定の方向へ仮想的な光線を飛ばし、その光線が最初に交差するオブジェクトを検出します。

この仕組みは、私たちが目で見ている世界と同じです!
目から光線が放たれ、それが物体に当たって反射することで、私たちは物体を認識しています。
レイキャストも同様に、仮想的な光線を使ってオブジェクトを「見る」ことができるのです。
PlayCanvasでのレイキャストの使い道
-
マウスやタッチによるオブジェクトの選択: 画面をクリックした際に、その位置からレイを飛ばし、どのオブジェクトがクリックされたかを判定できます。これは、ゲーム内のアイテムを選択したり、キャラクターを移動させたりする際に不可欠です。
-
キャラクターの視線判定: キャラクターの目からレイを飛ばし、その視界内に他のキャラクターやオブジェクトが入っているかどうかを判定できます。これは、敵AIがプレイヤーを認識したり、特定のアイテムに反応したりするロジックに使用できます。
-
物理的な衝突判定の補助: 厳密な物理演算を行う代わりに、レイキャストを使って簡易的な衝突判定を行うことができます。例えば、キャラクターが壁に近づいた際に、レイを飛ばして壁の存在を検知し、それ以上進めないようにするなどの処理が可能です。
-
地面の判定: キャラクターが立っている地面の高さを取得するために、キャラクターの足元から真下にレイを飛ばし、地面との交点を検出するなどの用途に利用できます。
PlayCanvasでレイキャストを使ってみよう!
それでは、実際にPlayCanvasでレイキャストを使う方法を見ていきましょう。ここでは、マウスでクリックした場所に球体を生成する簡単なサンプルコードを例に解説します!
ステップ1: レイキャスト用の関数を作成する
まずは、レイキャストを実行する関数を作成します。PlayCanvasでは、pc.EntityのraycastFirstメソッドを利用して、最初の交差するオブジェクトを検出できます。
以下は、マウスの位置からスクリーン上のレイキャストを実行し、結果を表示する関数です。
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の視線判定、簡易的な衝突判定など、様々な場面で活用できます!
この記事で紹介した基本的な使い方をマスターすれば、ゲーム開発の幅が大きく広がると思います!
さらに、高度なテクニックを学ぶことで、より洗練されたゲーム体験を創造していきましょう!
以上、福田でした!