UIX

高パフォーマンスなUIを作成できるフレームワーク。
要は「軽い」。

Neos VR内の多くのUI（インスペクター・インベントリ・コンテキストメニュー・その他）はUIXで構成されている。

UIXの作り方

DevToolTipを使用して新規作成→オブジェクト→NeosUI→Panelを作成する。
これをインスペクターで開くとContentというSlotにCanvasというコンポーネントが入っている。

Contentの子にSlotを追加し、そこにUIX関連のコンポーネントを入れることでUIを作っていく。

UIXの各要素の説明

Canvas

UIXの土台となるコンポーネント。
ここでUI全体のサイズやタッチ方式の設定ができる。

RectTransform

Rectのサイズを指定するコンポーネント。

AnchorMax	Rectの右上の点の位置を割合で指定する。
AnchorMin	Rectの左下の点の位置を割合で指定する。
OffsetMax	Rectの右上の点の位置をピクセルで指定する。
OffsetMin	Rectの左下の点の位置をピクセルで指定する。
Pivot

Graphics

各要素なので折り畳み

DualColorImage

Image

単色、または画像を表示する。

Sprite	画像を表示する場合、SpriteProviderを指定する
Material	マテリアルを指定する（nullの場合デフォルトのUI Unlitが使用される）
Tint	色合い
PreserveAspect	画像を表示する場合、アスペクト比を保持する
InteractionTarget	TrueにするとButtonコンポーネントをつけたときButtonとして動作する。

Mask

Imageと同じSlotにつけて使用する。
子のSlotの表示を同じSlotのImageでマスクする。

ゴミ箱のアイコンでマスクした例

OutlinedArc

アウトライン付きの円弧を描画する。

Arc	Arcの角度
Offset	Arc開始点の角度
OuterRadiusRatio	Rectに対する外径の比率
InnerRadiusRatio	Rectに対する内径の比率
FillColor	塗りの色
OutlineColor	アウトラインの色
OutlineThickness	アウトラインの太さ
Material	マテリアル（nullの場合初期設定のUI Unlitが使用される）

RawImage

画像を表示する。

Text

テキストを表示する。

Font	フォント
Content	表示する文字列
ParseRichText	リッチテキストを使用する（<b><color>などによる装飾）
NullContent	ContentがNullのときに表示する文字列
Size	文字サイズ
HorizontalAlign	横揃えの位置
VerticalAlign	縦揃えの位置
AlignmentMode
Color	文字色
LineHeight	行の高さ
MaskPattern
HorizontalAutoSize	横幅に応じてサイズを自動調整する
VerticalAutoSize	縦幅に応じてサイズを自動調整する
AutoSizeMin	サイズ自動調整の下限
AutoSizeMax	サイズ自動調整の上限
CaretPosition	現在キャレット（入力カーソル）が置かれている位置
SelectionStart	文字選択がされている場合、選択が開始された位置
CaretColor	キャレットの色
SelectionColor	文字選択の色

TiledRawImage

画像をタイル状に並べる。
RenderTextureは使用できない。

Texture	表示するTextureを指定する。
Material	Materialを指定する。
Tint	色合いを指定する。
TileSize	タイルのサイズを指定する。
TileOffset	並べる位置のオフセットを指定する。
InteractionTarget	TrueにするとButtonコンポーネントをつけたときButtonとして動作する。

Interaction

各要素を折りたたみ

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

Checkbox

Buttonと同じSlotに付けるとCheckboxとして機能する。

State	トリガーするたびにTrueとFalseが切り替わる（TargetStateがnullの場合のみ動作する）
TargetState	DriveしたいBoolを指定する
CheckVisual	CheckboxがTrueのときに表示するビジュアルのEnabledを指定する

Expander

ReferenceRadio<T>

参照を選択できるラジオボタンを作成する。

ScrollRect

スクロールできるようにする。
親SlotにImageとMaskをつけ、このSlotにScrollRectとContentSizeFitterをつけて使う。

NormalizedPosition	スクロール位置。0～1
ViewportOverride	任意のRectTransformでViewportを上書きする

Slider

スライダーを作成する。

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を指定する

ValueRadio<T>

値を選択できるラジオボタンを作成する。
複数設置し、TargetValueが同じものを参照している各ValueRadioが一組のラジオボタンとして扱われる。

CheckVisual	選択されているときに表示する画像（ValueRadioの子SlotにImageを入れ、そのEnabledをここに設定する）
OptionValue	選択されたときにTargetValueの参照先に設定する値
TargetValue	値を設定する対象

Layout

各要素を折りたたみ

ArcLayout

OutlinedArc用のレイアウトコンポーネント。
ArcLayoutをつけたSlotの子SlotにOutlinedArcを付けて使用する。

Arc	Arcの角度
Offset	Arc開始点の角度
Separation	OutlinedArc同士の間隔
CenterAtSeparation	Separationの中心をArc開始点にする
ProportionalSize
ItemDirection	アイテムの並び順（時計回り/反時計回り）

ArcSegmentLayout

OutlinedArcにImageとTextを配置するためのコンポーネント。

Nested	子のSlotにあるImageのRectTransformを指定する
NestedSizeRatio	Nestedで指定したRectのサイズを割合で指定する。
Label	子のSlotにあるラベルにしたいTextを指定する。
LabelSize	ラベルのサイズを指定する
LabelDistance	OutlinedArcに対してラベルを配置する距離を指定する

AspectRatioFitter

アスペクト比を指定できる。

ContentSizeFitter

これを付けたSlotのRectTransformのRectを子のSlotのサイズにフィットするように変化させる。

GridLayout

子の要素を格子状に並べる。

PaddingTop/Right/Bottom/Left	上下左右の余白
CellSize	各要素のサイズ
Spacing	要素同士の余白
HorizontalAlign	横の位置揃え
VerticalAlign	縦の位置揃え

HorizontalLayout

子の要素を横に並べる。

PaddingTop/Right/Bottom/Left	上下左右の余白
Spacing	要素同士の余白
HorizontalAlign	横の位置揃え
VerticalAlign	縦の位置揃え
ForceExpandWidth	子の要素の横幅を強制的に親に合わせる
ForceExpandHeight	子の要素の縦幅を強制的に親に合わせる

IgnoreLayout

親にあるLayout系のコンポーネントを無視して表示する。

LayoutElement

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で決まったサイズを足したサイズになる。

VerticalLayout

子の要素を縦に並べる。

PaddingTop/Right/Bottom/Left	上下左右の余白
Spacing	要素同士の余白
HorizontalAlign	横の位置揃え
VerticalAlign	縦の位置揃え
ForceExpandWidth	子の要素の横幅を強制的に親に合わせる
ForceExpandHeight	子の要素の縦幅を強制的に親に合わせる

Utility

各要素を折りたたみ

このページを編集するこのページを元に新規ページを作成

印刷する

カテゴリ：
ゲーム
VR

UIX - NeosVR日本語Wiki 先頭へ

ViewportIndex	表示したいビューポートの番号
AnimationTime	アニメーションの長さ
Direction	アニメーションの方向

NeosVR日本語Wiki

UIX

UIX

UIXの作り方

UIXの各要素の説明

Canvas

RectTransform

Graphics

DualColorImage

Image

Mask

OutlinedArc

RawImage

Text

TiledRawImage

Interaction

Button

Checkbox

Expander

ReferenceRadio<T>

ScrollRect

Slider

ValueRadio<T>

Layout

ArcLayout

ArcSegmentLayout

AspectRatioFitter

ContentSizeFitter

GridLayout

HorizontalLayout

IgnoreLayout

LayoutElement

VerticalLayout

Utility

RectSlotDriver

AxisMultiViewportPanner

Menu

公式Wikiリンク集

ガイド

Tips

アバター関連

応用

ソーシャル関連

ワールド関連

経済・通貨

ToolTip関連

インスペクター

Logix関連

最近更新したページ

2023-11-05

2023-10-02

2023-09-07

2023-06-13

2023-05-07

2023-05-04

2023-04-15

2023-03-14

2023-02-08

2023-01-06

2022-11-04

2022-09-30

2022-09-23

2022-08-30

2022-08-20

2022-08-19

QRコード

Menu

定期イベント

AD

アクセス解析中