VRでのユーザーインターフェース

確認済のバージョン: 5.3

-

難易度: 初級

VR 用ユーザーインターフェースの設計に当たっては、従来の画面デザインでは必ずしも考慮する必要のなかった様々な事柄を考慮する必要があります。この章では、VR 開発者が直面する課題や選択肢のいくつかを確認して行くとともに、VR という新種の媒体において快適なインターフェースを設計するための、ハードウェアに関するヒントをご紹介します。

UI の解像度と見た目

DK2 の解像度が 1920 x 1080 (各眼 960 x 1080)であるのに対し Gear VR の解像度は 2560 x 1440 (各眼1280 x 1440)であるため、幅または高さが数ピクセル以上の要素全てに、目に見えて分かるブロックノイズが発生する可能性があります。

特に UI 要素に関しては、画面上でどの程度の大きさで表示されるかを考慮する必要があります。VR で見た時にブロックノイズを発生させやすい細い線の使用を避け、大きめあるいは太めのフォントで UI をデザインするのもひとつの方法です。

UI の種類

Non-diegetic

非 VR のプロジェクトでは、体力やスコアなどの通常 HUD と呼ばれる要素を表示するために、UI は画面の最前面にオーバーレイ表示されることが多くあります。これは、 non-diegetic UI(ノン・ダイジェティック UI)として知られます。つまり、ゲーム世界そのものの中には存在しないけれども、ゲームを見ているプレイヤーにとって意味を持つ要素です。

この用語は映画業界でも使われています。例えば映画やテレビ番組の中などの音楽はノン・ダイジェティック・サウンドにあたります。これに対し、見ているものの内容の上に付加的な要素として意味を成すもの (キャラクターの台詞や効果音など) はダイジェティック・サウンドと呼ばれます。

Unity では、HUD スタイルの non-diegetic UI の追加は通常、UI Canvas の描画モード(Render Mode)を Screen Space - OverlayScreen Space - Camera に設定して行います。

Screen Space - Camera

Screen Space - Overlay

VR では通常、このアプローチは使用できません。理由は、人間の眼は近過ぎる物には焦点を合わせることができないことに加え、 Unity VR が Screen Space-Overlay に対応していないからです。

Spatial UI

VR では、上記の方式ではなく、通常は、描画モード(Render Mode)の World Space Canvas を使用して環境自体の中に UI を配置する必要があります。こうすることでプレイヤーの眼が UI に焦点を合わせられるようになります。これは Spatial UI (空間 UI)と呼ばれます。

World Space

ワールド内に UI を配置する際にも注意すべきことがあります。UI がユーザーに近すぎると眼精疲労に繋がります。逆に遠すぎると水平線に焦点を合わせているような感覚になり、これは屋外の場合は問題ないかもしれませんが小さな部屋の場合は問題です。また UI の縮尺に関しても適正な設定が必要です。動的な設定が必要な場合もあります。

できれば UI は読み取りやすい距離に配置し、適切な縮尺に調整するのが最善です。参考に Main Menu の UI をご覧ください。UI は数メートル先に配置されており、画像が大きく見やすくなっています。

「ユーザーから一定の距離」に UI を配置すると、UI が他のオブジェクトに食い込んで切れて表示されてしまうことがあります。VR におけるインタラクション の章の レティクル の項で、シェーダーを修正して UI を他のオブジェクトの上に描画する方法を説明していますのでご覧ください。または、VR Samples に含まれているシェーダーもご使用いただけます。このシェーダーは、テキストが切れて表示されるのを修正したい場合にも使用できます。

多くの開発者は、最初に UI をカメラにアタッチして、プレイヤーが動いても常に一定の位置に UI が表示されるようにします。これはレティクルや小さな要素には役立ちますが、大きな UI 要素の場合、ずっと目の前に新聞を掲げ持ったまま周囲を見回すような形になり、不快感や吐き気を引き起こしやすくなります。Shooter 360 (Target Arena) の UI をご覧ください。UI が、若干の遅れをもって視界に入ってくるようになっています(以下の GIF 画像参照)。このためユーザーは、固定表示された UI 要素に視界を遮られることなく環境を見回して、環境に慣れることができます。

360 Menu

VR は 360 度環境における没入型体験を可能にしますが、ときとして、特定の方向を見るようにユーザー対して促すことが必要になります。ユーザーの注意を特定の方向に向ける、ひとつの方法は、ワールド内における矢印の使用です。この矢印は、ユーザーがどの方向に面しているかによって、フェードイン・フェードアウトします。

矢印は GUIArrows プレハブ内にあり、簡単に使用できます。希望の方向と頭の角度との比較によって機能する仕組みです。頭の角度が、事前に設定した角度(下記の GUIArrows コンポーネントの Show Angle をご覧ください)から外れると、矢印がフェードインします。見て欲しい方向にユーザーが向き直ると矢印がフェードアウトします。

GUI 矢印

180 Shooter

Diegetic UI

Spatial UI(空間 UI)に代わる手法として、環境内の要素自体に情報を表示する方法もあります。例えば、壁掛け時計やテレビ、コンピューターの画面、携帯電話、近未来の銃に搭載されたホログラム画面などです。このような UI は Diegetic UI(ダイジェティック UI)と呼ばれます。

Flyer シーンの飛行機に付いた UI や、Shooter (Target) シーンの銃の UI をご覧ください。

ダイジェティック UI の飛行機

ダイジェティック UI の銃

これは厳密には Diegetic UI ではないかも知れませんが、インターフェースがオブジェクトにアタッチされているという点において参考になるでしょう。

UI に関する参考資料

上記にご紹介した各種 UI についての詳細な分析が、こちらの GamaSutra の記事(英語)でお読みいただけます。(VR には言及していません。)

UI インタラクション

VREyeRaycasterVRInputVRInteractiveItem を “VR におけるインタラクション” の章で解説されている通りに使用すれば、VRInteractiveItem イベントにサブスクライブするクラスの作成によって、UI 要素との基本的なインタラクションを作成できます。

詳しくは、“VR におけるインタラクション” の章にある、Maze シーンのスイッチに関する解説をご参照ください。また各ゲームの開始時にも、ユーザーがインストラクションを読んだことを確認する為の UI インタラクションを使用しています。

VR における Unity UI の使用について、更なる情報は Oculus ブログの記事(英語) “Unity’s UI System in VR(VR における Unity の UI システム)” をご覧ください。コードのサンプルも提供されています。

VR Samples のシーンの UI

ここで、上記で解説した方法が実際に VR Samples のシーンでどのように使用されているか見て行きましょう。

Menu

Main Menu

Menu シーンの UI は、カスタムのメッシュを使用することによって、曲線状に囲い込まれた空間を実現しています。このメッシュとのインタラクションには “VR におけるインタラクション” の章で説明した方法を使用しています。

Flyer

イントロダクションの UI およびゲーム終了時の UI は、ワールド空間に静的に配置されています。

Flyer イントロダクション

ただし、ゲームに関する情報の表示には、飛行機の位置にワールド空間 UI をアタッチして Diegetic UI として機能させる方法をとっています。

飛行機は常にユーザーの視界に入っているので、視界の中心となるその位置に情報を表示するのは理にかなっています。

カメラに直面した Flyer UI

また UI はカメラに直面するように回転します。これによって UI の角度の傾きを防ぎ、常に読み取りやすくなるようにしています。

Maze

Maze (迷路)シーンでは、イントロダクションのシーンとエンディングのシーンでSpatial UI を使用しています。

Maze イントロダクション

Spatial UI は、スイッチがアクティベートされたときにユーザーにインタラクションを促すためにも使用されています。

Maze 「Look And Hold (長く見続けてください)」

Shooter 180 (Target Gallery)

ここでも、イントロダクションとエンディングで静的な Spatial UI が使用されています。

Target Gallery イントロダクション

上述の、銃の diegetic UI です。残り時間とスコアが表示されています。

ダイジェティック UI の銃

Shooter 360 (Target Arena)

このシーンでは空間 UI が使用されていますが、少し変わった仕様になっています。360 度のアリーナが舞台となっているため、プレイヤーが周囲を見回した時に、UI が水平方向に移動しながら少し遅れて視界に入ってくるようにしました。こうすることで、自由に周囲を見渡せる環境に居ることをユーザーがより感じられるようになっています。

Target Arena タイトル

銃の diegetic UI がここでも使用されています。

Target Arena の銃の UI

VR 用テキストの無負荷アンチエイリアス処理

Unity において、レンダリング負荷のないアンチエイリアス処理をテキストに適用したい場合は、World Space Canvas に Canvas Scaler を使用することをお勧めします。UI の “Reference Pixels Per Unit” は 1 に設定し、テキストの縁が若干柔らかくなるまで “Dynamic Pixels Per Unit” を変更してください。 こちらの画像では、Dynamic Pixels Per Unit (Unit 毎の動的ピクセルの数)を 3 に設定した場合と 1.75 に設定した場合の違いをご覧いただけます。3 に設定した場合では輪郭がはっきりしていますが、1.75 の設定ではかなりソフトになっています。

Dynamic Pixels Per Unit 3

Dynamic Pixels Per Unit 1.75

本章では、各種ユーザーインターフェースについて、そのどれが VR に適しているか、特定の課題への対処方法も含め、ご説明させていただきました。VREyeRaycasterVRInputVRInteractiveItem を使用して基本的な UI インタラクションを作成することもできます。

更なる情報が、Oculus ブログの記事(英語) “Unity’s UI System in VR(VR における Unity の UI システム)” で提供されています。

次章では、VR における動き に関して学んで行きます。