SOLVED: Game UI Button Size problem

In my iOS app I’m having problems with the button sizes on the iPad. Keeps failing certification.

From Apple:
7336726--891718--iPadButtons.png

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

In the Device simulator.
7336726--891721--EditorButtons.png

The canvas:

The Buttons:

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?

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.

1 Like

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.

1 Like

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.

7337329--891829--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.

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:

7337383--891847--fixed_aspect_ratio_box.png

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

On the ipad it looks like:

7337383--891850--ipad.png

on the iPhone it looks like:

7337383--891853--iphonex.png

How to make canvas exempt from resolution scaling?
[2D] Resolution Scaling Problem
GUI Inconsistencies
Why arent my UI elements not Showing?
Resolution/Aspect Ratio problem
Adjusting the UI made for 16:9 on devices that are using 18:9 screens
Inconsistent behavior at different resolutions and window sizes
Localization messing up my UI Layouts
UI not scaling width properly
HUD not showing on build
Game for mobile wrong canvas reference resolution| panel not showing when strarting game
Why the view in build is different from the editor one? How can I solve it?
Help with a button not appearing in game mode
Camera to cover entire screen? (916663)
Build is showing nothing but the same UI screen duplicated and inverted.
UI appearing way too big in build
Child Object Scale Changing with Resolution Issue
How to create sliding game area?
Moving Something separate times with one script
Why my leantween animation works in Unity editor but not on my Android device
The game is changing when I change from Windows to Android
Dynamic Scale resolution windows and SceneView Custom UI
[SOLVED] After updating to 2022, why does my UI always look like this on launch?
If I change the size of the Editor window / Scene panel, the Canvas changes size. Fixable?
UI elements moving for seemingly no reason (916777)
Responsive Background Image
How to make UI pixels the same size as other asset pixels?
How to find the exact centre of the canvas/screen
Scaling text / textboxes to screensize
GameObjects appearing in Editor but not in Build (disappearing) Problem.
How to autoscale the game view like UI ??
Text showing in Scene view but not Game view
UI elements (canvas, TMP,...) are at different location depending on OS build. Why?
How to create raw images on scroll view and position the raw views in the middle with gaps dynamic ?
Positions bound to percentage
TextMeshPro&Button in a Panel is behind Images from another panel
App orientation options
My text in canvas disappear when resizing
Handling Sizings for different Device Idioms
TextMeshPro not appearing in my scene when I press play.
Prevent Dialogue Spam for Unity UI
Unity Play Screen/Aspect issue
Large images lose quality in Unity when downscaled
I need help to create billboards
Instantiating objects into canvas Position problem?
Left corner and tablet parameters
Need help with dropdown UI
Converting a Landscape (1920 X 1080) texture into a Portrait mode (1080 X 1920) texture
Canvas scaler doesn't scale prefab instance
How can I scale a sprite to fit screen width
I need help (882357)
Adjusting rect transform with sreen resolution
Objects appear in Editor but not on phone
Maximizing game window in editor messes everything
Unity and mobile screen resolutions and settings
UI How to DONT open multiple UI?
Objects on the phone are sometimes on a totally wrong place
Problem with some Canvas Images on Android
When i move The tabs on the side, all my objects move.
how to add text contained in a string list to a scroll view
Scale image to the screen size
Object position compared to UI
Unity Scaling Entire Game Build to different aspect ratios (Not canvas scaler?)
How To Position Something In the Same Spot on the UI No Matter the Resolution
Can't let Text block the text of the other card
UI in the editor is different from Build
Going crazy with creating UI tables
Gameobject to stay relative to camera regardless of screen size.
Same project, different visualization
BUILD ADDITION NUMBER
Make Image dynamically resize width to height
get these positions on scene view gui ?!!!
UI Covering Screen
UI element gets rescaled by Unity?
Unity UI Scale With Screen Size Not Working With Aspect Ratios
Automatic resizing UI layout during runtime based on new content
Is there a better way? (926145)
How to properly set up scalable and responsive UI?
Resolution gets messed up after build
Canvas doesn't appear to apply the entire screen
How to make menu background for different screen proportions? 5:4 and 16:9
Game appear stretching in orientation Portrait
Issue when changing resolution in game
UI elements are not positioned as intended when I build my game
Unity UI smaller than game in one scene and larger in another after building
Wrong position of TextMeshPro in a 2D Game
Instantiated Ui elements don't scale with canvas?
Debug Scene tree at runtime in game build, remotely from the editor
I have three related questions about cameras and device resolutions...
Red Xs instead of UI
Game View in Editor Acting Weird...
How do I get a UI object's size to be the same on all resolutions?
Vertical Layout Group causing UI objects to collapse in on themselves
How to do child canvas content must be aligns it's parent content with out overflow in unity.
2D project, Sprite tiny in Scene, normal in Game, absent in Build?
Issue with transform.position.x not working
How to adjust settings for different aspect ratios?
Resolution problem when Build
How to fit Unity game on different screen sizes?
Display problem on mobile device
Canvas problem (912864)
Different camera view used in preview window and when game is built and running
No image for buttons shows in Build
positions keep resetting incorrectly
Textures are messed up when switching to ios platform.
having problems with scale and position in webgl
Can't get correct size of image with different resolution
Struggling with populating a scroll view with a list of buttons
HD HUD with Pixel Perfect Camera & Windowboxing (Like Celeste)
Newbie here. I have a problem with scaling i thin
Place objects in different resolutions of the canvas
Sprites doesn't scale as canvas.
Sprite vs UI for character customization/selection and prefab
¿Algún script para reconocer si el videojuego usa tablet o celular?
Why all the items in the Canvas reseting the coordinate Y?
Why does this always happen to me?
Aspect Ratio issues with UI in Unity
BUG. Canvas UI elements are shifted after unity editor reopen. LTS
Need help (Beginner)
UI Objects - in game mode are not on same position as pausemode. Bug? Or did I make a mistake?
UI gets bigger in the editor
Portrait Mode Canvas On Landscape View
When I build my game in a lower resolution, it crop parts of the game screen instead of reducing it.
Designing UI for Mobile in 2023 (925313)
Issues with cameras, buttons and TextMeshPro.
How to lock screen ratio? Unity2d
Problems with UI scaling on build
[2D] Resolution Scaling Problem
What is the best way to create 3 objects relative to each other?
Dialoguebox looked correct in Editor, but excessively huge in Build Version
Displaying player marker on UI map with varying world/scene size
I can't change the UI image canvas Scaler scale mode
UI elements are stretching on wide screens
Two crosshairs in a splitscreen game
Blank screen/UI disappearing
Help: Moving a panel from the right edge of the screen 25% of the screen size to the left
2D orthographic camera + world-space container fits in Editor but overflows on android build
Canvas scaling problems. (Images/objects in canvas not scaling correctly)
Aspect ratio
Device simulator vs regular game
Image.rectTransform Y Adding Random Values
How can people make their games look the same on all phones?
Need help.
How can I ensure pixel-perfect scaling between UI buttons and game objects in Unity?
Game View DPI
How to set screen sizes for all devices
Question About Unity Layout
How to keep rect transform points glued to its anchor points?
Unity UI Scaling Issue: Children Not Resizing with Parent Container
Advices for screen ratio-based 2D gameplay (WebGL)
UI position looks weird
How to move empty GameObject to a Canvas?
How do you make responsive mobile games that take safe areas into account and scale game world appropriately?
Hexagon system for word game
Scene is cut, maybe camera problems?
Slight Game Object Position Difference Between Resolutions/Screens
Buttons won't open in the panel
How to make object in Canvas space themself and center on a line
How to Prevent Resolution Stretching on Android?
Best Way to Structure Wikipedia-like System
UI Button Hitbox changes when adjusting resolution, but button font remains the same. [See Video] How to have proper scaling of button hitbox?
Build Missized
Does the aspect ratio 16:9 in Unity for a game will be the same on all devices?
Game cutting off when built
What is the order of hierarchy for the layers in a Canvas GameObject?
I am new to 2d unity gamedev. I don't know how to set my scenes
Bottom left anchor changes child object position?
Maintain a certain order when switching to landscape view
How to Develop Cross Platform Games
Problem with UGUI canvas coming from an overlay Camera
Input fields contained within a panel object for a 1080 by 1920 mobile game
Some Ui things won`t show up ,
How to set and fit the ui texts with full screen in unity version 6?
Unity UI Canvas Scale for phones and Tablets
UI text very small on first menu load
New To Unity - Scale Game To Fill Current Window Size Or Full Screen Size While Keeping Aspect Ratio?
I can't edit rect transform in the inspector
Rendering problems using One Plus 8T
TextMeshProUGUI display issue only on WebGL Builds [6.0.32f1]
How to fix black screen when using canva world space

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.

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.

1 Like

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!

2 Likes