【NeosVR】UIX講習会備忘録【UI】

Kanon04

この記事はNeos VR Advent Calendar 2022の18日の記事です。
昨日の記事は靴ひも伍長さんの「NeosVRにログインしたきっかけと最近の遊び方」でした。
明日はlillさんの「NeosVR JP Twitterコミュニティ」です。

はじめに

早いもので前回のアドカレからもう一年が経過してしまいました。
今回の記事は先日(8月13日)にUIX Lab.によって開催されたUIX講習会の内容を思い出しながらまとめた備忘録となります。
講習会自体はYouTubeでも配信されたので良ければ視聴してみてください。

→動画←

UIXとは

簡単に説明するとNeosVRのUIのことです。
詳しくはNeos wikiを見てください。

学んだこと

ここから本題ということでUIXについてザックリ書いていきます。

UIXの構造

UIXの構造は階層が深く最初は何がなんだかわからないというような状態になるかと思います。これはUIXの各要素（ボタンやテキストなど）がそれぞれ別のスロットに入れる必要があるからとのことでした。
どんな要素が入っているかはスロット名に書かれていることが多いです。例えば、VertというスロットにはVerticalLayoutがあったり、ButtonというスロットにはButtonがあったりといったようなかんじです。

階層深すぎてわけわからん

よく使うコンポーネント

基本的にUIXで使うコンポーネントはUIXカテゴリの中に入っています。

UIX >

ここではその中のいくつかを簡単に紹介します。

  • Canvas

    • 場所：UIX/Canvas

    • 紹介：UIXの大本にあるもの、UIX全体のサイズの設定などができる。

  • RawImage

    • 場所：UIX/Graphics/RawImage

    • 紹介：写真などの画像を表示できる。

  • Button

    • 場所：UIX/Interaction/Button

    • 紹介：ボタンが配置できる。押されたときなどの色も設定できる。

  • VerticalLayout

    • 場所：UIX/Layout/VerticalLayout

    • 紹介：直下のスロットにあるUIXのいろいろな要素を垂直に並べて表示できる

  • HorizontalLayout

    • 場所：UIX/Layout/HorizontalLayout

    • 紹介：直下のスロットにあるUIXのいろいろな要素を水平に並べて表示できる

UIXには背景が必要

背景、基本的にはBGという名前のSlotが背景にあたります。
背景がないと後ろのマテリアルによってはUIXが透明になって見えなくなってしまう場合があります。

TODO　写真追加

全体のサイズ = CanvasコンポーネントのSizeパラメータ

UIX全体のサイズはUIXの大本のSlotにあるCanvasコンポーネントのSizeパラメータによって変化します。受け売りですが、サイズを変えるとUIXの各要素も対応して変わってくれるようにできるところがUIXのいいところらしいです。

配置は基本は縦か横

UIXを作るにあたって最初に決めるべきことは一番大きいレイアウトが縦なのか横なのかです。縦ならVerticalLayout、横ならHorizontalLayoutを使います。大きいレイアウトの中でまた縦や横のレイアウトがある場合はそこでも各Layoutのコンポーネントを使います

その他追記予定

多分そのうち書きます。

おまけ：UIXのファセット化

この方法でファセットを作ってダッシュメニューに置く場合は自己責任でお願いします。
ここではファセットがなにかについては割愛しますが、簡単に言うとダッシュメニューに置くことのできるアイテムのことです。

  1. ファセット化したいUIXの大本のスロットにRadiantUI/FacetからFacetコンポーネントをアタッチします。

  2. 勝手にCanvasというスロットが追加されているので削除します。

  3. アタッチしたFacetの中に_canvasというパラメータがあるのでそこをファセット化したいUIXのCanvasコンポーネントを指定します。

以上の手順でファセット化ができたかと思います。

この記事が気に入ったらサポートをしてみませんか？