見出し画像

【VketCloud】その壁の設計、抜けられますよ

今日はHIKKYにて開発を行っているブラウザメタバースエンジン、VketCloudについての話です。
現在開催中のバーチャルマーケット2023 WinterのWebブラウザ会場でも、VketCloudが用いられています。

VketCloudでワールドを作る際に注意しないといけないことの1つが「壁抜け」です。

壁抜けをすることにより、本来想定していなかった場所に侵入できたり、元の移動可能エリアに復帰できなくなったりします。

VketCloudは独自の当たり判定検知を行っており、一見壁抜けが発生しなさそうなコライダー配置でも壁抜けしてしまうことがあります。

本稿では、そんな壁抜けが発生してしまう可能性のあるコライダーの配置パターンについて紹介します。
コードは一切出てこないので、お気軽にお読みくださいませ。

はじめに:VketCloudの当たり判定について

VketCloudのプレイヤー当たり判定についてのイメージ画像がこちらです。

アバターの足元からy座標方向に0.5上の位置を中心とした、Scale (x,y,z) = (1,1,1)の球体があるイメージとなります。

特徴

  • 球体の中心より低い段差は進み続けることで登ることができます。

  • 球体の中心より高い位置に底面がある壁は素通りすることができます。

  • 球体の外周のプレイヤー進行方向にある点が壁コライダーに接している場合、そこから先に進むことはできません。

  • 球体の外周のプレイヤー進行方向にある点が壁コライダーに接していない場合でも、進行方向の幅が一定より狭い場合、通り抜けできません。

1 鋭角

画像のように、2つの壁で鋭角を作ると、角に向かってダッシュで進み続けながら壁方向に方向転換することで壁抜けします。
最もシンプルな壁抜けパターンです。

壁の幅がプレイヤー当たり判定球体の直径より狭い状態でも水平と並行となる球体の外周のプレイヤー進行方向にある点が壁コライダーに接していない状態となり、進行方向の幅が一定より狭い判定も発生しないため進むことができ、その状態で方向転換した際、水平と並行となる球体の外周のプレイヤー進行方向にある点が壁コライダーの中に入ってしまい、壁検知の役割が果たせなくなってしまうため、壁抜けが発生してしまいます。

また、壁抜けをして壁の中にいる状態になった場合、壁コライダーの上に移動します。

壁に向かって進む。この時点で壁にめり込んでいる
壁に向かって進むことで壁検知を壁内に。壁を抜け、上に登る

対策としてはこのように鋭角を塞ぐようなコライダーを設置することで鋭角を発生させないようにすることです。

新しいコライダーを設置することにより新たな鋭角が発生しないように注意が必要です。

2 低すぎる天井

VketCloudではジャンプすることが出来ますが、アバターの頭上を検知することはありません。
したがって、天井が低い場所でジャンプした場合、天井の中に入り込んでしまいます。

このとき、足元が天井コライダーに触れてしまうとジャンプ可能判定が復活し、さらにジャンプすることで天井コライダーの上に出ることが出来てしまいます。

Vketちゃんの場合、おおよそ膝より高いコライダーは下を通り抜けることができる
ジャンプすることで、コライダーの上に出る

対策としては天井を高くするか、そもそも天井にコライダーを付けないといったことが考えられます。

天井にコライダーを設置しない場合、三人称視点時のカメラが天井より上に入り込めてしまうため、天井コライダーを設置したい場合は予め天井を高めにするか、ジャンプ力を低めに設定するかのどちらかを行うことを推奨します。

ジャンプ力はHEOPlayerから変更可能

3 斜面

Rotation Zを変更したCube
Rotation Xを変更したCube

上の画像のような、Rotation XあるいはRotation Zを0以外の物に変更した斜めのコライダーは、壁抜けの発生原因となります。

Z軸回転を発生させたコライダーの場合、辺から中に入り込むことができます。
この状態であれば、2の低すぎる天井と同様の状態となり、ジャンプすることでコライダーの上に移動することができます。

X軸回転を発生させたコライダーの場合、横から登ることができます。
VketCloudでは斜面で滑り落ちるということもなく、80度の急勾配であってもジャンプを駆使して頂点まで簡単に登ることが出来てしまいます。

また、斜面の裏からジャンプしたり、斜面の裏に向かって進むことでも斜面の上に移動できてしまいます。

したがって、原則壁コライダーのRotation XやRotation Zは0から変更しないようにすることが壁抜け発生防止になります。
また、坂道のような斜面を作る際は裏側に入り込めないように注意が必要です。

4 浮遊

2つのBoxColliderを画像のように隙間なく設置した場合、ダッシュ&ジャンプを行うことで境界線部分を伝うことができます。

境界でジャンプ判定が復活するため、跳びながら渡れる

積み木のようなオブジェクトの当たり判定を作る際はブロック1つ1つに当たり判定を付けるのではなく、縦一列1塊で当たり判定を付けることを推奨します。

5 想定外のコライダー

壁抜けを想定していなかったコライダー配置を伝うことでワールド外に出られてしまう、ということがあります。

例えば、Music Vket5の視聴ブースは、地面の位置からジャンプしても抜けられないような高さ調整がされています。
しかし、画像のような順番でジャンプを行うことで、ワールド外に出られてしまいます。

このように、壁抜け出来ないようにしたつもりでも、別のコライダーと組み合わせることで壁抜けが出来てしまう、といったパターンもあります。

もう一つ、想定外のコライダーパターンで多いのがクリック判定や壁掛けオブジェクトに着いたBox Colliderです。

MyVketのRoomのテンプレート「シックモダン」のウォールシェルフにはコライダーがあるので、乗ることが出来る

壁にかかった絵のオブジェクトのBoxColliderはジャンプが届く位置だと4の浮遊が発生します。
宙に浮いたクリック判定をBoxColliderで作った場合、下に入り込みジャンプすることで2の低すぎる天井と同様の現象が発生し、クリック判定の上に登れてしまいます。

このように、本来移動に使われることが想定されていないコライダーからワールド外への壁抜けが発生してしまう、ということもあります。

前者の壁掛けオブジェクトについてはBoxColliderを抜くことで、後者のクリック判定については使用するコライダー種別をSphereColliderに変更したり、HEOColliderをアタッチし、typeをclickableにすることで対処可能です。

画像は極端な例だが、見た目より当たり判定を高くした方が良い場面もある

6 ふんばり

足場方向に向かってダッシュし続けることで、あと少しで登れそうな足場の上に登ることが出来ることがあります。

一見登れなさそうな壁も、足場方向に向かってダッシュしながらジャンプすることで登れる

始めに説明した通り、VketCloudでは球体の中心より小さな段差は進み続けることで登ることができます。
通常のジャンプでは登れない足場も、足場方向に向かってダッシュすることで「小さな段差判定」を発生させることで上に登ることができます。

したがって、壁コライダーの高さは余裕を持った高さに設定することを推奨します。

上記画像の設定がこちらです。1.6~1.7程度の高さでこの現象を確認できます。

7 リフレッシュレート

VketCloudのFPS値はモニターのリフレッシュレートによって決まります。
リフレッシュレートが144Hzのときは、FPSも144フレーム/sとなります。

VketCloudで移動を行う際の着地判定は、1フレーム後の移動先が空中か否かで決まります。

したがって、リフレッシュレートが高ければ高いほど1フレームの移動距離が短くなるため、
壁に向かって進み続けた際、壁の向こう側にある床判定を拾うことのできる距離が短くなります。

ゆえに、高リフレッシュレートであればあるほど4の浮遊による壁抜けは発生しづらくなります。

公式ワールドでは60FPSで遊ばれることを想定した作りになっています。

FPSが高いほど床判定を検知する距離が短くなる

8 MeshCollider

MeshColliderを持つオブジェクトにHEOMeshColliderを付けることで、MeshColliderをVketCloudワールド空間上で使える当たり判定として動作させることが可能ですが、複雑なMeshColliderの場合、正常に動作しないことがあります。
床や壁の当たり判定を作成する際は、BoxColliderで作ることを推奨します。

まとめ

コライダーを見た目通りに設定してしまうと、思わぬところで壁抜けを起こしてしまう可能性があります。
壁抜けが発生しないようコライダーを調整することで、プレイヤーが思わぬ場所に移動してしまうことを防ぐことができます。

また、壁抜けが発生する条件を熟知することで、意図的な壁抜けを発生させることもできます。場合によっては壁抜けが発生したほうが面白いワールドになることもあるので、臨機応変に使い分けたいですね。

それでは、良いVketCloudライフを!

この記事が参加している募集

メタバースやってます

みんなにも読んでほしいですか?

オススメした記事はフォロワーのタイムラインに表示されます!