NeosVRの日本語Wiki


UIX

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

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

UIXの作り方


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

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

Canvas


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

RectTransform


Rectのサイズを指定するコンポーネント。
AnchorMaxRectの右上の点の位置を割合で指定する。
AnchorMinRectの左下の点の位置を割合で指定する。
OffsetMaxRectの右上の点の位置をピクセルで指定する。
OffsetMinRectの左下の点の位置をピクセルで指定する。
Pivot

Graphics

DualColorImage
Image

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

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

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

アウトライン付きの円弧を描画する。
ArcArcの角度
OffsetArc開始点の角度
OuterRadiusRatioRectに対する外径の比率
InnerRadiusRatioRectに対する内径の比率
FillColor塗りの色
OutlineColorアウトラインの色
OutlineThicknessアウトラインの太さ
Materialマテリアル(nullの場合初期設定のUI Unlitが使用される)
RawImage

画像を表示する。
Text

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

画像をタイル状に並べる。
RenderTextureは使用できない。
Texture表示するTextureを指定する。
MaterialMaterialを指定する。
Tint色合いを指定する。
TileSizeタイルのサイズを指定する。
TileOffset並べる位置のオフセットを指定する。
InteractionTargetTrueにするとButtonコンポーネントをつけたときButtonとして動作する。

Interaction

Button

Slotの要素をボタンにする。
ImageやOutlinedArcと同じSlotにつけて使用する。
ボタンを押した情報はLogiXのButtonEventノードでも取得できる。
BaseColorボタンの基本色
ColorDrive色をドライブする対象
TintColorMode色を変更する方法
NormalColor通常時の色
HighlightColorレーザーを当てたときの色
PressColor押し下げ中の色
DisabledColorButtonコンポーネントの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の場合のみ動作する)
TargetStateDriveしたいBoolを指定する
CheckVisualCheckboxが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押し下げ中の色
DisabledColorSliderコンポーネントのEnabledがFalseになっているときの色
IsPressed押されているときTrueになる
IsHoveringレーザーが当たっているときTrueになる
ValueSliderの現在の値
MinValueの最小値
MaxValueの最大値
IntegersValueを整数値にする
VibrationThreshold
SlideDirectionSliderが動く方向
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を付けて使用する。
ArcArcの角度
OffsetArc開始点の角度
SeparationOutlinedArc同士の間隔
CenterAtSeparationSeparationの中心をArc開始点にする
ProportionalSize
ItemDirectionアイテムの並び順(時計回り/反時計回り)
ArcSegmentLayout

OutlinedArcにImageとTextを配置するためのコンポーネント。
Nested子のSlotにあるImageのRectTransformを指定する
NestedSizeRatioNestedで指定したRectのサイズを割合で指定する。
Label子のSlotにあるラベルにしたいTextを指定する。
LabelSizeラベルのサイズを指定する
LabelDistanceOutlinedArcに対してラベルを配置する距離を指定する
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

RectSlotDriver
UIX要素の位置をSlotのTransformに反映させる。
LogiXからUIX要素の座標を取得したいときに便利。
AxisMultiViewportPanner

Viewports(list)で指定したRectTransformをViewportIndexの値に応じてページをめくるような動きで切り替える。
ViewportIndex表示したいビューポートの番号
AnimationTimeアニメーションの長さ
Directionアニメーションの方向

Menu

アバター関連

VRM

Menu

当Wiki Twitter

定期イベント

交流や導入の目的として、イベントが定期的に開催されている。
詳しくは定期・不定期イベント参考。ほかにはカレンダーやDiscordをチェックしたり、#NeosVR で検索しよう。


毎週火曜 22:00~

数か月に一度

【メニュー2編集】

メンバーのみ編集できます

メンバー募集!