#UI Canvas

1 messages · Page 1 of 1 (latest)

rain nexus
#

Hi, could anyone help me understand how to efficiently position elements on the UI that will reflect in the Game view mode exactly like how we see in Scene ? TY

odd star
#

The short answer: proper Canvas Scaler settings with anchors and pivots on elements, heres a great channel for UI:
https://www.youtube.com/playlist?list=PLXD0wONGOSCKcUJHc4-7LIkEgvFvJ-nl1

And docs on the above mentioned:
https://docs.unity3d.com/Packages/[email protected]/manual/script-CanvasScaler.html

https://docs.unity3d.com/Packages/[email protected]/manual/UIBasicLayout.html

You also want to make sure your Game window is being rendered at the same resolution as your UI (I personally prefer to use the same reference resolution as the Canvas Scaler, but its also good to test with a bunch of different ones)

#

The long answer:
The Canvas Scaler is largely responsible for matching your Canvas to a specific resolution as a reference point, as long as your game is rendered in a ratio of that resolution, the UI should scale correctly - as in, if your game is 1280 x 720, or 1920 x 1080, those are both 16:9 aspect, so using either as the resolution, or even 16x9, should scale accordingly

Heres a good guide on resolutions and aspect ratios if your unfamiliar: https://www.epiphan.com/userguides/avio-4k/Content/UserGuides/VideoGrabber/UVC/3-Capture/fpsResolutions&Ratios.htm

If all this is setup correctly, your build should match 1-to-1 with what the Canvas looks like in the Game window (the Scene may look a bit different than the game window, and will be based on the size of the Scene view itself, more noticable if you leave the Game window on "Free Aspect", it uses the Gam window as the aspect ratio instead, which is rarely useful in production)