次の項目は別ページに分割しました。
関連ページ：
ユーザーインターフェース
- Unity UI (uGUI)： ランタイム用
- IMGUI： デバッグ用
- UI Toolkit： エディタ拡張／ランタイム (旧 UI Elements)
公式サイト：
ユーザーインターフェースの作成 | Unity 2020.3 マニュアル [公式]
Rect Transform
ドキュメント：
Rect Transform | Unity マニュアル [公式]
UnityEngine.RectTransform | Unity スクリプトリファレンス [公式]
RectTransform.sizeDelta | Unity スクリプトリファレンス [公式]
Transform.SetParent | Unity スクリプトリファレンス [公式]
参考：
Rect Transform のプロパティを徹底解説 | TECH PROjin
スクリプトで Height / Width を設定する – Qiita
Rect Transform の幅と高さの取得／設定を楽にする拡張メソッド | コガネブログ
Rect Transform – 使い方とスクリプト | ゲームの作り方！
Rect Transform の Width / Height をスクリプトから変更する | はなちるのマイノート
Rect Transform から幅／高さをとるには？ | 三流豆腐。
Rect Transform のインスタンスとサイズの話 | はらけんログ
Rect Transform の Position を変更してから Size Delta を変更すると Position の変更が戻される | kan のメモ帳
Canvas を非 Active にした状態で開始すると Rect Transform の諸々が0になる件 | kan のメモ帳
Rect Transform をなるはやで取得したい – Qiita
What is RectTransform.sizeDelta? – Unity Forum
コンポーネント
ドキュメント：
Canvas コンポーネント | Unity マニュアル [公式]
キャンバスの大きさを調整する (Canvas)
Render Mode
- Screen Space – Overlay：キャンバスは画面の大きさに合わせて拡大縮小される／常にカメラビューの手前に描画される
- Screen Space – Camera：キャンバスはカメラ錘台に合わせて拡大縮小される／カメラから指定した距離の位置に描画される
- World Space：キャンバスはワールド空間内の平面上に描画される
UI Scale Mode
- Constant Pixel Size：UI 要素をピクセル単位で指定したサイズに固定する
- Scale With Screen Size：画面のサイズに合わせて UI 要素を拡大縮小する
- Constant Physical Size：UI 要素の物理的なサイズを固定する
- World：Canvas コンポーネントは指定したピクセル密度の大きさでワールド空間に配置される
ドキュメント：
Canvas Scaler | Unity マニュアル [公式]
参考：
マルチ解像度対応に必須な Canvas Scaler を目的別に理解する | LIGHT11
Canvas – チュートリアル見ながら触ってみる | naichilab
Building a Responsive UI | John Tucker
アンカー
参考：
How to set the new Unity UI Rect Transform Anchor Presets via c# script ? – Unity Answers
Positioning UI elements with Anchor Presets via code – Stack Overflow
Why can’t I select an anchor point for my text? – Unity Answers
自動レイアウト
ドキュメント：
参考：
uGUI の自動レイアウトが分かりにくいと評判なので解説してみる | テラシュールブログ
uGUI の自動レイアウトを根っこのほうから理解する | fuqunaga
Unity UI の Auto Layout を使いこなして楽々レイアウト | SOU·COLLE
Horizontal Layout Group
ドキュメント：
Horizontal Layout Group | Unity 2018.4 マニュアル [公式]
Vertical Layout Group
ドキュメント：
Vertical Layout Group | Unity 2018.4 マニュアル [公式]
Canvas Group
設定
- Alpha：不透明度
- Interactable：入力を受け付けるかどうか
- Block Raycasts：レイキャストに当たるかどうか
- Ignore Parent Groups：上位グループの影響を受けるかどうか
ドキュメント：
Canvas Group | Unity マニュアル [公式]
UnityEngine.CanvasGroup | Unity スクリプトリファレンス [公式]
Canvas Group | Unity UI 1.0 Manual [Official]
参考：
Canvas Group で uGUI をまとめて操作する方法 | TECH Projin
CanvasGroup コンポーネントは便利 | ねぎたまらぼ
UI の表示／非表示を切り替える
参考：
Make UI elements invisible – Unity Answers
How to disable (hide) UI elements without disabling them – Unity Forum
How to show and hide an ui canvas element in 2019? – Unity Answers
is there an option in unity to hide objects, UI elements, 3d model? – Stack Overflow
how to hide on play – Game Development Stack Exchange
ボタン (Button)
ドキュメント：
参考：
通常／ハイライト時／押し込み時／選択時／無効時の各状態色をスクリプトから動的変更する方法 | まるブログ
スライダー (Slider)
ドキュメント：
参考：
Slider の使い方とリアルタイムで値を取得する方法 | すくまりのメモ帳
様々なゲージ UI を実装する方法 | 十六夜ソリューション株式会社
Radial Slider / Circle Slider – Unity Forum
slider not correctly filling – Unity Answers
Change width of slider only by right – Stack Overflow
チェックボックス／トグルボタン (Toggle)
ドキュメント：
GUI.Toggle | Unity スクリプトリファレンス [公式]
参考：
Toggle を用いたスイッチ On / Off 切り替え方法 | XR-Hub
タブ切り替えを uGUI の Toggle で作る | トマシープが学ぶ
ドロップダウンリスト (Dropdwon)
動画：
Dropdown Menu Options UI (Royal Skies)
ドキュメント：
Class Dropdown | Unity UI 1.0 Manual [Official]
参考：
ドロップダウンを使用してオプションを選択する方法 | XR-Hub
Dropdown の使い方の基本を解説 | hirokuma.blog
Selectable
動画：
Selectable コンポーネントで UI の動きを強化 (あのゲームの作り方)
ドキュメント：
Selectable 基底クラス | Unity マニュアル [公式]
UI.Selectable | Unity 2019.2 スクリプトリファレンス [公式]
参考：
UI のアニメーションを Selectable コンポーネントで自動化 | あのゲームの作り方
Selectable の Navigation とは？ | むたこなブログ
Selectable クラスをカスタムして独自の UI を作る | むたこなブログ
Raycast Padding
参考：
Raycast Padding – ボタンなどのレイキャストの当たり判定／タッチ範囲だけを変えられる | kan のメモ帳
Raycast Padding – Image や Text で Raycast Target の範囲を調整できる | コガネブログ
ボタン画像よりも大きなタッチ反応領域をつくる | おれ、Unity2D でゲーム作るんだ。
Raycast Padding の領域をシーンビューで可視化してみた – Qiita
Raycast Padding needs a Gizmo – Unity Forum
マスクを適用する (Mask)
動画：
Mask in UI Like a Pro! / Soft Mask (Coco Code)
ドキュメント：
Class Mask | Unity UI 1.0 Manual [Official]
参考：
Sprite や Image で Mask を使う | kan のメモ帳
ボタンのトランジションを子要素に反映させる
参考：
ボタンの中に画像を追加したがクリックした時の色が気に入らない – Qiita
Button のトランジション効果を子要素にも反映させたい – teratail
multi image button transition – Unity Discussions
UI の手前にオブジェクトを描画したい
原因：
- キャンバスの「Render Mode」が
Screen Space - Overlayに設定されている。
対処法：
- キャンバスの「Render Mode」を
Screen Space - Cameraまたは、World Spaceにする。 Screen Space - Cameraを用いる場合は、「Render Camera」に描画対象のカメラを設定し、「Plane Distance」を調整する。World Spaceを用いる場合は、シーンビューでオブジェクトの位置関係を調整する。
参考：
uGUI よりも手前に 3D オブジェクトを配置した UI を作る | 藍と淡々
テキストがオブジェクトの後ろに隠れてしまう – teratail
Cross Fade Alpha
ドキュメント：
UI.Graphic.CrossFadeAlpha | Unity 2018.4 スクリプトリファレンス [公式]
UI.Graphic.CrossFadeAlpha | Unity UI 1.0 Manual [Official]
参考：
CrossFadeAlpha / CrossFadeColor – uGUI のオブジェクトの色や透明度をフェードさせる関数 | コガネブログ
uGUI のオブジェクトのフェードとかの話 | ハルシオンシステムの気まま Blog
UI.Graphic.CrossFadeAlpha only works for decrementing values ? – Unity Answers
CrossFadeAlpha not working – Stack Overflow
Cull Transparent Mesh
- 「Cull Transparent Mesh」を有効にすると、透明なオブジェクトは描画されなくなる。
- 文字を別に描画して、その周囲に透明な押せるボタンを作る時などに用いる。
参考：
Cull Transparent Mesh オンで望みのサイズのボタン範囲を作る | Unity Indies
負荷をかけない透明な uGUI ボタン | おれ、Unity2D でゲーム作るんだ。
Canvas Renderer の Cull Transparent Mesh をオンにすると透明なオブジェクトの描画をスキップできる | コガネブログ
描画負荷がかからない透明な uGUI Image を作る – Qiita
Canvas コンポーネント
参考：
UnityEngine.Canvas | Unity スクリプトリファレンス [公式]
uGUI
ドキュメント：
IMGUI
ドキュメント：
IMGUI – 即時モードの GUI | Unity マニュアル [公式]
UI Toolkit
旧 UI Elements
ドキュメント：
UI Elements 開発者ガイド | Unity 2019.4 マニュアル [Official]
UI が動作しない
参考：
ボタンの当たり判定が反応しない時に確認すること | 夜中に Unity
ドキュメント
Unity UI (uGUI) | Unity Manual [Official]
リポジトリ
Unity-Technologies/uGUI: Source Code for the Unity UI System – GitHub
まとめ
Slider / Dropdown / Scrollview の使い方 | ＠IT
チュートリアル
Master Your UI Buttons! (Coco Code)
How to Create Buttons (SpeedTutor)
Master Button OnClick Actions! (Coco Code)
Automatic UI Anchoring
入手：
Automatic UI Anchoring | Unity Asset Store [Official]
リポジトリ：
UI Extensions
動画：
公式サイト：
リポジトリ：
Unity-UI-Extensions/com.unity.uiextensions – GitHub
UI 3D System
レンダリングされた 3D オブジェクトやパーティクルをマスクして Canvas 上の UI に収めることができるアセット
入手：
UI 3D System | Unity Asset Store [Official]
参考：