Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. We have updated the language to the Editor Terms based on feedback from our employees and community. Learn more.
    Dismiss Notice
  3. Join us on November 16th, 2023, between 1 pm and 9 pm CET for Ask the Experts Online on Discord and on Unity Discussions.
    Dismiss Notice
  4. Dismiss Notice

Unity UI Properly anchors setting problem

Discussion in 'UGUI & TextMesh Pro' started by KosaJr, Sep 29, 2018.

  1. KosaJr

    KosaJr

    Joined:
    Jan 3, 2017
    Posts:
    10
    Hello all!
    I'm trying to make main menu for my mobile game. I want to provide support for different aspect ratios (16:9 mobiles & 4:3 tablets), but I can't properly set anchors for text.

    Here are my settings:

    Canvas scaler
    upload_2018-9-29_14-34-12.png

    Image rect transform (preserve aspect is ON)
    upload_2018-9-29_14-36-22.png

    Text rect transform (Best fit is ON)
    upload_2018-9-29_14-38-22.png

    In 16:9 (18:9, 19:9) everything is ok, but when I change AR to 4:3, my text goes down. Red line shows the difference.
    upload_2018-9-29_14-47-37.png

    I want to text stay always in this position and scale with parent. Is it possible?
     
  2. Beks_Omega

    Beks_Omega

    Joined:
    Jun 7, 2017
    Posts:
    72
    Is the options text a child of the paper? or are they siblings? If they're siblings try making the options text a child. Not sure if that's the problem, but it could be worth a shot :D

    Good luck! Anchors are really hard to work with hehe.
     
  3. KosaJr

    KosaJr

    Joined:
    Jan 3, 2017
    Posts:
    10
    Yes of course, Options are child of paper image : ) Yup, really hard, I spend last few days with this problem and tried a thousand of combinations...
     
  4. Beks_Omega

    Beks_Omega

    Joined:
    Jun 7, 2017
    Posts:
    72
    Ok I was thinking about it more and I think I figured out hte problem. Because the Paper image is set to stretch to the size of the screen always, the Option text's position is essentially based on the percentage of the screen, not the percentage of the paper alone. You can see this by clicking on the paper image when it is set up like your second picture, the height of the RectTransform is larger than the height of the image.

    What you want instead is to set the paper image's anchor points and pivot at the center of the canvas (so that it doesn't stretch) and then add an AspectRatioFitter to your paper image, and set it to "Fill Parent". This will give the paper the same resizing effect, and the RectTransform wont become larger than the image itself. Then you should be able to set up the options anchors in whatever way you want :D
     
  5. KosaJr

    KosaJr

    Joined:
    Jan 3, 2017
    Posts:
    10
    I tried it and...it doesn't look like it works. Some strange things happen with AspectRatioFitter. So I dont use it. But...
    You have good idea with moving pivot point to another place. Combining anchors with changed pivot's point place does the trick!
    Cheers and thanks for idea Beks_Omega :)