0
\$\begingroup\$

I'm trying to create an endless runner type game where once the player dies, a popup opens letting the user know that the player can be saved by watching an ad. This is how the popup looks in the game window (image on the left). There is some space between the popup and the background. One the right is the canvas data with UI mode set as scale with screen size and reference resolution. In the display(in the game view) I have selected 1920x1080 Portrait.

screenshot1 screenshot2

However when I run the game on my phone (nord 2001) the popup is getting clipped from the sides. When the UI scale mode is set as "Scale with Screen Size", shouldn't it look the same on all devices as it does in the game mode i.e there should be some gap between the popup and the background. Can someone please help me with this? enter image description here

\$\endgroup\$
1
  • \$\begingroup\$ What is the exact resolution of your nord 2001 phone? The Canvas Scaler option Screen Match Mode even says Match Width OR Height, if the difference between your target and reference is not in the same ratio, it has to pick something. You might want to play with the Match slider more in the direction of Width \$\endgroup\$
    – Zibelas
    Dec 12, 2022 at 13:57

1 Answer 1

2
\$\begingroup\$

The OnePlus Nord AC2001 has a 2400 x 1080 display. This is significantly taller than the resolution you're previewing in the game view (20:9 vs 16:9)

Because you've configured your Canvas Scaler to "Match Width or Height", with a 50/50 blend between the two, anytime the game is running on a taller screen, Unity will uniformly scale up the UI to fill about 50% of that extra height. That means it ends up a little wider than you want.

If you want Unity to match the width instead, to keep the left and right margins in the exact proportions you expect, move the Canvas Scaler's slider all the way to the "Width" side. But this will mean that you'll tend to get larger vertical gaps on taller screens.

This turns out to be a hard problem: different aspect ratios need different layouts, and a simple scaling system can't always make all the changes you want automatically. You'll have to design for a range of resolutions using both the scaling features and the anchoring and dynamic layout features that the UI system gives you.

If you have trouble achieving this, try making a mock-up of what you want your UI to look like at different resolutions and aspect ratios, then ask for tips for how to set up your UI so that it adjusts itself that way.

\$\endgroup\$
1
  • \$\begingroup\$ thanks for the response. After a bit of googling, I came across this video "youtu.be/TAlpW_bgjB8". I downloaded the package and it seems to be working fine so far as the UI components stay within the safe area. Plus there is one option in player settings->Resolution and Presentation-> Render Outside Safe Area. I have unchecked this and the UI components seem to be within the screen. It seems to be working in the device smulator. But I still have to test this on my device. \$\endgroup\$ Dec 13, 2022 at 8:59

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .