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

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

公式サイト:

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

Rect Transform

参考:

Rect Transform のプロパティを徹底解説 | TECH PROjin

スクリプトで Height / Width を設定する – Qiita

RectTransform の幅と高さの取得/設定を楽にする拡張メソッド | コガネブログ

Unity の RectTransform 使い方とスクリプト | ゲームの作り方!

RectTransform の Width / Height をスクリプトから変更する | はなちるのマイノート

RectTransform から幅、高さをとるには? | 三流豆腐。

RectTransform のインスタンスとサイズの話 | はらけんログ

RectTransform の Position を変更してから sizeDelta を変更すると Position の変更が戻される | kan のメモ帳

Canvas を非 Active にした状態で開始すると Rect Transform の諸々が0になる件 | kan のメモ帳

RectTransform をなるはやで取得したい – Qiita

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

Rect Transform | Unity マニュアル [公式]

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

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

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

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 Scaler を目的別に理解する | LIGHT11

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

uGUI チュートリアル | Metal Brage

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

Building a Responsive UI | John Tucker

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

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

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

アンカー

参考:

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

自動レイアウト

参考:

uGUI の自動レイアウトが分かりにくいと評判なので解説してみる | テラシュールブログ

uGUI の自動レイアウトを根っこのほうから理解する | fuqunaga

Unity UI の Auto Layout を使いこなして楽々レイアウト | SOU·COLLE

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

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 で uGUI をまとめて操作する方法 | TECH Projin

uGUI の Canvas Group – Qiita

CanvasGroup コンポーネントは便利 | ねぎたまらぼ

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

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

Canvas Group | Unity UI 1.0 Manual [Official]

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

スライダー (Slider)

参考:

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

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

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

Radial Slider / Circle Slider – Unity Forum

UI Slider not correctly filling – Unity Answers

Change width of Slider only by right – Stack Overflow

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

参考:

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

トグルボタン | WisdomSoft

Unity の Toggle の使い方 | TECH Projin

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

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

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

画像 (Image)

手順
  1. 画像ファイルをプロジェクトにインポートする。
  2. プロジェクトウィンドウで画像ファイルを選択し、インスペクターで「Texture Type」を Sprite (2D and UI) に設定する。
  3. 「Image」コンポーネントで「Source Image」として指定する。

参考:

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

テクスチャのインポート設定 | Unity マニュアル [公式]

Raycast Padding

参考:

Raycast Padding – ボタンなどのレイキャストの当たり判定(タッチ範囲)だけを変えられる | kan のメモ帳

Raycast Padding – Image や Text で Raycast Target の範囲を調整できる | コガネブログ

ボタン画像よりも大きなタッチ反応領域をつくる | おれ、Unity2D でゲーム作るんだ。

Raycast Padding の領域をシーンビューで可視化してみた – Qiita

Raycast Padding needs a Gizmo – Unity Forum

イメージをマスクする (Mask)

参考:

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

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

Class Mask | Unity UI 1.0 Manual [Official]

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

参考:

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

Cross Fade Alpha

参考:

CrossFadeAlpha / CrossFadeColor – uGUI のオブジェクトの色や透明度をフェードさせる関数 | コガネブログ

uGUI のオブジェクトのフェードとかの話 | ハルシオンシステムの気まま Blog

UI.Graphic.CrossFadeAlpha | Unity 2018.4 スクリプトリファレンス [公式]

UI.Graphic.CrossFadeAlpha | Unity UI 1.0 Manual [Official]

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

旧 UIElements

こちらのページを参照

ドキュメント:

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

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

ドキュメント

Unity UI | Unity Manual [Official]

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 3D System

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

入手:

UI 3D System | Unity Asset Store [Official]

参考:

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

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

コメントを残す

メールアドレスが公開されることはありません。

Protected by reCAPTCHA