UIX - LogiX-Educational-Institute/NeosVR-JP-Wiki GitHub Wiki
高パフォーマンスなUIを作成できるフレームワーク。 要は「軽い」。
Neos VR内の多くのUI（インスペクター・インベントリ・コンテキストメニュー・その他）はUIXで構成されている。
DevToolを使用してCreate new→Object→NeosUI→Panelを作成する。 これをInspectorで開くとContentというSlotにCanvasというコンポーネントが入っている。
Contentの子にSlotを追加し、そこにUIX関連のコンポーネントを入れることでUIを作っていく。
UIXの土台となるコンポーネント。 ここでUI全体のサイズやタッチ方式の設定ができる。
Rectのサイズを指定するコンポーネント |---|---| |:---|:---| |AnchorMax|Rectの右上の点の位置を割合で指定する。| |AnchorMin|Rectの左下の点の位置を割合で指定する。| |OffsetMax|Rectの右上の点の位置をピクセルで指定する。| |OffsetMin|Rectの左下の点の位置をピクセルで指定する。| |Pivot||
単色、または画像を表示する。 |---|---| |:---|:---| |Sprite|画像を表示する場合、SpriteProviderを指定する| |Material|マテリアルを指定する（nullの場合デフォルトのUI Unlitが使用される）| |Tint|色合い| |PreserveAspect|画像を表示する場合、アスペクト比を保持する| |InteractionTarget|TrueにするとButtonコンポーネントをつけたときButtonとして動作する。|
Imageと同じSlotにつけて使用する。 子のSlotの表示を同じSlotのImageでマスクする。
ゴミ箱のアイコンでマスクした例
アウトライン付きの円弧を描画する。 |---|---| |:---|:---| |Arc|Arcの角度| |Offset|Arc開始点の角度| |OuterRadiusRatio|Rectに対する外径の比率| |InnerRadiusRatio|Rectに対する内径の比率| |FillColor|塗りの色| |OutlineColor|アウトラインの色| |OutlineThickness|アウトラインの太さ| |Material|マテリアル（nullの場合初期設定のUI Unlitが使用される）|
画像を表示する
テキストを表示する。 |---|---| |:---|:---| |Font|フォント| |Content|表示する文字列| |ParseRichText|リッチテキストを使用する（などによる装飾）| |NullContent|ContentがNullのときに表示する文字列| |Size|文字サイズ| |HorizontalAlign|横揃えの位置| |VerticalAlign|縦揃えの位置| |AlignmentMode|| |Color|文字色| |LineHeight|行の高さ| |MaskPattern|| |HorizontalAutoSize|横幅に応じてサイズを自動調整する| |VerticalAutoSize|縦幅に応じてサイズを自動調整する| |AutoSizeMin|サイズ自動調整の下限| |AutoSizeMax|サイズ自動調整の上限| |CaretPosition|現在キャレット（入力カーソル）が置かれている位置| |SelectionStart|文字選択がされている場合、選択が開始された位置| |CaretColor|キャレットの色| |SelectionColor|文字選択の色|
画像をタイル状に並べる。 RenderTextureは使用できない。 |---|---| |:---|:---| |Texture|表示するTextureを指定する。| |Material|Materialを指定する。| |Tint|色合いを指定する。| |TileSize|タイルのサイズを指定する。| |TileOffset|並べる位置のオフセットを指定する。| |InteractionTarget|TrueにするとButtonコンポーネントをつけたときButtonとして動作する。|
Slotの要素をボタンにする。 ImageやOutlinedArcと同じSlotにつけて使用する。 ボタンを押した情報はLogiXのButtonEventノードでも取得できる。 |---|---| |:---|:---| |BaseColor|ボタンの基本色| |ColorDrive|色をドライブする対象| |TintColorMode|色を変更する方法| |NormalColor|通常時の色| |HighlightColor|レーザーを当てたときの色| |PressColor|押し下げ中の色| |DisabledColor|ButtonコンポーネントのEnabledがFalseになっているときの色| |IsPressed|押されているときTrueになる| |IsHovering|レーザーが当たっているときTrueになる| |HoverVibrate|レーザーが当たったときのバイブレーションの長さ| |PressVibrate|押されたときのバイブレーションの長さ| |ClearFocusOnPress|| |PassThroughHorizontalMovement|| |PassThroughVerticalMovement|| |RequireInitialPress|| |PressPoint|押されたときの座標| |Pressed|| |Released|| |HoverEnter|| |HoverLeave||
Buttonと同じSlotに付けるとCheckboxとして機能する。 |---|---| |:---|:---| |State|トリガーするたびにTrueとFalseが切り替わる（TargetStateがnullの場合のみ動作する）| |TargetState|DriveしたいBoolを指定する| |CheckVisual|CheckboxがTrueのときに表示するビジュアルのEnabledを指定する|
スクロールできるようにする。 親SlotにImageとMaskをつけ、このSlotにScrollRectとContentSizeFitterをつけて使う。
| --- | --- |
|---|---|
| NormalizedPosition | スクロール位置。0～1 |
| ViewportOverride | 任意のRectTransformでViewportを上書きする |
スライダーを作成する。 |---|---| |:---|:---| |BaseColor|基本色| |ColorDrive|色をドライブする対象| |TintColorMode|色を変更する方法| |NormalColor|通常時の色| |HighlightColor|レーザーを当てたときの色| |PressColor|押し下げ中の色| |DisabledColor|SliderコンポーネントのEnabledがFalseになっているときの色| |IsPressed|押されているときTrueになる| |IsHovering|レーザーが当たっているときTrueになる| |Value|Sliderの現在の値| |Min|Valueの最小値| |Max|Valueの最大値| |Integers|Valueを整数値にする| |VibrationThreshold|| |SlideDirection|Sliderが動く方向| |AnchorOffset|ハンドルの位置のオフセット| |HandleAnchorMinDrive|ハンドル位置でドライブするRectTransformのAnchorMinを指定する| |HandleAnchorMaxDrive|ハンドル位置でドライブするRectTransformのAnchorMaxを指定する|
値を選択できるラジオボタンを作成する。
複数設置し、TargetValueが同じものを参照している各ValueRadioが一組のラジオボタンとして扱われる。
| --- | --- |
|---|---|
| CheckVisual | 選択されているときに表示する画像（ValueRadioの子SlotにImageを入れ、そのEnabledをここに設定する） |
| OptionValue | 選択されたときにTargetValueの参照先に設定する値 |
| TargetValue | 値を設定する対象 |
OutlinedArc用のレイアウトコンポーネント。
ArcLayoutをつけたSlotの子SlotにOutlinedArcを付けて使用する。
|---|---|
|:---|:---|
|Arc|Arcの角度|
|Offset|Arc開始点の角度|
|Separation|OutlinedArc同士の間隔|
|CenterAtSeparation|Separationの中心をArc開始点にする|
|ProportionalSize||
|ItemDirection|アイテムの並び順（時計回り/反時計回り）|
OutlinedArcにImageとTextを配置するためのコンポーネント。 |---|---| |:---|:---| |Nested|子のSlotにあるImageのRectTransformを指定する| |NestedSizeRatio|Nestedで指定したRectのサイズを割合で指定する。| |Label|子のSlotにあるラベルにしたいTextを指定する。| |LabelSize|ラベルのサイズを指定する| |LabelDistance|OutlinedArcに対してラベルを配置する距離を指定する|
アスペクト比を指定できる
これを付けたSlotのRectTransformのRectを子のSlotのサイズにフィットするように変化させる。
子の要素を格子状に並べる。
| PaddingTop/Right/Bottom/Left | 上下左右の余白 |
| CellSize | 各要素のサイズ |
| Spacing | 要素同士の余白 |
| HorizontalAlign | 横の位置揃え |
| VerticalAlign | 縦の位置揃え |
子の要素を横に並べる。 |---|---| |:---|:---| |PaddingTop/Right/Bottom/Left|上下左右の余白| |Spacing|要素同士の余白| |HorizontalAlign|横の位置揃え| |VerticalAlign|縦の位置揃え| |ForceExpandWidth|子の要素の横幅を強制的に親に合わせる| |ForceExpandHeight|子の要素の縦幅を強制的に親に合わせる|
親にあるLayout系のコンポーネントを無視して表示する。
HorizontalLayoutやVerticalLayoutのForceExpandWidth/HeightをFalseにした場合、子のSlotにLayoutElementを付けて要素のサイズを指定する。 |---|---| |:---|:---| |MinWidth|横幅の最小値（PreferredとFlexibleが-1の場合、横幅がこの値に固定される）| |PreferredWidth|横幅の最大値| |FlexibleWidth|-1でない場合、同じ階層に含まれるLayoutElementのFlexibleの値との割合でサイズを決める。そのサイズにMinとPreferredで決まったサイズを足したサイズになる。| |MinHeight|縦幅の最小値（PreferredとFlexibleが-1の場合、横幅がこの値に固定される）| |PreferredHeight|縦幅の最大値| |FlexibleHeight|-1でない場合、同じ階層に含まれるLayoutElementのFlexibleの値との割合でサイズを決める。そのサイズにMinとPreferredで決まったサイズを足したサイズになる。|
子の要素を縦に並べる。 |---|---| |:---|:---| |PaddingTop/Right/Bottom/Left|上下左右の余白| |Spacing|要素同士の余白| |HorizontalAlign|横の位置揃え| |VerticalAlign|縦の位置揃え| |ForceExpandWidth|子の要素の横幅を強制的に親に合わせる| |ForceExpandHeight|子の要素の縦幅を強制的に親に合わせる|
UIX要素の位置をSlotのTransformに反映させる。
LogiXからUIX要素の座標を取得したいときに便利。
Viewports(list)で指定したRectTransformをViewportIndexの値に応じてページをめくるような動きで切り替える。 |---|---| |:---|:---| |ViewportIndex|表示したいビューポートの番号| |AnimationTime|アニメーションの長さ| |Direction|アニメーションの方向|