CG・映像デザイナー技術ブログ

【Unity】uGUI使用時に知っておくべき基本機能7選

eyecatch_unity

本記事ではuGUI使用時に知っておくべき基本機能をまとめました。

この記事の著者
CGブロガー すいみん

CGブロガー

すいみん

Suimin

プロフィール

某美大の油絵科を卒業後、大手CG映像プロダクションに入社。
その後ゲーム業界に転職。
現在は技術系のCGデザイナーをしています。 書籍:Unity デザイナーズ・バイブル
プロフィール詳細はこちら

uGUIの基本要素とカンバスについて

Cancvasの基本設定について解説します。

UIの基本要素

  • 『Canvas』はUIの描画を担います。複数個、配置することも可能です。
  • 『EventSystem』はUIに対するイベントを扱います。これがないとボタンをおしても何も反応しません。

描画モード

カンバスには『Screen Space – Overlay』『Screen Space – Camera』『World Space』の3つの描画モードがあります。

  • Screen Space – Overlay
    カンバスがどこの位置にあっても画面全体を覆うように描画されます。
    UIは最前面に描画することが多いため最も使用されるモードです。
    このモードだと3DオブジェクトやパーティクルはUIより前に表示することができません

  • Screen Space – Camera
    カンバスが指定されたカメラの前方、一定距離離れた位置に配置され、カメラによって描画されます。
    カメラで描画しているので3DオブジェクトやパーティクルはUIより前に表示することができます。

  • World Space
    シーン内の他のゲームオブジェクトと同じ扱いで描画されます。
    他のモードと違いカンバス自体を回転させたり、移動させたりすることができます。
    カンバスをすり抜けることもできます。

参考 CanvasUnity マニュアル 参考 CanvasUnity マニュアル 参考 uGUIのCanvasの使い方トひよこのたまご

描画順

  • カンバス内の描画順
    階層構造の順番が下に行くほど手前に表示されます。

  • カンバス間の描画順
    Sort Orderの値が大きいほど手前に表示されます。

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

Canvas Scalaerには『Constant Pixel Size』『Scale With Screen Size』『Constant Physical Size』『World』の4つのスケールモードがあります。

  • Constant Pixel Size
    UIをピクセルサイズに合わせて表示したい場合はこのモードにします。

  • Scale With Screen Size
    基準となる画面解像度を設定して表示するモード。複数の異なる解像度のデバイスに対応させるには、このモードに設定してスケールさせます。

  • Constant Physical Size
    ミリメートルやセンチメートルなど物理的な単位を設定して表示するモード。

  • World
    カンバスの描画モードが『World Space』の時はWorldに固定されます。

参考 Canvas ScalerUnity マニュアル 参考 uGUIのCanvas Scalerの使い方ひよこのたまご

システムフォントの表示がぼやけているのを直す方法

Unityあるあるです。システムフォントの表示がぼやけているのを直す方法です。

現象

SceneビューもGameビューもシステムフォントがぼやけています!

原因

uGUIのCanvasの解像度を大きめに指定したことに対して、Gameビューの解像度が小さく。フォントがそれに対応してぼやけてしまうようです。

参考 uGUIのテキストがボケる問題の対策についてテラシュールブログ

解消方法

Gameビューの表示もCanvasと同じ解像度にすると解消されました。

UIを組み込むためのAnchor使用例

uGUIのRectTransformのAnchorの基本的な使用例です。

基本機能だけしか使ってないです。

STEP.1
Stretch

GameObject>UI>Buttonでボタンを作成

子の文字が上下左右にStretchがかかっているので、ボタンの座布団のサイズが変化しても常に中心をキープ

STEP.2
Content Size Fitter

右寄せのテキストを作成。**Content Size Fitter**のコンポーネントをつける(設定はPreferred Size)

子に画像を作成。アンカーを親に対して「左側」にして、数字の左側に位置を移動

数字が増えても位置関係を保ったまま可変します。

STEP.3
UIの可変

パネル(下敷き)を作成

子に左端をアンカーにした画像と右端をアンカーにしたボタン(の親グループ)を作成。真ん中に横幅をストレッチをかけたボーターを作成して間隔を微調整。

パネルが可変しても、リストの中身のパーツも可変します。

画面やパネル等の可変に耐えうるUIコンポーネント(部品)が作成できると応用がきいて便利です。

そのような部品をつくるためにはAnchorの設定が必要不可欠です。

uGUIでタイリング(Tiled)する方法

STEP.1
タイリング用の画像の作成

繰り返したい所は3マス分確保して画像を作成

STEP.2
Unityでの設定
STEP.3
Spriteで編集で、中心から1個半位をスライス

Imageを作成して、スプライトをアサイン。image TypeをTiledに

Canvas Scalerで比率の違う端末解像度に対応する方法

触ってみないとちゃんと理解できないなということで、Canvas Scalerで比率の違う解像度に対応をやってみました。

画面比率について

機種別画面サイズ、解像度、縦横比のまとめをみると、2014年以降16:9で規格が統一されつつ有ります。

参考 2016年最新版 iPhone・Androidスマホ 機種別画面サイズ、解像度、縦横比のまとめ | sounansa.netsounansa.net

ただ、iPadやまだよく使われているiPhone4Sも考慮しないわけにいかないので、こちらも考慮した画面を作成する必要があります。

  • iPad Pro 2048×2732 4:3
  • iPhone4S 960×640 3:2

Canvas Scalerで比率の違う解像度に対応する方法

たとえば、基準とする端末をiPhone5(1136×640 16:9)

縦持ちの画面を作成するとします。

STEP.1
画像を用意

1280×720の画像を用意

STEP.2
Width1280 Height720に

GameObject>UI>RawImageを作成し、用意した画像をアサイン。Rect Transformの値を用意した画像と同じ、Width1280 Height720に。

STEP.3
Scale With Screen Sizeに変更

Canvasを選択して、Canvas ScalerのUI Scale Modeを『Scale With Screen Size』に変更

STEP.4
Reference Resolution

続いてReference Resolutionも用意した画像と同じ数字に X1280 Y720

STEP.5
Screen Match Mode

デフォルトならScreen Match ModeがMatch Width Or Heghtになっているのでそのままに。

同様にMatchもデフォルトならWidth 0 になっていますが、縦持ちならこちらで。(横の場合は Height 1に寄せる)

STEP.6
確認

ぴったり画像と画面が一致していることを確認

解像度ごとに変更

  1. Gameウインドウのタブの真下のボタンから、確認したい解像度を設定します。
  2. iPhone5 1136×640 16:9
  3. iPad Pro 2048×2732 4:3
  4. iPhone4S 960×640 3:2

iPhone5の場合

16:9で画像を作成しているのでぴったりです。

iPad Proの場合

横に合わせて、画像がスケールされますが、画面比率が4:3と16:9より正方形に近くなるので上下がかなり切れます。

iPhone4Sの場合

画面比率が3:2。こちらも16:9より正方形に近くなるので上下が切れます。

Match Height 1にした場合


ちなみにMatch Height 1にした場合は縦合わせになるので、iPadやiPhone4Sの場合、左右に黒帯ができます。

たとえば画面全面にイラストを載せたい場合(起動時のメインビジュアル等)に16:9の横合わせの設定にすると、iPadやiPhone4Sでは上下が切れてしまいます。

かといって、縦合わせで黒帯を出すのもかっこ悪いので、上下が切れても良いようなレイアウトにした画像を準備するといったことも必要になると思います。

uGUIで意図した座標にぴったり配置する方法

UIパーツのトランスフォームの値を意図した場所で、きれいな整数にしたかったので、テスト。

Unityの基本機能のみ使用。

スナップ設定

Edit>Snap settings

からスナップさせたい倍数を入力。今回は8の倍数にしました。

座標調整用アンカー・ピボット設定

STEP.1
設定

UIパーツの位置情報は左上あわせて、移動したいのでその設定。

STEP.2
Anchor Presetsをクリック
STEP.2
pivotを設定

Shift押しながら左上をクリック。左上にpivotを設定します。

Alt押しながら左上をクリック。左上にパーツを移動させます。

座標調整

オブジェクトを選択。

Wキーでトランスフォームにして、Ctrlキーを押しながら移動すると、8の倍数にスナップしながら移動できます。

試しに、X24 Y-24の位置へ移動。

アンカー・ピボット設定

  • アンカーは普通に適切なものを選択して切り替えます。
  • ピボット設定も、ボタン等は真ん中に戻したいので、 さきほどのAnchor PresetsでShift押しながら真ん中をクリック。Pivot(X0.5, Y0.5)にします。

以上で、綺麗に配置できます。

uGUIのポリゴン数とSet Pass Callの計測

描画負荷について気になったので、単純なUIの要素のポリゴン数とSet Pass Callを計測してみました。

## UIの△ポリゴン数について

Total△
Camera(Only) 2
Image(Simple) 4
Image(9Slice) 20
Image(Tiled) 10
Image(Simple)+Shadow 6
Image(Simple)+Outline 12
Image(Simple)+Shadow+Outline 22

カメラのみ

△2

カメラ表示(Solid Color)だけでも、△ポリゴン2計測されます。

1枚のImage(Simple)

+△2

Image(9Slice)

+△18

△2×9複製分

Image(Tiled)

+△8(最小)

△2×4複製分。4隅分が最小で、中央を繰り返した分だけ△は増えていく。

Shadow

+△2

△2×1複製分

Outline

+△8

△2×4複製分

Shadow+Outline

+△18

Camera△2+(Image△2+Outline△8)*Shadow△2=22

uGUIのポリゴン数とSet Pass Callの計測まとめ

  • 画像もテキストも1つにつき+△2
  • 9スライスにすると×9倍
  • タイリングにすると×繰り返した分
  • シャドウを使うと×2倍
  • アウトラインを使うと×4倍
  • シャドウとアウトラインを組み合わせると×10倍以上に

ということで、UIといえど無計画だと、いつのまにか頂点数はかなり増えてしまう恐れがあり。

UIのSet Pass Callについて

Set Pass CallはCPUからGPUに送る描画命令。回数が多いと負荷が大きい。
1枚のテクスチャ+UI/Defaultマテリアルの条件で計測

Batches SetPass calls
Camera(Only) 1 1
UI 2 2
Rect Mask 2D 3 2
Mask 4 4
  • UIはSet Pass Call2で収まるのが最小値。
  • マスクは使うだけでSetPass callsが増えるので、極力使わないほうが○
  • 複数のマテリアルは挟んでいくとその分、SetPass callsは増えるので、できるだけ1アトラス+1マテリアルに収める
参考 描画最適化Qiita

以上、すいみん(@cg_method)でした!