Home Explore Help
Sign In
Godot
/
godot-docs
mirror of https://github.com/godotengine/godot-docs.git
2
0
Fork 0
Files Issues 0 Wiki
Tree: fa00c829f0
Branches Tags
godot-docs
/
tutorials
/
gui_control_repositioning.rst

gui_control_repositioning.rst 2.0 KB
History Raw

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556 
  1. Size and Anchors
    2. 

  2. ----------------
    3. 

  3. 

  4. If a game was to be always run in the same device and at the same
    5. 

  5. resolution, positioning controls would be a simple matter of setting the
    6. 

  6. position and size of each one of them. Unfortunately, it is rarely the
    7. 

  7. case.
    8. 

  8. 

  9. Only TVs nowadays have a standard resolution and aspect ratio.
    10. 

  10. Everything else, from computer monitors to tablets, portable consoles
    11. 

  11. and mobile phones have different resolutions and aspect ratios.
    12. 

  12. 

  13. There are several ways to handle this, but for now let's just imagine
    14. 

  14. that the screen resolution has changed and the controls need to be
    15. 

  15. re-positioned. Some will need to follow the bottom of the screen, others
    16. 

  16. the top of the screen, or maybe the right or left margins.
    17. 

  17. 

  18. .. image:: /img/anchors.png
    19. 

  19. 

  20. This is done by editing the *margin* properties of controls. Each
    21. 

  21. control has four margins: left, right, bottom and top. By default all of
    22. 

  22. them represent a distance in pixels relative to the top-left corner of
    23. 

  23. the parent control or (in case there is no parent control) the viewport.
    24. 

  24. 

  25. .. image:: /img/margin.png
    26. 

  26. 

  27. When horizontal (left,right) and/or vertical (top,bottom) anchors are
    28. 

  28. changed to END, the margin values become relative to the bottom-right
    29. 

  29. corner of the parent control or viewport.
    30. 

  30. 

  31. .. image:: /img/marginend.png
    32. 

  32. 

  33. Here the control is set to expand it's bottom-right corner with that of
    34. 

  34. the parent, so when re-sizing the parent, the control will always cover
    35. 

  35. it, leaving a 20 pixel margin:
    36. 

  36. 

  37. .. image:: /img/marginaround.png
    38. 

  38. 

  39. Finally, there is also a ratio option, where 0 means left, 1 means right
    40. 

  40. and anything in between is interpolated.
    41. 

  41. 

  42. [STRIKEOUT:Containers] (TODO)
    43. 

  43. -----------------------------
    44. 

  44. 

  45. -  [STRIKEOUT:This poses a difficult problem]
    46. 

  46. -  [STRIKEOUT:There are two ways of dealing]
    47. 

  47. -  [STRIKEOUT:style boxes]
    48. 

  48. -  [STRIKEOUT:title menu example]
    49. 

  49. -  [STRIKEOUT:containers]
    50. 

  50. -  [STRIKEOUT:theme]
    51. 

  51. -  [STRIKEOUT:focus]
    52. 

  52. 

  53. *Juan Linietsky, Ariel Manzur, Distributed under the terms of the `CC
    54. 

  54. By <https://creativecommons.org/licenses/by/3.0/legalcode>`__ license.*
    55. 

  55. 

  56.