Raspberlyのブログ

Raspberlyのブログ

Unityネタをメインとした技術系ブログです。にゃんこ大戦争や日常なども。そろそろブログタイトル決めたい

【アセット紹介】HUD for VRでVR用のHUDを作る【Unity】

今回はアセットの紹介をしていきます。
紹介するのはHUD for VR - Sterile Future
VR用のSFチックなHUD UIアセットです。

f:id:Raspberly:20200619193122p:plain

 

前回の記事を書いている途中に見つけたアセットで、面白そうなので紹介記事を書いてみました。

raspberly.hateblo.jp

 

 

 

どんなアセット?

VR用のHUDアセットです。HUD用のUI素材に加え多くのScriptがついています。
10ドルする有料アセットでしたが、無料になりました。

VRプロジェクトに有益なSci-Fi Hudを使用します。VRの乗り物酔いがなくても機能し、プロジェクトで完全にカスタマイズできます。

無菌未来;
+使いやすい+非常に
高速で最適化されている
+データを使用して アニメーション化され 、カスタマイズ可能。
+ VRの問題なし
+階層化されたセットアップでの作業
+含まれるソースコード
+ Mixed Reality HMD互換性
+ OculusおよびVive互換性
+モバイルVR互換性

インポートが簡単で、カスタマイズ可能なリグが無限にあり、最高の外観と快適さを実現します。

WebGLのデモがこちらから確認できます。

f:id:Raspberly:20200621014533p:plain

 

 

開発環境

Unity2019.4.0f1

HUD for VR - Sterile Future ver1.0

 

 

セットアップ

アセットインポート完了時はこんな感じです。

f:id:Raspberly:20200620231737p:plain

インポート時のエラーの解決

インポート完了後以下のようなエラーがでました。

f:id:Raspberly:20200620215206p:plain

このアセットにはMouseLock.csというScriptが含まれていますが、
Oculus Integrationにも同名のScriptがあるためエラーが起きています。

そのためファイル名とクラス名を別の名前に変えてあげると解決します。

 

サンプルシーンの確認 

VR HUD - Sterile Future/Scenes/SampleSceneがサンプルシーンになります。
前述の通りVR用のアセットですが、こちらはマウスでも操作可能になっています。
先ほどエラーが出ていた、MouseLock.csがマウス移動を反映しているようです。

f:id:Raspberly:20200620231840g:plain

画面には遅れて追従するHUDが表示されています。
目線の中央に位置するレティクルに、SFチックなインジケーターが盛りだくさんです。
右下、左下に表示されている数字はCameraの角度になります。右下がX軸(縦方向)で左下がY軸(横方向)です。

 

 

 

主要コンポーネント

CanvasLayerMove

このアセットのメインになるのがHUDです。SampleSceneにも置いてあります。

f:id:Raspberly:20200620233413p:plain

この中にCanvasが入っていますがCanvasにアタッチされているCanvasLayerMoveが重要なコンポーネントです。

f:id:Raspberly:20200620235313p:plain

Tracked Object

 追従するオブジェクトです。何も設定されていない場合はStart時にMainCameraが格納されます。

Track

 追従するかどうか、Falseにすると追従しなくなります。

Rotate Speed

 追従速度です。

 

 

 

 

実際に試してみる

テスト用のSceneとして、Oculus IntegrationのDistanceGrabを使います。

raspberly.hateblo.jp

 

このアセットの使い方ですが、PrefabのHUDをScene内に追加するだけです。

f:id:Raspberly:20200621013313p:plain

f:id:Raspberly:20200621013351p:plain

後は再生するだけでHUDが動作します。これは簡単!

f:id:Raspberly:20200621013508g:plain

後は自分好みにコンポーネントのパラメータを変えたり、HUDのデザインを調整すればよさそう。

 

 

付属のコンポーネント

主要コンポーネントであるCanvasLayerMove以外にもたくさんのコンポーネントが付属しています。

AngleToHUD

Cameraの角度を取得しTextに反映するコンポーネントです。
GetComponent<Text>をしているので、TextMeshProに使う場合は少し手直しが必要です。

f:id:Raspberly:20200621004055p:plain

f:id:Raspberly:20200621004259g:plain

 

RotateWithMove

Cameraの角度に応じてUIを回転させるコンポーネントです。

f:id:Raspberly:20200621005316p:plain

外側にある円の回転をコントロールしています。

f:id:Raspberly:20200621005423g:plain

 

SlideWithMove

Cameraの角度に応じてUIのPosXを変化させるコンポーネントです。
一定値を超えると反対側にリセットさせるようにできています。

f:id:Raspberly:20200621010009p:plain

f:id:Raspberly:20200621010015g:plain

 

FillWithMove

Cameraの角度X軸Y軸に応じてImageのFillAmoutを変化させるコンポーネントです。

f:id:Raspberly:20200621010340p:plain

f:id:Raspberly:20200621010436g:plain

 

OpacityWithMove

CanvasとTargetとの角度の差に応じてSpriteの透明度を変化させるコンポーネントです。

f:id:Raspberly:20200621010939p:plain

f:id:Raspberly:20200621011110g:plain

 

パラメータのSpeedに応じて点滅(ColorのAlphaを変化)させるコンポーネントです。

f:id:Raspberly:20200621011243p:plain

f:id:Raspberly:20200621011457g:plain

 

 

その他 HUDが障害物に隠れる問題

WorldSpaceのCanvasの宿命として地形や障害物に隠れる問題がおきます。

f:id:Raspberly:20200621014107g:plain

こちらは前回の記事で解決法を載せているので合わせてどうぞ。

raspberly.hateblo.jp

 

 

 

まとめ

VR用のHUDアセットだが、UI素材だけでなく付属のScriptも演出に役立つものばかり。
・使い方はPrefabをScene内に置くだけ。
これで無料

 

 

他のアセットの紹介記事はこちら↓

raspberly.hateblo.jp

 

VR開発記事はこちら↓

raspberly.hateblo.jp

 

 

 

 

※本記事にはAssetStoreアフィリエイトリンクが含まれています。

他、間違っている箇所、わかりにくい所がありましたらコメントにお願いします。