11
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

uGUIのCanvas、EventSystem

Last updated at Posted at 2015-12-13

#概要
Unityのバージョンは5.2.3f1

uGUIのCanvasとEventSystemについてのメモです。
CanvasとEventSystemのコンポーネントの内容は以下の通りです。

  • Canvas
  • Canvas
  • Canvas Scaler
  • Graphic Raycaster
  • Event System
  • Event System
  • Standalone Input Module
  • Touch Input Module

内容はマニュアルを見ると詳しく載っています。
Canvas http://docs.unity3d.com/ja/current/Manual/comp-CanvasComponents.html
Event System http://docs.unity3d.com/ja/current/Manual/EventSystem.html
複数解像度の対応 http://docs.unity3d.com/ja/current/Manual/HOWTO-UIMultiResolution.html

#Canvasの機能
uGUIのUIオブジェクトはCanvasの子オブジェクトとして追加する。
Canvasの表示モードは3通りあり、それによって設定も変わる。

1. Render Mode > Screen Space - Overlay

  • シーン内のどこでも画面全体に表示される
  • Pixel Perfectのチェックはアンチエイリアスの設定(チェックを入れるとくっきり表示)
  • Sort Orderは他のCanvasとの表示順を決める値(大きい方が手前に表示される)

2. Render Mode > Screen Space - Camera

  • 指定したカメラから離れた位置に配置される
  • Pixel Perfectのチェックはアンチエイリアスの設定(チェックを入れるとくっきり表示)
  • Render Cameraは表示するカメラを指定
  • Plane Distanceはカメラまでの距離
  • Sort LayerはCanvasのレイヤー設定(LayerはInspectorの右上で変更できる)
  • Order in Layerはレイヤー内の表示順を決める値(大きい方が手前に表示される)

Overlayモードと違うところはカメラで表示しているので、カメラまでの距離の間に3Dオブジェクトを置くと手前に表示されたり、UIを回転させると傾いて表示される。

3. Render Mode > World Space

  • 他の3Dオブジェクトと同じように扱える
  • Event Cameraはイベントを受け付けるカメラを指定
  • Sort LayerはCanvasのレイヤー設定(LayerはInspectorの右上で変更できる)
  • Order in Layerはレイヤー内の表示順を決める値(大きい方が手前に表示される)

Cameraモードと違うところはCanvas自体を傾けたりサイズを調整できる。

#Canvas Scalerの機能
Canvas Scalaerもモードが3通りあり、それによって設定も変わる。

1. Ui Scale Mode > Constant Pixel Size

  • Scale FactorはGUIの比率設定
  • Peference Pixels Per Unitは1unit(1メートル)あたりのピクセル数設定

2. Ui Scale Mode > Scale With Screen Size

  • Reference Resolutionは基準となる画面解像度を設定
  • Screen Match Modeは基準解像度を元にどうやってスケールさせるかの設定
  • Matchは基準解像度の幅と高さどちらに合わせるかの設定
  • Peference Pixels Per Unitは1unit(1メートル)あたりのピクセル数設定

スマホで複数の解像度に対応させるには、このモードに設定してスケールさせる。

3. Ui Scale Mode > Constant Physical Size

  • Pysical Unitは位置やサイズを決める単位を設定
  • Fallback Screen DPIはスクリーンDPIが分からない場合に推測するためのDPIを設定
  • Default Sprite DPIは1インチあたりのピクセル数を設定
  • Peference Pixels Per Unitは1unit(1メートル)あたりのピクセル数設定

#EventSytemの機能
EventSytemはUIのイベントを制御するオブジェクトでこれがないとインプットが何も反応しない。
Standalone Input Moduleはマウスやキーボードに関するイベントの制御。
Touch Input Moduleはスマホでのタッチ入力に関するイベントの制御。
1. Event System

  • First Selectedは最初に選択されるオブジェクトを設定
  • Send Navigation Eventsはチェックするとナビゲーションイベントが発生するようになる
  • Drag Thresholdはドラッグ開始判定の移動距離をピクセル単位で指定

2. Standalone Input Module

  • Horizontal Axisは横軸に対応するインプットマネージャーの設定
  • Vertical Axisは縦軸に対応するインプットマネージャーの設定
  • Submit ButtonはSubmitに対応するインプットマネージャーの設定
  • Cancel ButtonはCancelに対応するインプットマネージャーの設定
  • Input Actions Per Secondは入力を毎秒何回受け付けるか設定
  • Repeat Delayは連続入力を受け付けるまでの遅延時間を設定
  • Force Module Active

3. Touch Input Module

  • Force Module Active

#その他のメモ

  • 基本的にUIを表示するだけならCanvasはOverlay、Canvas ScalerはConstant Pixel Sizeかスマホで解像度が変わるならScale With Screen Sizeを選択する。
  • スマホでリストビューのタッチ判定がイマイチの場合、EventSystemのErag Thresholdを調整すると良くなるかも

#参考になりそうなサイトやAsset
Canvasの設定で参考になりそうなサイト
http://www.metalbrage.com/UnityTutorials/uGUI/Scaler.html
http://hiyotama.hatenablog.com/entry/2015/05/26/190621
http://hiyotama.hatenablog.com/entry/2015/06/30/090000
http://naichilab.blogspot.jp/2014/08/unityugui01-ui-canvas.html

Event Systemはマニュアルでもわかりづらいので以下のサイトが参考になる
http://ashlot.net/2014/12/19/ugui_tutorial_6/
http://albatrus.com/main/unity/7421
http://westhillapps.blog.jp/archives/43683528.html

#今後の課題
Graphic Raycasterがどんな時に設定を変えるのかいまいちわからなかった。(奥のUIオブジェクトを反応させないように使う?)
Force Module Activeがなんの設定かわからなかった。

11
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?