unity-supporting-various-screen-ratio-with-anchor

unity-supporting-various-screen-ratio-with-anchor

• this post covers how to use anchor for supporting various screen ratio with unity
• environment
  • Windows / 10
  • Unity / 2018.3.8f1
• reference
  • (#1) https://docs.unity3d.com/Manual/UIBasicLayout.html

---

pre-task

• make new project

• make new Text
• rename and fill the text with text-left-top

• make other ones with the same way

• relocate texts by referencing the rule below
  • left: Pos X = -160
  • center: Pos X = 0
  • right: Pos X = 160
  • top: Pos Y = 30
  • middle: Pos Y = 0
  • bottom: Pos Y = -30

• align texts with center and middle

problem

• suppose that you want the texts to be shown as above
  • especially, regardless of any screen ratio
• you can relocate the texts like the screenshot with the rule below
  • left: Pos X = -240
  • center: Pos X = 0
  • right: Pos X = 240
  • top: Pos Y = 130
  • middle: Pos Y = 0
  • bottom: Pos Y = -130

※ your appropriate XY value can be different from mine
※ because of the screen size of Game window is affected with your display

 

• but, there is a critical problem; only controlling position does not support various screen ratio
  • first of all, without manipulating anchors, your work would be effective in certain ratio

how-to-use-anchor

• for preventing the problem seen above, you should use the anchor
  • in reference #1, you can find more information of what is the anchor
• in short, the anchor of UI object determines origin of the object
  • the origin means the position that is presented by (0, 0)

• change the anchor of text-left-top from center-middle to left-top
• its position is re-calculated upon the new anchor
  • in fact, every UI object has the center-middle anchor as an initial anchor

• now you can see that text-left-top keeps desired position

• the result comes from here; the origin of UI object is different
  • as a result, setting anchor is equal to changing the origin of UI object

• select the ideal ratio (16 : 9) again

• set the proper anchor for each text

• now you can see the texts of consistent layout

custom-anchor

• if you are not satisfied with default anchors, using custom anchor would be a solution
  • especially, when you want to modify scale too

• remove the text-left-top
• make new button
  • set the position and width as above

• you can make custom anchor by relocating one or more arrow(s) on the canvas
• let us set the custom anchor like above
  • left-top arrow locates left-top of screen
  • left-bottom arrow locates left-middle of screen
  • right-top arrow locates center-top of screen
  • right-bottom arrow locates center-middle of screen

• the Game window would be shown like the sreenshot

• you can see the result of custom anchor
  • not only position but also scale is re-calculated
• the transform of UI object is affected by the four arrows that are composing the custom anchor
  • arrows keep their position as the ratio been set and stretch/compress the UI object
  • that is why you can not see the button over the ratio (2 : 1) and why the button gets wider

---