About RectTransform, Unity's new UI System.

1. uGUIのRectTransformを
さわってみた
@Unity Fukuoka vol.6
2014/12/20 k_nagamine

2. 自己紹介
ながみね けいぞう
@KzoNag
Jollystics Inc.
ゲームとかアプリとか
C#,C++
Unity,Xamarin

3. 話すこと
uGUIのRectTransformのこと
・主にAnchorとPivotについて
・スクリプトからもさわってみる

4. 話さないこと
uGUIのそれ以外のこと

5. 注意事項
僕もさわりはじめたばかりなので
間違ってたら教えてください

6. RectTransform

7. これ

8. これ

9. RectTransform
UI関連のオブジェクトを作ったらある
いつもはTransformがついてるところにある

10. “The Rect Transform component is the
2D counterpart of the Transform
component used with 3D graphics.
It is used to specify the size, position
and rotation of controls in the UI
system”
http://docs.unity3d.com/Manual/class-
RectTransform.html

11. UIのサイズとか決めるやつ
3DのTransformに相当するよ

12. そのままですね

13. RectTransform
AnchorとかPivotをうまく設定して
解像度の違うデバイスでも柔軟な表示ができる

14. RectTransform
Transformを継承
var rectTrans = transform as RectTransform
とかできる
UnityEngine名前空間

15. 実際にさわってみる

16. SceneView
Pivot（青い丸）
Anchor（４つの三角）

17. Inspector
AnchorPresets
PosX,PosY,Width,Height?
Left,Right,Top,Bottom?
Anchor
Pivot
Rotation, Scale
blue print mode
raw edit mode

18. Pivot
Position,Scale,Rotationの基準位置

19. Anchor
親要素との位置関係に関する比率を定める

20. 0 1
X軸について
Min X, Max XでAnchorの位置を設定
Min X Max X

21. 0 1
X軸について
親のサイズが変わっても
a : b : c
が一定に保たれるように拡縮する
a b c

22. 0 1
X軸について
位置・サイズの設定は２パターン
(1) b != 0 → Left, Right
(2) b = 0 → PosX, Width
a b c

23. (1) b != 0 → Left, Right
0 1
Left = 左Anchorからの距離
Right = 右Anchorからの距離
これらの値は固定
Left Right

24. (1) b != 0 → Left, Right
0 1
Left Right
Width
Left = 左Anchorからの距離
Right = 右Anchorからの距離
これらの値は固定

25. 0 1
Left Right
a = 0, c = 0
→親のサイズに関わらず左右の幅が固定
Width
(1) b != 0 → Left, Right

26. (1) b != 0 → Left, Right
0 1Width
Left = 0, Right = 0
→親のサイズに対する比率が一定

27. (2) b = 0 → PosX, Width
0 1
PosX = AnchorからPivotまでの距離
Width = オブジェクトの幅
これらの値は固定
PosX
Width

28. (2) b = 0 → PosX, Width
0 1
PosX = AnchorからPivotまでの距離
Width = オブジェクトの幅
これらの値は固定
PosX
Width

29. Y軸も同じ
まとめると

32. Min X, Y
Max X, Y

33. Min X, Y
Max X, Y
Left Right
Top
Bottom

35. Min X, Y = Max X, Y

36. PosX, PosY
Width
Height
Min X, Y = Max X, Y

37. AnchorPresetsが分かる！

38. 使いそうなパターン①
固定の位置・サイズ

39. 使いそうなパターン②
上下左右の幅が固定

40. 使いそうなパターン③
左右と上の幅を固定、高さは一定

41. 使いそうなパターン④
親との比率を維持

42. +α

43. 使いそうなパターン④
親との比率を維持
→サイズをアンカーに合わせるときに吸着
→一度アンカーに合わせれば+Shiftで調整
→アンカーをサイズに合わせたいときは？

44. Anchorを

45. フィットさせる

46. Editor Script

47. RectTransformの変数
（※僕なりの解釈なので正確じゃないかも）
anchoredPosition：AnchorからPivotまでの位置
anchoredPosition3D：AnchorからPivotまでの位置(3D)
anchorMax：右上のAnchorの値
anchorMin：右下のAnchorの値
offsetMax：右上Anchorからオブジェクトの右上の角へのオフセット
offsetMin：左下Anchorからオブジェクトの左下の角へのオフセット
pivot：Pivot位置
rect：Pivotを原点とした時のオブジェクトの矩形
sizeDelta：オブジェクトのサイズとAnchorのサイズの差

48. LeftPos
RightPos
ParentWidth

49. MinX = LeftPos / ParentWidth;
MaxX = Right / ParentWidth;
Left = 0;
Right = 0;
で実現できそう

50. こんなかんじになりました
Anchorをオブジェクトサイズに合わせる
MenuItemから使用
ホットキー
複数選択
Undo
(GitHub)
https://gist.github.com/KzoNag/8bfb227585481048147d

51. 余談
RectTransformの変数を表示する
デバッグメニューみたいなのも作ってみた

52. もっと便利に①
Shift押しながら移動でAnchorも追従
→すぐにはできなかった。。。
RectTransformのInspectorはすでに拡張されてる
それを維持したまま+αで拡張できる？

53. もっと便利に②
レイアウト定義ファイルから生成もできそう
XMLとか
.psd → .png/.xml → オブジェクト生成

54. 参考になる記事
UnityのuGUIのレイアウト調整機能について
解説してみる（RectTransform入門）
http://tsubakit1.hateblo.jp/entry/
2014/12/19/033946
（昨日アップされてました）

55. ありがとうございました