🦦

UIX Lab. UIX講習会　振り返り

2022/08/17に公開

こんにちは、rickyです。今日はNeosのオレンジさん主催のイベント『UIX Lab. UIX講習会』に参加させて頂きました。NeosVR内での実装でとても面白いイベントだったので技術の備忘録兼議事録として記事を書いていきます。

始めに

今回はUIXのお話になります。
UIXとは何なのでしょうか？
Neosの公式サイトにはこう書かれています。
『UIX is Neos's UI system. It allows you to create two-dimensional user interfaces, and is conceptually similar to the Unity UI system. It underpins the Dash Menu and Scene Inspector.

A useful UIX demo, UIX Canvas, can be spawned with the Developer Tooltip, found under the Objects category. It provides examples of layouts, images, buttons, and sliders. 』

deeplで直接訳すとこんな感じになります。

『UIXはNeosのUIシステムです。2次元のユーザーインターフェイスを作成することができ、コンセプト的にはUnityのUIシステムに似ています。ダッシュメニューとシーンインスペクタを支えています。

UIXの便利なデモであるUIX Canvasは、ObjectsカテゴリにあるDeveloper Tooltipで生成することができます。これは、レイアウト、画像、ボタン、スライダーの例を提供します。』

少し飲み込むのが難しい概念ですね...
正直筆者もそこまで理解しきれてませんが、どうやらUIXは2次元のユーザーインターフェースを作成できるというのがポイントのようです。

https://wiki.neos.com/UIX

概要

今回はTwitterのプロフィールにあるこの部分の実装をゴールに設定されていました。
画像を細かく分解すると
・背景画像
・ボタン
・画面を跨いだアイコン画像の配置
となり今回はそれらの実装になります。

ほぼすべての作業が『コンポーネント』→『UIX』で完結しています。

UIXの場所はここになります。

使うべきコンポーネントがわかりやすいのは大きなメリットでしょう。

作業手順

・描画元の設定
・背景画像と下部分に分割
・下の部分を更に3つに分割
・ボタン/テキストの実装
・アイコンの実装

の流れになります。
順番に見ていきましょう。

描画元の設定

キャンバスを作成
今回は既に存在するものを配布されたためコンポーネントの場所については不明

背景画像と下部分に分割

1つ階層を作る
そこに
『UIX Layout VerticalLayout』
という縦に並べる機能があるのでこれを追加する
RectTransformというコンポーネントも付随するがこれはUIXにおいて必須となる
子階層(Element)を作成し『UIX Layout LayoutElement』を追加する
『UIX Graphics Image』で色を付けることができるのでこれを追加する
この状態で複製をし、それぞれに色をつけてやると色分けができる

下の部分を更に3つに分割

先のやり方を応用し3つに分割をする

ボタン/テキストの実装

Elementに『UIX Interaction Button』これでボタンの実装が可能
Elementに『UIX Graphics Text』でテキストの追加Contentに情報を追加してテキストの挿入が可能

アイコンの実装

『UIX RectTransform』を付ける
詳細は1:26:27～を参照されたし

終わりに

簡単にUIを作れてしまうため非常に勝手が良さそうな印象でした。まだ細かな点を理解しきれていないので何度か実装して物にしていきたいところです。また筆者の力量不足で要点が分かりづらいところや説明が誤っている部分があるかもしれません。その場合は今日のイベントの様子がyoutubeでも公開されているのでそちらをアック人していただければ幸いです。

最後になりましたが今回イベントを開催されたオレンジさん並びにサポートして下さったスタッフの皆さんに感謝します。ありがとうございました。