【NeosVR】UIX講習会備忘録【UI】
この記事は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があったりといったようなかんじです。
![](https://assets.st-note.com/img/1671872706863-H7fnlmo2p4.jpg?width=1200)
よく使うコンポーネント
基本的にUIXで使うコンポーネントはUIXカテゴリの中に入っています。
![](https://assets.st-note.com/img/1671876829491-eLRfsRCezl.png)
ここではその中のいくつかを簡単に紹介します。
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のファセット化
この方法でファセットを作ってダッシュメニューに置く場合は自己責任でお願いします。
ここではファセットがなにかについては割愛しますが、簡単に言うとダッシュメニューに置くことのできるアイテムのことです。
ファセット化したいUIXの大本のスロットにRadiantUI/FacetからFacetコンポーネントをアタッチします。
勝手にCanvasというスロットが追加されているので削除します。
アタッチしたFacetの中に_canvasというパラメータがあるのでそこをファセット化したいUIXのCanvasコンポーネントを指定します。
以上の手順でファセット化ができたかと思います。
この記事が気に入ったらサポートをしてみませんか?