Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

SOLVED: Game UI Button Size problem

Discussion in 'Editor & General Support' started by StarGamingNetwork, Jul 17, 2021.

  1. StarGamingNetwork

    StarGamingNetwork

    Joined:
    Feb 2, 2015
    Posts:
    16
    In my iOS app I'm having problems with the button sizes on the iPad. Keeps failing certification.

    From Apple:
    iPadButtons.png

    Does anyone know why this happens. Doesn't even seem possible as the buttons are the same size.

    In the Device simulator.
    EditorButtons.png

    The canvas:
    CanvasInspecter.png

    The Buttons:
    ShootButtonInspecter.png

    PassButtonInspecter.png

    No scripts even look at the buttons.
    Even if smaller ( which is not what I want ) they at least should be the same size. I've had this issue before in previous versions of Unity and have fixed it by removing iPad support. This can't go on but I have no idea what causes it.

    Anyone have a clue?
     
  2. Epsilon_Delta

    Epsilon_Delta

    Joined:
    Mar 14, 2018
    Posts:
    258
    I am not going to give you a definitive answer because I don't quite understand what is going on, but to layout your UI to encompass all the possible aspect ratios and notches etc. is not always so trivial. The most important part is to set CanvasScaler properly, then sometimes you need to anchor you RectTransforms properly and sometimes even use AspectRatioFitter (tough probably not in you case). Those are basic and the most important parts, so take a deep dive on them, start e.g. here:
    https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/HOWTO-UIMultiResolution.html
    Then you can change aspect ratios directly on your Game tab in UnityEditor to see how it all behaves under various conditions. In newer versions, you can even use Device Simulator package to test notches and camera cutouts etc.
     
    Kurt-Dekker likes this.
  3. Kurt-Dekker

    Kurt-Dekker

    Joined:
    Mar 16, 2013
    Posts:
    38,520
    Agree with ED: I usually set the CanvasScaler to Scale with ScreenSize, but then I do not use Expand, since with these whacko-long phones like iPhoneX, etc. things get out of control fast.

    I usually pick Match Height 1.0 because that maps well for font size consistency.

    For controls I anchor a fixed aspect ratio RectTransform anchored at the bottom and put all my UI in that, anchored to that smaller box.

    Use the custom resolutions that you can set in the Game window to prove everything out before you submit.
     
  4. StarGamingNetwork

    StarGamingNetwork

    Joined:
    Feb 2, 2015
    Posts:
    16
    I should mention, I've failed over 20 times with Apple for this, that I have tried all the combinations. I started with 1920x1080 (which the art was created for) matching height. Works perfectly on all the phones but not the iPad. Also works well with Android tablets.

    I cannot understand what the issue could be, especially as both buttons render at different sizes. This also doesn't happen an any of the other platforms.

    ButtonHeirachy.png \
    It's not a complicated UI. Original they were in a box but I removed it thinking that may be the problem. It was not. What do you mean by "a fixed ratio RectTransform", maybe that is my problem.

    Also the buttons all scale correctly in both the Game View and the Device simulator making things even odder. If this hadn't happen with other apps on iOS I simply just would not believe Apple.
     
  5. Kurt-Dekker

    Kurt-Dekker

    Joined:
    Mar 16, 2013
    Posts:
    38,520
    That seems excessive... What is the text of the actual complaint from them?

    Make something like this with a fixed aspect ratio (in this case 2:1, maybe you need 3:1 or whatever suits your buttons), and ALL your buttons anchored inside it to never move within that box:

    fixed_aspect_ratio_box.png

    then anchor that fixed against the bottom center (red dot below).

    On the ipad it looks like:

    ipad.png

    on the iPhone it looks like:

    iphonex.png
     
    Last edited: Jul 18, 2021
  6. StarGamingNetwork

    StarGamingNetwork

    Joined:
    Feb 2, 2015
    Posts:
    16
    The actual complaint is:
    We noticed an issue in your app that contributes to a lower quality user experience than Apple users expect:

    - Your app included controls that were difficult to use due to size or placement.

    Specifically, when we play the game the buttons get smaller and do not get larger as the game goes on. The buttons remain very small and are difficult to use.

    Please see attached screenshot for details.

    They then attached the picture of the buttons above. They are correct they are too small on the iPad and the one is microscopic.
     
  7. Kurt-Dekker

    Kurt-Dekker

    Joined:
    Mar 16, 2013
    Posts:
    38,520
    Pretty sure your issue is the Expand choice on the Canvas Scaler.

    Try it with this:

    Also, when you say this:

    Make a custom resolution for the offending resolution, such as 2048 x 2732 or even bigger, and if you see your buttons change size, fix them until they do not change size, probably by the above changes to canvas scaler.
     
  8. StarGamingNetwork

    StarGamingNetwork

    Joined:
    Feb 2, 2015
    Posts:
    16
    I made it through Apple Certification. As Kurt suggested the trick was an empty game object to hold them with an Aspect Ratio Fitter component on it.

    I still think it is a Unity bug affecting the iPad. It makes no sense and the solution had no visible difference in either the Editor Game View nor the Device Simulator. But it did work on the actual iPad.

    Thanks all!
     
    Kurt-Dekker likes this.