はじめに
こんにちは。 株式会社アドグローブ ゲーム事業部のUIデザイナーYMです。
皆さんはAppleの「Vision Pro」をご存じでしょうか？
2023年6月に発表され、日本では2024年6月に販売開始されたAR/VRヘッドセットです。
完全三次元のインターフェイスを採用しており、操作は目と手と声だけで可能となっています。
株式会社アドグローブでは入手後、希望者に貸出したりしています。
今回はそんなVisionOS向けアプリゲームのUIを制作した際、普段の開発とは違うと感じた点や、注意点等も併せてご紹介したいと思います。
VisionProを体験してみる
まず画面を制作する前に会社にあるVisionProを実際に体験することにしました！
下記にレビューをまとめます。
■視野角ギリギリにUIを表示すると目が疲れるので、余裕を持たせた画面構成にする。
■視線操作だけでなく、実際にタッチすることもできるが、上記の選択されている部分は変わらず見せてあげる必要がある。
■UIは邪魔にならないようにするのが優先事項。常にゲーム中画面にあると追従してくるのもあり邪魔に感じる。
■フォントの大きさは一番遠い時に見える大きさを基準にする。
体験する前はスマホ操作に近いかと思っていましたが、基本操作が視線で選択→指で決定なので全く違う操作感であることがわかりました。
普段使っていない目の筋肉をつかっているからなのか、意外と目で操作するというのはかなり疲れました。
慣れないうちはどうしても首を動かしてしまいうまく操作できなかったり…と大変なこともありました。
ですが、最新のAR/VRヘッドセットを体験できたのはとてもいい経験になりました！
画面制作をする前に
体験から帰ってきたところで、実際に画面を制作する前に事前準備をします。
解像度
ゲーム開発の解像度だとフルHDやアプリ向けではそれぞれ基準となる解像度があると思います。
VisionProは解像度3800 x 3000でFOV 90°を前提に、中央45°を実際に使う領域と考えてその領域にUIを表示することにして、1900 x 1500で画面を作ることにしました。
UI
当初はVisionProで使用されているSwiftUIを使用する想定でしたが、
ARMeshとSwiftUIが競合して操作できなかったため、使用できませんでした。
しかし全体的な印象をVisionProに寄せたいため、出来ればSwiftUIに近いデザインにしたいという話が…。
そこでSwiftUIの見た目に近づけるためUnity 6、VisionOS 2.0で使用できるShader GraphのUnlit シェーダーを採用しました！
Unlit シェーダー | High Definition RP | 10.5.1
やり方は簡単で、Base ColorにPolySpatial Background Blurノードを繋げるだけです。
これを作成した3Dメッシュに貼り付けて使用しました。
（Unityにある3DObjectのCubeなどに貼り付けてもいいのですが、今回のプロジェクトでは角丸を使用したかったので新しく用意しました）
ただ、このシェーダーをエディタで確認すると真っ黒かグレーに表示されてしまうため、シミュレーターで確認できる環境か実機でしか正しい見た目は確認できない欠点があります。
そのためエンジニアの方に都度実機確認画面を送っていただき調整していました。
いざ画面制作
体験や事前準備をふまえて画面を制作します。
ここでは制限時間があるアイテムを設置するゲームを想定しています。
アウトゲーム画面
インゲーム画面
・シンプルなUIで画面を邪魔しないようにする。
・ウィンドウデザインはUnlit シェーダー使用想定なのですりガラスデザインに。
・フォントは最低サイズを30pxに設定。（何回か調整しました）
こちらをUnityで実装します。
環境はUnity6で、Render Modeをカメラに追従するようにWorld Spaceで実装します。
基本的な実装方法は特別変わりはありません。
ただ、VisionOSでは対応されていない機能があるので、いつも通りに実装しようとすると不具合が起きることがありました。
例えば加算のMateralが使用できなかったので演出を調整したり、Custom Shaderが使用できずShader Graphしか使用できなかったりしました。
アニメーションも必ずフェードを使い、演出中に上下左右を見ても違和感が生じないようにします。
画面全体の暗転やトランジションは演出中首を振ると違和感が出る可能性があるので、使用しないようにしました。
上記で作成したPrefab、Animation、Animatorファイルをエンジニアさんにお渡しして、UIデザイナーのお仕事はひと段落です。
ちなみにこの後、エンジニアさんにUIの位置を顔方向に近づける調整を行っていただきました。
あまり近すぎるとテーブルメッシュにめり込むかつ、VisionProから「後ろに下がってください。何かに近づきすぎています。」という警告がでるので、めり込まない、かつ見える範囲のギリギリの33cmに調整してもらいました。
エンジニアさんが色々調べながら検証＆実装をすすめてくださったのでとても助かりました！
最後に
今回初めてちゃんとVRゲームの開発に取り組みました。
コンシューマーやスマートフォン向けとは違う操作や見た目を考えながら画面を作成するのはとてもいい経験になり楽しかったです！
少しお値段がするので気軽に試すのは中々難しいとは思いますが、ぜひ社内の人や周りに実機がある方はこの機会にVisionProを触ってみてほしいです。
今回あくまでデザイナー視点の話で紹介できていないVisionPro、VisionOSの機能が多くあるかとは思いますが、最新AR/VRデバイスの検証＆開発の一例としてお読みいただけますと幸いです。
最後までお読みいただきありがとうございました。
アドグローブでは、さまざまなポジションで一緒に働く仲間を募集しています！
詳細については下記からご確認ください。みなさまからのご応募お待ちしております。
