This page is a translated version of the page UIX and the translation is 100% complete.

This article or section is a Stub. You can help the Neos Wiki by expanding it.

Other languages:

English • ‎日本語 • ‎한국어

UIXはNeosのUIシステムです。これにより、2次元のユーザーインターフェイスを作成でき、概念的にはUnity UIシステムに似ています。ダッシュメニューとシーンインスペクターを支えています。

便利なUIXサンプルのUIXCanvasは、DevToolTipでオブジェクトから生成できます。レイアウト、画像、ボタン、およびスライダーの例を表示します。

コンセプト

キャンバス(Canvas)

UIには、ルートにCanvasが必要です。Canvasは、UIのサイズを定義します。

RectTransforms

UIに関係するすべてのスロットには、RectTransformが必要です。RectTransformsは、他のUIコンポーネントを追加すると自動的に追加されます。RectTransformは、使用可能な合計スペースの一部として表されるUI要素の境界を決定します。デフォルトのRectTransformには、アンカーに0,0と1,1が設定されています。

レイアウト

RectTransformsを調整することで要素を手動で配置できますが、多くの場合、これを自動的に処理する必要があります。レイアウトは、スロットの子のRectTransformsをオーバーライドします。たとえば、HorizontalLayoutは、子を水平に配置しようとします。

'警告': レイアウトは、子自身に基づいて子の位置とサイズを計算します。子を変更、追加、または削除しても期待どおりの結果が得られない場合は、強制的に再計算する必要があります。現在これを行う唯一の方法は、オブジェクト全体（またはレイアウトだけ？）を複製し、元のオブジェクトを削除することです。

レイアウトは子の順序に依存し、インスペクタで子をドラッグすることはできないため、子のOrderOffsetプロパティを指定する必要があります。通常、これらは0ですが、これを変更すると、OrderOffsetを増やすことによって子が順序付けられ、OrderOffsetが等しい子は、事実上ランダムなプロセスによって順序付けられます。

この場合も、子のOrderOffsetを変更すると、レイアウトを再計算する必要があり、上記の警告が発生する可能性があります。

グラフィック

実際に物を表示するには、UIに1つ以上のグラフィックコンポーネントが必要です。Image は要素を塗りつぶし、オプションでマテリアル（外観を定義するため）とスプライト（形状を定義するため）を取ります。その他の要素には、テキストを表示する Textと子UI要素の一部を非表示にするMaskがあります。

インタラクション

インタラクションコンポーネントは入力を可能にします。 Buttonは、ホバリングとプレスに視覚的に応答し、スロット（および子スロット）で他のコンポーネントをトリガーします。Sliderも同様に機能しますが、子要素のRectTransformを制御して移動することもできます。

レシピ

Empty canvas

Developer Tooltipを使用して、新規作成 > EmptyObjectを選択します。
そのオブジェクトで、Attach Component > UIX > Canvasを選択します。
オブジェクトをより適切なサイズにするために、すべての軸でオブジェクトのスケールを0.001に変更します。
次に、キャンバスのサイズxおよびy（ピクセル単位）を好みに合わせて変更できます。
次に、同じEmptyObjectで、Attach Component > UIX > Graphics > Imageを選択します。画像の色合いを変更して、キャンバスの基本色を変更できます。
再びDeveloper Tooltipを使用して、新規作成 > マテリアル > UI > UI Unlit を選択します。
マテリアルのZWriteプロパティをOnに変更し、OffsetFactorプロパティとOffsetUnitsプロパティを1に変更します。
マテリアルスフィアをつかみ、EmptyObjectのImage Materialスロットをクリックしてロードします。これにより、異なるUIXオブジェクトを重ねて配置すると、異なるUIXオブジェクトが互いに表面滲みする"表面滲み"効果が修正されます。
キャンバスをグラブ可能にすることもできます（Attach Component > Transform > Interaction > Grabbable）。

キャンバスに表示する子を追加できるようになりました。

ProbablePrimeのパブリックフォルダー Tutorials > UIX には、上記のすべての手順を既に実行したCanvasTemplateが含まれています。単に1つをスポーンして、そこから始めます。

ボタン

子をキャンバス（またはレイアウトなど）に追加し、それをButtonと呼びます。
そのオブジェクトで、Attach Component > UIX > Graphics > Image。画像の色合いを変更して、ボタンの基本色を変更できます。
RectTransformのAnchorMin / Maxを変更して、ボタンの周囲に境界線を追加します。これにより、子がどこにいて、どのようにスケーリングするかが親に効果的に伝えられます。
- AnchorMin（x、y）は、子が収まる親キャンバス上の長方形の左下隅で、0から1の範囲です。（0,0）は親の左下です。
- AnchorMax（x、y）は、子が収まる親キャンバス上の長方形の右上隅で、0から1の範囲です。（1,1）は親の右上です。
- たとえば、親のサイズの5％の小さな境界線を追加すると、AnchorMinは（0.05,0.05）（つまり、0,0 + 5％）になり、AnchorMaxは（0.95,0.95）（つまり、1,1）になります。マイナス5％）。
Attach Component > UIX > Interaction > Button。画像の色合いに基づいて、ボタンは通常、ハイライト、プレス、および無効の状態の色を自動的に塗りつぶします。
ボタンにテキストを追加できます：
1. ボタンの子オブジェクトを作成し、それをTextと呼びます。
2. その子で、Attach Component > UIX > Graphics > Text
3. テキストを必要なものに変更します。
4. フォントサイズを変更し、自動サイズを設定し、配置を希望どおりに変更します。
Button Eventsノードを作成し、ボタンインターフェイスカードをドラッグしてボタンイベントノードに接続することで、ボタンをLogiXに接続できます。

ボタンにアイコンを付けることもできます。

Buttonオブジェクトで、Attach Component > Assets > SpriteProvider　をアタッチします。
選択した画像をSpriteProviderのTextureプロパティにドロップします。
SpriteProviderを取得し、ボタンの画像のSpriteプロパティにドロップします。
画像のTintプロパティを使用して、アイコンに色を付けます。
ボタンを画像付きの別のオブジェクトにペアレント化して、背景を設定できます。

ProbablePrimeのパブリックフォルダーの UI Stuff > Icons > Shapes には、使用できるアイコンが多数あります。

スクロール可能なテキスト

子をキャンバス（またはレイアウトなど）に追加し、それをマスクと呼びます。
そのオブジェクトで、Attach Component > UIX > Mask。これにより、RectTransformの外側をさまよう子のグラフィカル要素が事実上非表示になります。
同じオブジェクトで、Attach Component > UIX > Graphics > Image。
マスクのShowMaskGraphicプロパティをオンにします。
Maskオブジェクトに子を追加し、それをScrollRectと呼びます。
そのオブジェクトで、Attach Component > UIX > Interaction > ScrollRect。
同じオブジェクトで、Attach Component > UIX > Layout > ContentSizeFitter。
ContentSizeFitterのVerticalFitプロパティをMinSizeに設定します。
同じオブジェクトで、Attach Component > UIX > Layout > VerticalLayout。
ScrollRectオブジェクトに子を追加し、それをContentと呼びます。
そのオブジェクトで、Attach Component > UIX > Graphics > Text。
テキストを必要なものに変更します。通常、ファイルから取得する長いテキストの場合、コンピューターからテキストファイルをインポートし、結果を調べて、テキストコンポーネント（object > ScrollRect > Content）に移動し、テキストコンポーネントのContentプロパティをグラブしてオブジェクトのコンテンツにドラッグします。テキストコンテンツ。
フォントサイズを変更し、autosizeを設定し、配置を希望どおりに変更します。
フォントの色をマスク画像の色に対して表示される色に変更してください！

シンプルな縦型レイアウト

子をキャンバス（またはレイアウトなど）に追加し、それをレイアウトと呼びます。
そのオブジェクトで、Attach Component > UIX > Graphics > Image。このオブジェクトを子オブジェクトと区別するような色合いに設定します。
また、そのオブジェクトで、Attach Component > UIX > Layout > VerticalLayout。
VerticalLayoutのすべてのPaddingプロパティとSpacingプロパティを4に変更します。
Layoutの子を追加し、それをElementと呼びます。
そのオブジェクトで、Attach Component > UIX > Graphics > Image。このオブジェクトをレイアウトオブジェクトと区別するような色合いに設定します。
このオブジェクトを数回複製します。それらはすべてLayoutの子になります。
上記の警告に注意し、レイアウトを再計算するためにキャンバスを複製する必要がある場合があります。
各要素にLayoutElementを追加できます。これは、幅と高さの計算方法を親レイアウトに指示します。

チュートリアル

ProbablePrimeのUIXの解説動:

UIX

Contents