Unity用UGUI
UnityにはUIツールキット、UGUI、IMGUIなど、UIを開発するためのさまざまな機能があります。ここでは主にUGUIについて紹介します。
1.キャンバス
キャンバスは、すべての UI 要素を保持する領域です。Canvas は Canvas コンポーネントを持つ GameObject であり、すべての UI 要素はこのタイプの Canvas の子である必要があります。
1.キャンバスを作成する
Unity 編集ビューの階層で UI を右クリック -> キャンバスの作成:
2.ファッションのレンダリング
次の 3 つのレンダリング モードがあります。
（1）スクリーンスペース - オーバーレイ
このレンダリング モードでは、シーンの上にレンダリングされた画面に UI が配置されます。画面のサイズが変更されるか、解像度が変更されると、キャンバスはこれに対応するように自動的にサイズ変更されます。
In this mode, the Sort Order value will appear. シーンに複数のキャンバスがある場合、この値を設定して各キャンバスのオクルージョン順序を制御できます。
ターゲット ディスプレイ: オーバーレイ モードで使用され、UI キャンバスのディスプレイ インデックスが表示されます。この設定は、指定されたディスプレイにレンダリングするようにキャンバスに指示します。サポートされる補助ディスプレイ (モニターなど) の最大数は 8 です。
追加のシェーダー チャネル: キャンバス グリッドを作成するときに使用する他のシェーダー チャネルのマスクを取得または設定します. キャンバスに常に位置、色、および色付けの UV0 チャネルが含まれている場合、キャンバスには重畳グリッドとして法線と接線も含まれます. .カメラとワールド空間のキャンバス。これらは、コピーするオプションの追加パラメーターです。
using UnityEngine;
public class SetCanvasShaderChannels : MonoBehaviour
{
public Canvas canvas;
void Start()
{
canvas.additionalShaderChannels |= AdditionalCanvasShaderChannels.Normal;
canvas.additionalShaderChannels |= AdditionalCanvasShaderChannels.TexCoord1;
canvas.additionalShaderChannels |= AdditionalCanvasShaderChannels.Tangent;
}
}
（2）スクリーンスペース - カメラ
このレンダリング モードはScreen Space - Overlayに似ていますが、このモードではキャンバスは指定されたカメラの前の特定の距離に配置されます。UI 要素はこのカメラによってレンダリングされます。つまり、カメラの設定が UI の外観に影響します。カメラが正投影ビューに設定されている場合、UI 要素は遠近法でレンダリングされ、遠近法の歪みの量はカメラの視野によって制御できます。画面のサイズが変更された場合、解像度が変更された場合、またはカメラの視錐台が変更された場合、キャンバスはそれに合わせて自動的にサイズ変更されます。
RenderCamera: このキャンバスを表示するカメラをレンダリングします。
平面距離: レンダリング カメラまでの距離。
Sorting Layer: シーン内に複数の Canvas がある場合、各 Canvas のオクルージョン関係を制御します. Default の場合、Hierarchy 内の Canvas の順番によって決定されます.
（3）ワールド空間
このレンダリング モードでは、キャンバスはシーン内の他のすべてのオブジェクトと同じように動作します。キャンバスのサイズは、長方形の変換を使用して手動で設定できます。UI 要素は、3D 位置に基づいて、シーン内の他のオブジェクトの前または後ろにレンダリングされます。
3.ピクセルパーフェクト
RenderMode が Screen タイプの場合にのみ使用できます。要素のサイズと座標を再設定して、マップのピクセルが画面のピクセルに完全に対応するようにし、UI 要素のピクセルが対応するようにします。その結果、エッジが明確になり、ぼやけなくなります。ただし、多くの要素がスケーリングまたは回転されている場合、または微妙にアニメーション化された位置またはスケーリングが使用されている場合は、pixelPerfect を無効にしたほうがよい場合があります。これにより、動きがよりスムーズになります。
2.基本レイアウト
1.長方形ツール
レイアウト上の目的で、各 UI 要素は長方形として表されます。この長方形は、ツールバーの長方形ツールを使用してシーン ビューで操作できます。Rectangle Tool は、Unity の 2D 機能と UI の両方で使用でき、実際には 3D オブジェクトでも使用できます。
2. Rect Transform
長方形の変換には、通常の変換と同様に位置、回転、およびスケールがありますが、長方形の寸法を指定する幅と高さもあります。
3. サイズとスケーリング
Rectangle ツールを使用してオブジェクトのサイズを変更すると、通常は 2D システムのスプライトおよび 3D オブジェクトの場合、オブジェクトのローカル比率が変更されます。ただし、Rect Transform を持つオブジェクトで使用すると、幅と高さが変更され、ローカルの比率は変更されません。このサイズ変更は、フォント サイズ、スライスされた画像の境界線などには影響しません。
4.ピボット
回転、サイズ、およびスケーリングの変更はピボットの周りで発生するため、ピボットの位置は回転、サイズ変更、またはスケーリングの結果に影響します。ツールバーのピボット ボタンがピボット モードに設定されている場合、シーン ビューで矩形変換のピボットを移動できます。
5.アンカー
Rect Transforms には、アンカーと呼ばれるレイアウトの概念が含まれています。アンカー ポイントはシーン ビューに 4 つの小さな三角形のハンドルとして表示され、アンカー ポイントの情報はインスペクターにも表示されます。
Rect Transform の親も Rect Transform である場合、子 Rect Transform はさまざまな方法で親 Rect Transform に固定できます。たとえば、子を親の中心またはコーナーの 1 つに固定できます。
アンカリングにより、子は親の幅または高さで伸ばすこともできます。長方形の各コーナーには、対応するアンカー ポイントからの固定オフセットがあります。つまり、長方形の左上隅には、左上のアンカー ポイントからの固定オフセットがあります。このようにして、長方形のさまざまな角をさまざまな点に固定できます。親長方形。
アンカーの位置は、親の四角形の幅と高さの分数 (またはパーセンテージ) として定義されます。0.0 (0%) は左または下、0.5 (50%) は中央、1.0 (100%) は右または上に対応します。ただし、アンカー ポイントは辺と中央に限定されず、親の四角形内の任意のポイントに固定できます。
各アンカー ポイントを個別にドラッグすることも、2 つのアンカー ポイントが一緒にある場合は、それらの中間をクリックしてドラッグすることでまとめてドラッグすることもできます。Shift キーを押しながらアンカー ポイントをドラッグすると、対応する四角形の角がアンカー ポイントとともに移動します。
アンカー ポイント ハンドルの便利な機能は、兄弟の四角形のアンカー ポイントに自動的にスナップして、正確に配置できることです。
アンカー プリセット:
[アンカー番号] フィールドが表示されていない場合は、[アンカー エキスパンダー] 矢印をクリックして [アンカー番号] フィールドを表示できます。Anchor Min はシーン ビューの左下隅のアンカー ハンドルに対応し、Anchor Max は右上隅のハンドルに対応します。
四角形の位置フィールドは、アンカーが一緒にある (結果として幅と高さが固定される) か、離れている (四角形が親と一緒に伸びる) かによって、表示が異なります。
すべてのアンカー ハンドルが一緒にある場合、表示されるフィールドは、Pos X、Pos Y、Width、および Height です。Pos X と Pos Y の値は、アンカー ポイントに対するピボットの位置を表します。
アンカーが分離されている場合、フィールドは部分的または完全に左、右、上、および下に変更できます。これらのフィールドは、アンカーによって定義された長方形内のパディングを定義します。アンカーポイントが水平に分かれている場合は、左と右のフィールドを使用し、垂直に分かれている場合は、上と下のフィールドを使用します。
3. ビジュアル コンポーネント
1.テキスト
2.画像
画像の種類:
シンプル - スプライト全体を均一にスケーリングします。
スライス - 3x3 のスプライト分割を使用して、サイズ変更によってコーナーが歪まないようにしますが、中央のみを引き伸ばします。
Tiled - Sliced に似ていますが、中央のセクションを伸ばすのではなくタイル (繰り返し) にします。境界線がまったくないスプライトの場合、スプライト全体がタイル化されます。
Filled - Simple と同じ方法でスプライトを表示しますが、スプライトは定義された方向、方法、および量を使用して原点から塗りつぶされます。
3.生画像
Raw 画像コントロールは、非インタラクティブな画像をユーザーに表示します。この画像は、装飾やアイコンなどに使用できます。画像をスクリプトから変更して、他のコントロールへの変更を反映させることができます。このコントロールはイメージ コントロールに似ていますが、イメージをアニメーション化し、コントロールの四角形を正確に塗りつぶすためのより多くのオプションを提供します。ただし、イメージ コントロールではテクスチャがスプライトである必要がありますが、元のイメージでは任意のテクスチャを受け入れることができます。
4.マスク
マスクは目に見える UI コントロールではなく、コントロールの子要素の外観を変更する手段です。マスクは、子要素を親要素の形状に制約します (つまり、「マスク」します)。したがって、子が親よりも大きい場合、親の中に含まれる子の部分のみが表示されます。
5.RectMask2D
RectMask2D は、Mask コントロールに似たマスク コントロールです。マスクは、子要素を親要素の四角形に制限します。標準のマスク コントロールとは異なり、このコントロールにはいくつかの制限がありますが、多くのパフォーマンス上の利点もあります。
6.影
Shadow コンポーネントは、テキストや画像などのグラフィック コンポーネントに単純なアウトライン効果を追加します。グラフィック コンポーネントと同じゲーム オブジェクト上にある必要があります。
7.概要
アウトライン コンポーネントは、テキストや画像などのグラフィック コンポーネントに単純なアウトライン効果を追加します。グラフィック コンポーネントと同じゲーム オブジェクト上にある必要があります。
8.UV1としての位置
このコンポーネントは、単純な UV1 位置効果をテキストおよびイメージ グラフィックに追加します。
4.インタラクティブなコンポーネント
1.ボタン
ボタン コントロールはユーザーのタップに応答し、アクションの開始または確認に使用されます。
2.トグル
トグル コントロールは、ユーザーがオプションをオンまたはオフにできるようにするチェック ボックスです。
3.トグルグループ
スイッチ グループは目に見える UI コントロールではなく、スイッチ グループの動作を変更する方法です。同じグループに属するスイッチは、一度に 1 つしかオンにできないように制限されます。1 つのスイッチを押してオンにすると、他のスイッチは自動的にオフになります。
4.スライダー
スライダー コントロールを使用すると、ユーザーはマウスをドラッグして所定の範囲から値を選択できます。同様の ScrollBar コントロールが、値の選択ではなくスクロールに使用されることに注意してください。身近な例としては、ゲームの難易度設定や画像エディタの明るさ設定などがあります。
5.ドロップダウン
このコントロールには、現在選択されているオプションが表示されます。このコントロールをクリックすると、オプションのリストが開き、新しいオプションを選択できます。新しいオプションを選択すると、リストが再び閉じられ、コントロールに新しく選択されたオプションが表示されます。ユーザーがコントロール自体またはキャンバス内の他の場所をクリックすると、リストも閉じます。
6.入力フィールド
入力フィールドは、Text (テキスト) コントロールのテキストを編集可能にする方法です。他の対話型コントロールと同様に、入力フィールドはそれ自体では表示される UI 要素ではなく、表示するには 1 つ以上の表示される UI 要素と組み合わせる必要があります。
7.スクロールビュー
スクロール長方形は、多くのスペースを占めるコンテンツを小さな領域に表示する必要がある場合に使用されます。スクロール四角形は、このコンテンツをスクロールする機能を提供します。
通常、スクロール四角形はマスクと組み合わせて、スクロール四角形内のスクロール可能なコンテンツのみが表示されるスクロール ビューを作成します。さらに、スクロール長方形は、水平または垂直スクロールのためにドラッグできる 1 つまたは 2 つのスクロールバー (Scrollbars) と組み合わせることができます。
5、自動レイアウト
1.レイアウト要素
2.コンテンツサイズフィッター
コンテンツ サイズ アダプターは、独自のレイアウト要素のサイズを制御するために使用できるレイアウト コントローラーとして機能します。サイズは、ゲーム オブジェクトのレイアウト要素コンポーネントによって提供される最小サイズまたは優先サイズによって決まります。このようなレイアウト要素には、イメージまたはテキスト コンポーネント、レイアウト グループ、またはレイアウト要素コンポーネントがあります。
3.アスペクト比フィッター
アスペクト比アダプターは、独自のレイアウト要素のサイズを制御するために使用できるレイアウト コントローラーとして機能します。アスペクト比アダプターは、幅に合わせて高さを調整したり、幅に合わせて高さを調整したり、要素を親の内側に合わせたり、親をラップしたりすることもできます。アスペクト比アダプターは、最小サイズや優先サイズなどのレイアウト情報を考慮しません。
4. 水平レイアウト
5.縦型レイアウト
6.グリッドレイアウト
