土鍋で雑多煮

UnityでXR・ゲーム開発をしています。学んだことや備忘録、趣味の記録などを書いていきます。

MENU
トップ > Unity > Meta Horizon OS UI SetでMeta推奨デザインシステムに従ったUIを作ろう

Meta Horizon OS UI SetでMeta推奨デザインシステムに従ったUIを作ろう

Unity デザイン VR MR XR

はじめに

どうも、土鍋です。
10月初旬にMetaが公式でQuestのUIデザインに関するドキュメントを公開しました。 そこで今回はドキュメントをざらっと紹介し、Unityでの使用方法について解説します。

Meta Horizon OS UI Setとは？

公式のUIセット解説から引用
https://developers.meta.com/horizon/documentation/unity/unity-isdk-uiset/

Meta Horizon OSのUIセットは、没入型エクスペリエンスのために設計された基本的なユーザーインターフェイスコンポーネントのセットです。Unity向けおよびFigma向けのMeta XR Interaction SDKからダウンロードでき、設計と開発のプロセスの効率化を実現します。

Meta Questにおけるデザインシステムが非常に分かりやすくまとまっており、Unityのサンプルもあるのですぐにデザインシステムに沿ったUIを構築できる。

公式解説

公式ドキュメント
https://developers.meta.com/horizon/design/buttons

Figma
https://www.figma.com/community/file/1425877250001997196

今回はFigmaの解説を中心にUnityでのUIの構築を解説する。

FigmaでUI仕様を確認

Figmaで一通りのコンポーネントセットが閲覧できる。

https://www.figma.com/community/file/1425877250001997196

Getting started

ページ全体でテーマを変える。

コンポーネントごとにテーマを変えることもできる。

local variablesからデザインシステムの設定変更ができる。

このようなデザインシステムをUnity側にも共通実装しておくことで、FigmaのデザインとUnityでのUIデザインを統一することができる。

Foundation

Colors

Unityでこれらのカラーに対応させるのをいちいちRGBでやっていると、効率が悪いし微妙に色が違うなどの問題が発生しうる。そのためUnity標準のものではなくて、独自でカラークラスとUIコンポーネントクラスを作り、適用するのが良いと思われる。

Typography

Haptics

一般的にハプティクスは、必要なときに人々の注意を引き付けたり、ユーザーの入力に対してシステムフィードバックを提供することで、ユーザビリティを向上させるのに役立ちます。 ハプティクスはアクセシビリティを向上させ、視覚的または聴覚的フィードバックの不足を補うことができます。 仮想現実や拡張現実環境では、ハプティクスは触覚フィードバックを提供し、より没入的でリアルな体験を生み出します。

Designing Haptics
https://developers.meta.com/horizon/resources/haptics-design-guidelines/

ドキュメント
https://developers.meta.com/horizon/resources/haptics-overview/

Meta Haptics Studio

https://developers.meta.com/horizon/resources/haptics-studio/

ハプティクスのデザインを行うツール。

Haptics SDK

https://developers.meta.com/horizon/resources/haptics-sdk/

Unity、Unreal、Native用に提供されている。デザインしたハプティクスをそれぞれのアプリケーション向けに実装する際に使用する。

UI Surface

UIの土台となるパネル。

Spacing

Spacingの例。ダイアログの参考になりそう。

Shapes

パネルや通知、リストなどそれぞれのコンポーネントにおける角丸の半径の例が示されている。

Grid System

グリッドレイアウトの配置例。
1→2→3→4→6→12の順番で上から分割されていく。

Icons

XR、Meta固有のアイコンが多数含まれるほか、音量やWifi、矢印など、普通にVR以外のアプリでも使用できそうなアイコンが含まれている。

地味にXR系の説明する際のアイコンが不足するので非常に助かる。

UI components

インタラクション可能なコンポーネント群。
音やハプティクスも設定されている。

Buttons

Primary Buttons: 一番良く目立たせたいボタン。決定など。
Secondary Buttons: 二番目のボタン。キャンセルなど。
Borderless Buttons: 背景のないボタン。
Destructive Buttons: ユーザーは注意する必要があるボタン。削除ボタンなど。

Unity標準のボタンのようにホバー時プレス時の状態の色を提示してくれている。

Text Tile Button

でかめのボタン。
ボタン背景をワールドの写真などにしてワールド選択ボタンとか作れそう。

Button Shelf

中くらいのボタン

Side Nav Item

以下のようなサイドナビ用のボタンアイテム。
Textをユーザーの好みで隠してアイコンだけにできるのをよく見る。

Slider

音量調節、感度、クオリティ調節などの設定画面で重宝しそう。

Control

Toggle: オンとオフ
Checkbox: 複数選択可能
Radio: 一個のみしか選択させない

タップすると下にリストメニューが表示される。

Tooltip

ホバーすると解説が出てくる系で使われるやつ。

検索バー。マイク入力対応のコンポーネントはUnityにはなかった。

Text Field

パスワード入力欄など。状態によって枠やアイコンの色を変える。

Dialog

ユーザーに確認を求めるウィンドウ。
アイテム購入などの課金機能でも利用する。

Inputs

ユーザーの操作のチュートリアルや説明文で使用できる画像がある。
これは地味に助かる人が多いのではないでしょうか？

Controllers

Avatar Hands

Custom Hands

Affordances

Gamepad

Keyboard

Templates

UIのサンプル集。

Environments

チュートリアル画面を作る際に使用できそうな背景。

UI Pattern Templates

コンポーネントを組み合わせて作るUIの例。

Tutorial

チュートリアルはゲームやアプリのユーザー体験において非常に重要なので上記のように作ろう。

Unityでの実装

UnityでMeta Horizon OS UI Setを使ってみます。

Meta XR Interaction SDKのインポート

Meta XR All-in-One SDKをインポートすればデフォルトで入っている。

assetstore.unity.com

もしMeta XR All-in-One SDKを使用しない場合は、Meta XR Core SDK、Meta XR Interaction SDK Essentials、Meta XR Interaction SDKをインポートする必要がある。

サンプルシーン

サンプルシーンは Packages > Meta XR Interaction SDK Essentials > Runtime > Sample > Objects > UISet の中にある。これをAsstes/Scenesなどに移動。

シーンを開くと、Figmaにあったようなコンポーネント群が確認できる。

テーマの変更

テーマは Packages/com.meta.xr.sdk.interaction/Runtime/Sample/Objects/UISet/Themes/ にある。これを複製し、自分のテーマを作成する。

それぞれのコンポーネントの色や状態変化時の色、フォントを変更できる。

↓雑にバックグラウンドカラーのみ変えてみた。

UIを自作する

ここからは実際にUIを作っていく。
Packages/com.meta.xr.sdk.interaction/Runtime/Sample/Objects/UISet/Prefabs/ 以下にFigmaであったコンポーネント群のPrefabが用意されているのでこれを使用する。

まずパネル用にEmptyUIBackplateWithCanvas Prefabをシーンに配置

その直下にUI Thema Managerコンポーネントがあるので、それに使用したいテーマを適用。

UIBackplate以下にボタンなど自由に配置したいPrefabを配置。
UIBackplateにLayoutGroupがもとからあるので必要ない場合は無効にする。

この要領でUIは簡単に作れる。

最後にXR向けの設定等を行う。
これはBuilding Blocksの Camera RigとRay Interactionを追加してあげれば終了。

注意点として、UIにインタラクションを行うには、PointableCanvasModuleが必要なので新しく空のゲームオブジェクトを作り配置してあげる必要がある。

これでVRでMeta推奨のデザインシステムに従ったUIが構築できる。

参考文献

https://developers.meta.com/horizon/documentation/unity/unity-isdk-uiset/ https://www.figma.com/community/file/1425877250001997196