UI different between 16:10 and 3:2 (portrait) how can i fix?

Hi guys, this is my first question. im new to unity and im struggling in this problem.

i made a picture for all of the detail.


why this UI are not following the camera size? i set the anchor or maybe im wrong?
is script needed for this?
thx for your help. :slight_smile:

  1. Select your Canvas
  2. Change Render Mode to Screen Space - Overlay
  3. Canvas Scaler Match to Width and change your reference resolution to your needs
  4. Set the pivot points for your UI objects (most effective way is to set the pivot point RIGHT Above or Next or Below the object, for example your hearts are high on the screen then set the pivot points above them )

With that your objects will stay on screen, BUT it wont fix the problem of the location the location is set to the aspect ratio. You will have to Move the objects around but it will fix the “Out of screen” Issue

I’ve had a similar issue.
My solution was to create an empty gameobject wrapper containing the object’s graphic. The container’s anchors would be set to divide the screen correctly and the child graphic object would have an Aspect Ratio Fitter componenet

In your case, for example, set three game objects (life wrapper, score wrapper, pause button wrapper) holding the score, life and pause button as a child.
Set the anchors of the wrapping container to be the percentage you want, set the offsets to have zero distance from the anchors (positions of zero).

Add the graphic to each container and add an Aspect Ratio Fitter component (In layouts) to each of the graphics (not the container but it’s sub graphic game object). Set the Aspect Mode to ‘Fit in parent’ and try different values for the aspect value.
The ‘Fit in parent’ will have the the shape fit in the container. Setting a value of 1 will have the object scale evenly to both directions as the screen’s resolution change.

Reference: http://docs.unity3d.com/Manual/script-AspectRatioFitter.html

Another tool which helped me is the Content Size Fitter (http://docs.unity3d.com/Manual/script-ContentSizeFitter.html).

In the CanvasScaler, do you see the Match value?

simply move the slider to the far right (height) so the canvas scaling will follow the maximum height. that means that when the screen aspect ratio changed, the width will be the one changed.