Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
uGUIのRectTransformを
さわってみた
@Unity Fukuoka vol.6
2014/12/20 k_nagamine
自己紹介
ながみね けいぞう
@KzoNag
Jollystics Inc.
ゲームとかアプリとか
C#,C++
Unity,Xamarin
話すこと
uGUIのRectTransformのこと
・主にAnchorとPivotについて
・スクリプトからもさわってみる
話さないこと
uGUIのそれ以外のこと
注意事項
僕もさわりはじめたばかりなので
間違ってたら教えてください
RectTransform
これ
これ
RectTransform
UI関連のオブジェクトを作ったらある
いつもはTransformがついてるところにある
“The Rect Transform component is the
2D counterpart of the Transform
component used with 3D graphics.
It is used to specif...
UIのサイズとか決めるやつ
3DのTransformに相当するよ
そのままですね
RectTransform
AnchorとかPivotをうまく設定して
解像度の違うデバイスでも柔軟な表示ができる
RectTransform
Transformを継承
var rectTrans = transform as RectTransform
とかできる
UnityEngine名前空間
実際にさわってみる
SceneView
Pivot(青い丸)
Anchor(4つの三角)
Inspector
AnchorPresets
PosX,PosY,Width,Height?
Left,Right,Top,Bottom?
Anchor
Pivot
Rotation, Scale
blue print mode
raw ed...
Pivot
Position,Scale,Rotationの基準位置
Anchor
親要素との位置関係に関する比率を定める
0 1
X軸について
Min X, Max XでAnchorの位置を設定
Min X Max X
0 1
X軸について
親のサイズが変わっても
a : b : c
が一定に保たれるように拡縮する
a b c
0 1
X軸について
位置・サイズの設定は2パターン
(1) b != 0 → Left, Right
(2) b = 0  → PosX, Width
a b c
(1) b != 0 → Left, Right
0 1
Left = 左Anchorからの距離
Right = 右Anchorからの距離
これらの値は固定
Left Right
(1) b != 0 → Left, Right
0 1
Left Right
Width
Left = 左Anchorからの距離
Right = 右Anchorからの距離
これらの値は固定
0 1
Left Right
a = 0, c = 0
→親のサイズに関わらず左右の幅が固定
Width
(1) b != 0 → Left, Right
(1) b != 0 → Left, Right
0 1Width
Left = 0, Right = 0
→親のサイズに対する比率が一定
(2) b = 0 → PosX, Width
0 1
PosX = AnchorからPivotまでの距離
Width = オブジェクトの幅
これらの値は固定
PosX
Width
(2) b = 0 → PosX, Width
0 1
PosX = AnchorからPivotまでの距離
Width = オブジェクトの幅
これらの値は固定
PosX
Width
Y軸も同じ
まとめると
Min X, Y
Max X, Y
Min X, Y
Max X, Y
Left Right
Top
Bottom
Min X, Y = Max X, Y
PosX, PosY
Width
Height
Min X, Y = Max X, Y
AnchorPresetsが分かる!
使いそうなパターン①
固定の位置・サイズ
使いそうなパターン②
上下左右の幅が固定
使いそうなパターン③
左右と上の幅を固定、高さは一定
使いそうなパターン④
親との比率を維持
+α
使いそうなパターン④
親との比率を維持
→サイズをアンカーに合わせるときに吸着
→一度アンカーに合わせれば+Shiftで調整
→アンカーをサイズに合わせたいときは?
Anchorを
フィットさせる
Editor Script
RectTransformの変数
(※僕なりの解釈なので正確じゃないかも)
anchoredPosition:AnchorからPivotまでの位置
anchoredPosition3D:AnchorからPivotまでの位置(3D)
anchor...
LeftPos
RightPos
ParentWidth
MinX = LeftPos / ParentWidth;
MaxX = Right / ParentWidth;
Left = 0;
Right = 0;
で実現できそう
こんなかんじになりました
Anchorをオブジェクトサイズに合わせる
MenuItemから使用
ホットキー
複数選択
Undo
(GitHub)
https://gist.github.com/KzoNag/8bfb22758548104814...
余談
RectTransformの変数を表示する
デバッグメニューみたいなのも作ってみた
もっと便利に①
Shift押しながら移動でAnchorも追従
→すぐにはできなかった。。。
RectTransformのInspectorはすでに拡張されてる
それを維持したまま+αで拡張できる?
もっと便利に②
レイアウト定義ファイルから生成もできそう
XMLとか
.psd → .png/.xml → オブジェクト生成
参考になる記事
UnityのuGUIのレイアウト調整機能について
解説してみる(RectTransform入門)
http://tsubakit1.hateblo.jp/entry/
2014/12/19/033946
(昨日アップされてました)
ありがとうございました
uGUIのRectTransformをさわってみた
uGUIのRectTransformをさわってみた
uGUIのRectTransformをさわってみた
Prochain SlideShare
Chargement dans…5
×

uGUIのRectTransformをさわってみた

15 042 vues

Publié le

About RectTransform, Unity's new UI System.

Publié dans : Logiciels
  • Soyez le premier à commenter

uGUIのRectTransformをさわってみた

  1. 1. uGUIのRectTransformを さわってみた @Unity Fukuoka vol.6 2014/12/20 k_nagamine
  2. 2. 自己紹介 ながみね けいぞう @KzoNag Jollystics Inc. ゲームとかアプリとか C#,C++ Unity,Xamarin
  3. 3. 話すこと uGUIのRectTransformのこと ・主にAnchorとPivotについて ・スクリプトからもさわってみる
  4. 4. 話さないこと uGUIのそれ以外のこと
  5. 5. 注意事項 僕もさわりはじめたばかりなので 間違ってたら教えてください
  6. 6. RectTransform
  7. 7. これ
  8. 8. これ
  9. 9. RectTransform UI関連のオブジェクトを作ったらある いつもはTransformがついてるところにある
  10. 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. 11. UIのサイズとか決めるやつ 3DのTransformに相当するよ
  12. 12. そのままですね
  13. 13. RectTransform AnchorとかPivotをうまく設定して 解像度の違うデバイスでも柔軟な表示ができる
  14. 14. RectTransform Transformを継承 var rectTrans = transform as RectTransform とかできる UnityEngine名前空間
  15. 15. 実際にさわってみる
  16. 16. SceneView Pivot(青い丸) Anchor(4つの三角)
  17. 17. Inspector AnchorPresets PosX,PosY,Width,Height? Left,Right,Top,Bottom? Anchor Pivot Rotation, Scale blue print mode raw edit mode
  18. 18. Pivot Position,Scale,Rotationの基準位置
  19. 19. Anchor 親要素との位置関係に関する比率を定める
  20. 20. 0 1 X軸について Min X, Max XでAnchorの位置を設定 Min X Max X
  21. 21. 0 1 X軸について 親のサイズが変わっても a : b : c が一定に保たれるように拡縮する a b c
  22. 22. 0 1 X軸について 位置・サイズの設定は2パターン (1) b != 0 → Left, Right (2) b = 0  → PosX, Width a b c
  23. 23. (1) b != 0 → Left, Right 0 1 Left = 左Anchorからの距離 Right = 右Anchorからの距離 これらの値は固定 Left Right
  24. 24. (1) b != 0 → Left, Right 0 1 Left Right Width Left = 左Anchorからの距離 Right = 右Anchorからの距離 これらの値は固定
  25. 25. 0 1 Left Right a = 0, c = 0 →親のサイズに関わらず左右の幅が固定 Width (1) b != 0 → Left, Right
  26. 26. (1) b != 0 → Left, Right 0 1Width Left = 0, Right = 0 →親のサイズに対する比率が一定
  27. 27. (2) b = 0 → PosX, Width 0 1 PosX = AnchorからPivotまでの距離 Width = オブジェクトの幅 これらの値は固定 PosX Width
  28. 28. (2) b = 0 → PosX, Width 0 1 PosX = AnchorからPivotまでの距離 Width = オブジェクトの幅 これらの値は固定 PosX Width
  29. 29. Y軸も同じ まとめると
  30. 30. Min X, Y Max X, Y
  31. 31. Min X, Y Max X, Y Left Right Top Bottom
  32. 32. Min X, Y = Max X, Y
  33. 33. PosX, PosY Width Height Min X, Y = Max X, Y
  34. 34. AnchorPresetsが分かる!
  35. 35. 使いそうなパターン① 固定の位置・サイズ
  36. 36. 使いそうなパターン② 上下左右の幅が固定
  37. 37. 使いそうなパターン③ 左右と上の幅を固定、高さは一定
  38. 38. 使いそうなパターン④ 親との比率を維持
  39. 39.
  40. 40. 使いそうなパターン④ 親との比率を維持 →サイズをアンカーに合わせるときに吸着 →一度アンカーに合わせれば+Shiftで調整 →アンカーをサイズに合わせたいときは?
  41. 41. Anchorを
  42. 42. フィットさせる
  43. 43. Editor Script
  44. 44. RectTransformの変数 (※僕なりの解釈なので正確じゃないかも) anchoredPosition:AnchorからPivotまでの位置 anchoredPosition3D:AnchorからPivotまでの位置(3D) anchorMax:右上のAnchorの値 anchorMin:右下のAnchorの値 offsetMax:右上Anchorからオブジェクトの右上の角へのオフセット offsetMin:左下Anchorからオブジェクトの左下の角へのオフセット pivot:Pivot位置 rect:Pivotを原点とした時のオブジェクトの矩形 sizeDelta:オブジェクトのサイズとAnchorのサイズの差
  45. 45. LeftPos RightPos ParentWidth
  46. 46. MinX = LeftPos / ParentWidth; MaxX = Right / ParentWidth; Left = 0; Right = 0; で実現できそう
  47. 47. こんなかんじになりました Anchorをオブジェクトサイズに合わせる MenuItemから使用 ホットキー 複数選択 Undo (GitHub) https://gist.github.com/KzoNag/8bfb227585481048147d
  48. 48. 余談 RectTransformの変数を表示する デバッグメニューみたいなのも作ってみた
  49. 49. もっと便利に① Shift押しながら移動でAnchorも追従 →すぐにはできなかった。。。 RectTransformのInspectorはすでに拡張されてる それを維持したまま+αで拡張できる?
  50. 50. もっと便利に② レイアウト定義ファイルから生成もできそう XMLとか .psd → .png/.xml → オブジェクト生成
  51. 51. 参考になる記事 UnityのuGUIのレイアウト調整機能について 解説してみる(RectTransform入門) http://tsubakit1.hateblo.jp/entry/ 2014/12/19/033946 (昨日アップされてました)
  52. 52. ありがとうございました

×