VRunner

VRマーケットを牽引するトップランナーのインタビュー誌

【UnityではじめるVR開発!】VRに適したUI設計(3/3)

【UnityではじめるVR開発!】VRに適したUI設計(3/3)

VRならではのUI設計・実装や、視線やコントローラを使用した操作の実装を全3回に分けて紹介していきます。プログラミング初心者の方もOKです!

第3回の内容は「VRに適したUI設計〜後編〜」です。

フェードの実装

3-0. 事前準備

本記事は第2回「VRに適したUI設計〜前編〜」の続きの内容となっています。
第2回の記事をまだ読んでいない方は コチラ を先に読んでください。

3-1. はじめに

VR Samples デモScene をどれでもいいので実行してみると「アプリの起動したタイミング」と「ボタンを押す」と真っ黒にフェードアウトするのが確認出来ると思います。これはVRアプリではよく用いられているエフェクト処理になります。

実は、VR空間での画面切り替えは非常に厄介です。何もせずに突然画面が切り替わると、人は不快感を感じ、それがVR酔いに繋がります。
なので、VR上で画面が切り替わるときは映像に連続性をもたせて段階的に画面を切り替えるような処理が必要になります。

そこで今回は「画面のスタート時」と「ボタンが押されたとき」にフェードする処理を追加したいと思います。
ついでに、ボタンが押されたら新しいシーンに遷移するようにしたいと思います。

3-2. フェード処理を追加

では実際にフェード処理を追加してみましょう。

上記の画像のとおり、方法としては単純で黒い画像をカメラの前で表示し、段階的にアルファ値を下げて透過しているだけになります。
MainCamera / VRCameraUI / FadePanel があるのを確認してください。今回はこのオブジェクトを使ってフェード処理を実装していきます。

フェード処理を行うスクリプトを自作しても良いですが、既に VR Samples に高機能なものが用意されているのでそれを使いたいと思います。

Assets / VRSampleScenes / Scripts / Utils にある VRCameraFade.csMainCamera にアタッチします。
そして、Inspectorの設定項目を下記の画像のように設定してください。

では、 VRCameraFade.cs の中身をチェックしてみましょう。

BeginFade() は引数として、Inspectorで設定した色情報の StartCol と、その色からアルファ値をゼロにした endCol 。そして同じくInspectorで設定した duration が渡されてます。 これはフェードアウトするまでの時間になります。

Color.Learp() ですが、第三引数を使って第一引数と第二引数の間の色を線形補間して返します。
つまり、第三引数が0のときは第一引数の色に、第三引数が1のときは第二引数の色を返します。
つまり、この部分でフェードが行われています。
Unity – スクリプトリファレンス: Color.Lerp

3-3. シーンの遷移にフェードを利用

まず、シーンを遷移させるための 新規Scene を作成しましょう。
次に、MainCamera の直下に Assets / VRSampleScenes / Prefabs にある VRCameraUI を設置します。
さらに、MainCamera に Assets / VRSampleScenes / Scripts / Utils にある VRCameraFade.cs をアタッチし、下記の画像のように設定してください。

UnityRemoteを使っている方は MainCameraCameraController.cs をアタッチして isRemote にチェックを入れておきましょう。

そして忘れずに、Build Settings > Scenes in Build に新規作成したシーンを追加してください!

このままでは味気ないので全天球画像を貼り付けてグルグル見れるようにしたいと思います。

Flicker VR から 全天球画像(.jpg) をダウンロードしましょう。
ダウンロードした 全天球画像 を Asstes の直下にドロップアンドドラッグしましょう。
その画像の Inspector の設定項目の TextureShapeCube に変更して、下にある Apply ボタンを押下してください。

また、Asstes の直下に 空のMaterial(右クリックして Create > Material)を作成してください。
その Material の Inspector の設定項目の ShaderSkybox / Cubemap に変更しましょう。
するとその下の設定項目に Cubemap(HDR) が表示されるので、先ほど用意した全天球画像を選択しましょう。

最後に Window / Lighting / SettingsEnvironment / SkyboxMaterial を先ほど作った Material に変更しましょう。

では全天球画像を貼り付けた Scene を保存して、今まで作業を行なっていた Scene に戻ります。
そして UIManager.cs を下記のように更新しましょう。

 

UIManager.cs の変更を保存した後、Inspectorで先程作成したシーン名を sceneName に入力します。

ここまで出来たら実行してみましょう。下記のように遷移したら完成です!

 

 

まとめ

お疲れ様でした!

実際にVR開発を行なってみて、どのように感じましたか?
意外と簡単だと思いませんか?

確かに1つ1つの機能を深く理解するのは大変かもしれませんが、
VR Samples の中から必要なパーツを取り出して組み合わせることでVRコンテンツを作ることができます!

来月は Google VR SDK の使い方をまとめる予定です。
興味がある方はぜひそちらも御覧ください!
ではまた〜!

 

ps. 皆様の声
Q. 後編の内容、前編に比べて少なくない?
A. 仕様です!(第1回:2682文字、第2回:7447文字、第3回:2750文字)




VRプロフェッショナルアカデミー!
2018年12月編入生、2019年4月生募集中

VRプロフェッショナルアカデミーは現在募集イベントを開催しています。 VRプロフェッショナルアカデミーについて興味がある。詳しい内容を聞きたい。VRを体験したい。授業を見学したいなど、様々な目的に合わせて参加可能です。 是非お気軽にお申し込みください。

オープンキャンパス【期間限定・毎週土曜日】
〜個別説明会&授業見学&VR体験会〜

時 間: 60〜90分(13:00 〜 17:00)
場 所: ・お茶ノ水校(小川町駅 徒歩3分, 淡路町駅・新御茶ノ水駅 徒歩4分)
・中目黒VRサロン(東横線・日比谷線 中目黒駅徒歩2分)
・恵比寿校 株式会社フェローズ 7階・セミナールーム
※当日の場所については直接お問合せください
申込み: こちらをクリック!

個別説明会&VR体験会【平日限定】

時 間: 60〜90分(13:00 〜 17:00)
場 所: 中目黒VRサロン(東横線・日比谷線 中目黒駅徒歩2分)
申込み: こちらをクリック!

VRデザイン研究所の5つの活動

日本のVRマーケットを盛り上げるために5つの活動を推進しています
  1. 「VRプロフェッショナルアカデミー」即戦力のVRエンジニアを育成するスクールの運営。
  2. 企業向けVRビジネスの研究会「VRビジネスフォーラム」の企画・運営。
  3. 一般向けVR体験会「VRフェス」の企画・運営。
  4. 「VRエクスペリエンスラボ」VR/AR/MRコンテンツの企画・受託開発。
  5. VR情報専門誌「VRランナー」の編集・発行。
Return Top