ユーザーインターフェース

  • Unity UI (uGUI) ランタイム用
  • IMGUI デバッグ用
  • UI Toolkit エディタ拡張/ランタイム (旧 UI Elements)

公式サイト:

ユーザーインターフェースの作成 | Unity 2020.3 マニュアル [公式]

Rect Transform

ドキュメント:

基本的なレイアウト | Unity マニュアル [公式]

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 SizeUI 要素をピクセル単位で指定したサイズに固定する
  • Scale With Screen Size画面のサイズに合わせて UI 要素を拡大縮小する
  • Constant Physical SizeUI 要素の物理的なサイズを固定する
  • WorldCanvas コンポーネントは指定したピクセル密度の大きさでワールド空間に配置される

ドキュメント:

Canvas 概要 | Unity マニュアル [公式]

Canvas クラス | Unity マニュアル [公式]

Canvas Scaler | Unity マニュアル [公式]

参考:

マルチ解像度対応に必須な Canvas Scaler を目的別に理解する | LIGHT11

Canvas Scaler の使い方 | ひよこのたまご

uGUI チュートリアル | Metal Brage

画面解像度とスケーリング | Metal Brage

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

Rect transform values greyed out due to driven values – but need to get them from script – Unity Forum

自動レイアウト

ドキュメント:

自動レイアウト | Unity マニュアル [公式]

参考:

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

uGUI の Canvas Group – Qiita

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)

ドキュメント:

Button | Unity マニュアル [公式]

参考:

ボタンの基本的な使い方を徹底解説! | XR-Hub

スライダー (Slider)

ドキュメント:

Slider | Unity マニュアル [公式]

参考:

Slider の使い方とリアルタイムで値を取得する方法 | すくまりのメモ帳

様々なゲージ UI を実装する方法 | 十六夜ソリューション株式会社

Radial Slider / Circle Slider – Unity Forum

slider not correctly filling – Unity Answers

Change width of slider only by right – Stack Overflow

チェックボックス/トグルボタン (Toggle)

ドキュメント:

Toggle | Unity マニュアル [公式]

GUI.Toggle | Unity スクリプトリファレンス [公式]

参考:

Toggle を用いたスイッチ On / Off 切り替え方法 | XR-Hub

トグルボタン | WisdomSoft

Toggle の使い方 | TECH Projin

タブ切り替えを uGUI の Toggle で作る | トマシープが学ぶ

ドロップダウンリスト (Dropdwon)

動画:

Dropdown Scripting (Jayanam)

Dropdown Menu Options UI (Royal Skies)

ドキュメント:

Class Dropdown | Unity UI 1.0 Manual [Official]

参考:

ドロップダウンを使用してオプションを選択する方法 | XR-Hub

ドロップダウンメニューの使い方 | テラシュールブログ

Dropdown – Qiita

Dropdown の使い方の基本を解説 | hirokuma.blog

Dropdown の使い方 | ひよこのたまご

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)

ドキュメント:

Mask | Unity マニュアル [公式]

Class Mask | Unity UI 1.0 Manual [Official]

参考:

Sprite や Image で Mask を使う | kan のメモ帳

ボタンのトランジションを子要素に反映させる

参考:

Button のトランジション効果を子要素にも反映させたい – teratail

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

参考:

負荷をかけない透明な uGUI ボタン | おれ、Unity2D でゲーム作るんだ。

Canvas コンポーネント

参考:

UnityEngine.Canvas | Unity スクリプトリファレンス [公式]

uGUI

ドキュメント:

Unity UI | Unity マニュアル [公式]

IMGUI

ドキュメント:

IMGUI – 即時モードの GUI | Unity マニュアル [公式]

UI Toolkit

旧 UI Elements

こちらのページを参照

ドキュメント:

UI Toolkit | Unity マニュアル [公式]

UI Elements 開発者ガイド | Unity 2019.4 マニュアル [Official]

UI が動作しない

参考:

ボタンの当たり判定が反応しない時に確認すること | 夜中に Unity

ドキュメント

UI の使い方 | Unity マニュアル [公式]

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)

Grid Layout Group (Coco Code)

Automatic UI Anchoring

入手:

Automatic UI Anchoring | Unity Asset Store [Official]

リポジトリ:

snorbertas/Automatic-UI-Anchoring-For-Unity-3D: A Unity Editor Extension that Speeds Up Development by Automating the Process of Setting a UI Elements Anchor Positions – GitHub

UI Extensions

動画:

Intro

Getting Started

公式サイト:

UI Extensions

リポジトリ:

Unity-UI-Extensions/com.unity.uiextensions – GitHub

UI 3D System

レンダリングされた 3D オブジェクトやパーティクルをマスクして Canvas 上の UI に収めることができるアセット

入手:

UI 3D System | Unity Asset Store [Official]

参考:

UI 3D System を試す! | きっポグ

記事をシェアする:
タグ:

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Protected by reCAPTCHA