uGUIでUIを作るとき、知っておくと便利な基本機能をまとめました。
Canvas設定からパフォーマンス計測まで、実践的な内容を紹介します。
目次
1. Canvasの基本設定
UIの基本要素
| 要素 | 役割 |
|---|---|
| Canvas | UIの描画を担当。複数配置も可能 |
| EventSystem | UIへのイベント処理を担当。ないとボタンが反応しない |
描画モードの違い
| モード | 特徴 | 用途 |
|---|---|---|
| Screen Space – Overlay | 常に最前面に描画。最もよく使われる | 通常のUI |
| Screen Space – Camera | カメラで描画。3Dオブジェクトを前面に出せる | エフェクトをUIの前に表示したい場合 |
| World Space | シーン内のオブジェクトと同じ扱い。移動・回転可能 | VR/AR、ワールド内UI |
描画順
- Canvas内：Hierarchy下にあるほど手前に表示
- Canvas間：Sort Orderの値が大きいほど手前に表示
スケールモード
| モード | 説明 |
|---|---|
| Constant Pixel Size | ピクセルサイズ固定 |
| Scale With Screen Size | 基準解像度を設定してスケーリング（複数端末対応向け） |
| Constant Physical Size | 物理単位（mm/cm）で指定 |
| World | World Space時に自動設定 |
2. システムフォントのぼやけを直す方法
現象
SceneビューでもGameビューでもシステムフォントがぼやけて見える。
原因
CanvasのReference Resolutionが大きいのに、Gameビューの解像度が小さいと発生します。
解決方法
Gameビューの解像度をCanvasのReference Resolutionと同じ値に設定します。
3. Anchorの使用例
Stretchで中央キープ
ボタンの子テキストに上下左右Stretchをかけると、ボタンサイズが変わっても常に中央を維持します。
Content Size Fitterで可変対応
- 右寄せテキストにContent Size Fitter（Preferred Size）を追加
- 子の画像のAnchorを親の左側に設定
- 数字が増えても位置関係を保ったまま可変する
レスポンシブなUIパーツ
- パネルを作成
- 左端Anchor画像と右端Anchorボタンを子に配置
- 中央に横幅Stretchのボーダーを配置
パネルサイズが変わってもパーツが追従します。
4. タイリング（Tiled）の設定方法
手順
- 繰り返したい部分を3マス分確保した画像を作成
- UnityでSprite Editorを開く
- 中心から1個半をスライス設定
- ImageコンポーネントのImage Typeを「Tiled」に設定
5. Canvas Scalerで複数解像度に対応する方法
設定手順
- Canvas ScalerのUI Scale Modeを「Scale With Screen Size」に変更
- Reference Resolutionに基準サイズを入力（例：1280×720）
- Screen Match Modeを「Match Width Or Height」に設定
- 縦持ちならMatch=0（Width）、横持ちならMatch=1（Height）
端末別の表示結果（縦持ち・Width合わせの場合）
| 端末 | 比率 | 結果 |
|---|---|---|
| iPhone5 | 16:9 | ぴったり |
| iPad Pro | 4:3 | 上下が切れる |
| iPhone4S | 3:2 | 上下が切れる |
比率が異なる端末では切れる部分を考慮したレイアウトが必要です。
6. 意図した座標にぴったり配置する方法
スナップ設定
Edit → Snap Settingsでスナップ値を設定（例：8の倍数）
配置手順
- Anchor PresetsでShift+左上クリック（Pivotを左上に）
- Alt+左上クリック（左上に移動）
- Wキーでトランスフォーム、Ctrl押しながら移動でスナップ
- 配置後、Anchorを適切なものに変更
- Shift+中央クリックでPivotを中心に戻す
7. ポリゴン数とSet Pass Callの計測
UIのポリゴン数
| 要素 | 追加ポリゴン数 |
|---|---|
| Image（Simple） | +2△ |
| Image（9Slice） | +18△（2×9） |
| Image（Tiled） | +8△〜（繰り返し分増加） |
| Shadow | ×2倍 |
| Outline | ×4倍 |
| Shadow + Outline | ×10倍以上 |
Set Pass Call
| 構成 | Batches | SetPass calls |
|---|---|---|
| Camera only | 1 | 1 |
| UI | 2 | 2 |
| Rect Mask 2D | 3 | 2 |
| Mask | 4 | 4 |
パフォーマンスのポイント
- 画像もテキストも1つにつき+2ポリゴン
- ShadowとOutlineの組み合わせは負荷が大きい
- Maskは使うだけでSetPass callsが増える
- できるだけ1アトラス+1マテリアルに収める
まとめ
| 項目 | ポイント |
|---|---|
| Canvas | 描画モードとスケールモードを適切に設定 |
| フォントぼやけ | Gameビュー解像度をCanvas解像度に合わせる |
| Anchor | レスポンシブなUIにはAnchor設定が必須 |
| 複数解像度対応 | Scale With Screen Size + Match設定 |
| パフォーマンス | Shadow/Outline/Maskは負荷が高いので注意 |
