Search Unity

  1. We are migrating the Unity Forums to Unity Discussions by the end of July. Read our announcement for more information and let us know if you have any questions.
    Dismiss Notice
  2. Dismiss Notice

What Reference Resolution and Game View Settings Should I Use?

Discussion in 'UGUI & TextMesh Pro' started by CodeRonnie, Apr 6, 2021.

  1. CodeRonnie

    CodeRonnie

    Joined:
    Oct 2, 2015
    Posts:
    538
    After reading my post here, someone reached out to me for help with their UI settings. So, I thought I would document some of that process, in case it is helpful to others. Ultimately I will answer two questions here, for mobile platforms:

    What should I set for my Canvas Scaler Reference Resolution? (1080 x 1440)
    &
    What resolutions settings should I add to my Game View for testing?

    1125 x 2436 (~9:19.5) (iPhone X)
    360 x 780 (~9:19.5) (Low Res)

    1440 x 2560 (9:16) (Google Pixel XL & Many Others)
    1080 x 1920 (9:16) (iPhone Plus)
    750 x 1334 (~9:16) (iPhone)
    414 x 736 (9:16) (Common Mobile Resolution, Low Res)
    360 x 640 (9:16) (Common Mobile Resolution, Low Res)

    1050 x 1680 (10:16)

    2048 x 2732 (~3:4) (iPad Pro 12.9")
    1668 x 2224 (3:4) (iPad Pro 10.5")
    1536 x 2048 (3:4) (iPad Pro 9.7"/Air2/Mini4)

    If you would like to know why these are my answers, then please read on, and let me know what you think!

    WARNING! This entire guide was made to help someone developing for a PORTRAIT ORIENTATION! Everything here is also true for landscape orientation, just make sure to flip everything in your mind. ;) i.e. 9:16 = 16:9, 1080x1920 = 1920x1080. When we talk about the screen width being our locked axis in portrait, rotate that phone! Height is our locked/important axis for landscape orientation!

    Also, if you don't read the other post, TL;DR, Canvas Scaler Screen Match Mode = Match Width for Portrait, Match Height for Landscape.
     
    halley, AlfieBooth, Meowy and 8 others like this.
  2. CodeRonnie

    CodeRonnie

    Joined:
    Oct 2, 2015
    Posts:
    538
    First of all, we should look at the real world, and understand what devices users might be using to run our game. Here are some quick Google search results sorted, supposedly, by popularity / market share, except the iOS device list.

    https://developer.apple.com/library...iOSDeviceCompatibility/Displays/Displays.html
    iPhone X 1125 x 2436
    iPhone 8 Plus 1080 x 1920
    iPhone 8 750 x 1334
    iPhone 7 Plus 1080 x 1920
    iPhone 6s Plus 1080 x 1920
    iPhone 6 Plus 1080 x 1920
    iPhone 7 750 x 1334
    iPhone 6s 750 x 1334
    iPhone 6 750 x 1334
    iPhone SE 640 x 1136
    iPad Pro 12.9-inch (2nd generation) 2048 x 2732
    iPad Pro 10.5-inch 2224 x 1668
    iPad Pro (12.9-inch) 2048 x 2732
    iPad Pro (9.7-inch) 1536 x 2048
    iPad Air 2 1536 x 2048
    iPad Mini 4 1536 x 2048

    https://gs.statcounter.com/screen-resolution-stats/mobile/worldwide
    360 x 640 11.26%
    414 x 896 7.84%
    375 x 667 6.02%
    360 x 780 5.94%
    360 x 760 5.13%
    375 x 812 5.02%
    412 x 892 3.55%
    360 x 720 3.47%
    393 x 851 3.24%
    414 x 736 2.88%
    412 x 869 2.88%
    412 x 846 2.53%
    360 x 740 2.26%

    https://deviceatlas.com/blog/most-used-smartphone-screen-resolutions
    1080 x 1920 19.59%
    750 x 1334 15.67%
    720 x 1280 14.39%
    1440 x 2960 8.85%
    1440 x 2560 5.89%
    1125 x 2436 4.6%
    640 x 1136 3.84%
    1080 x 2160 3.51%
    540 x 960 2.74%
    720 x 1440 2.25%

    https://w3codemasters.in/most-common-screen-resolutions/
    360 × 640 21.9%
    1366 × 768 11.67%
    1920 × 1080 8.41%
    375 × 667 4.92%
    1440 × 900 2.96%
    768 × 1024 2.49%
    1600 × 900 2.37%
    1280 × 800 2.26%
    414 × 736 2.25%
    1536 × 864 2.2%
    720 × 1280 2.03%
    1024 × 768 1.84%
    320 × 568 1.8%
    1280 × 1024 1.72%
    320 × 570 1.55%
    412 × 732 1.43%
    320 × 534 1.42%
    360 × 720 1.39%
    1280 × 720 1.38%
    1680 × 1050 1.17%
     
    Last edited: Apr 7, 2021
    Meowy, jacobbirge, blurie and 2 others like this.
  3. CodeRonnie

    CodeRonnie

    Joined:
    Oct 2, 2015
    Posts:
    538
    Now, lets break that raw data down into aspect ratios to see what we learn.

    Legend:

    Taller (Smaller Number)
    9 / 19.488 = 0.462 (iPhone X)
    9 / 16 = 0.5625
    10 / 16 = 0.625
    2 / 3 = 0.666
    3 / 4 = 0.75
    4 / 5 = 0.8
    Shorter (Bigger Number)

    ~ Rounded Number

    https://developer.apple.com/library...iOSDeviceCompatibility/Displays/Displays.html
    iPhone X 1125 x 2436 ~0.462
    iPhone 6/7/8 Plus 1080 x 1920 0.5625
    iPhone 6/7/8 750 x 1334 ~0.5622
    iPhone SE 640 x 1136 ~0.5634

    iPad Pro 12.9" 2048 x 2732 ~0.75
    iPad Pro 10.5" 1668 x 2224 0.75
    iPad Pro 9.7"/Air2/Mini4 1536 x 2048 0.75

    https://gs.statcounter.com/screen-resolution-stats/mobile/worldwide
    360 x 640 0.5625
    414 x 896 ~0.462
    375 x 667 ~0.562
    360 x 780 ~0.462
    360 x 760 ~0.474
    375 x 812 ~0.462
    412 x 892 ~0.462
    360 x 720 0.5
    393 x 851 ~0.462
    414 x 736 0.5625
    412 x 869 ~0.474
    412 x 846 ~0.487
    360 x 740 ~0.486

    https://deviceatlas.com/blog/most-used-smartphone-screen-resolutions
    1080 x 1920 0.5625
    750 x 1334 ~0.562
    720 x 1280 0.5625
    1440 x 2960 ~0.486
    1440 x 2560 0.5625
    1125 x 2436 ~0.462
    640 x 1136 ~0.563
    1080 x 2160 0.5
    540 x 960 0.5625
    720 x 1440 0.5

    https://w3codemasters.in/most-common-screen-resolutions/
    360 × 640 0.5625
    768 × 1366 ~0.562
    1080 x 1920 0.5625
    375 × 667 ~0.562
    900 x 1440 0.625
    768 × 1024 0.75
    900 x 1600 0.5625
    800 x 1280 0.625
    414 × 736 0.5625
    864 x 1536 0.5625
    720 × 1280 0.5625
    320 × 568 ~0.563
    1024 x 1280 0.8 <- This is a computer monitor resolution.
    320 × 570 ~0.561
    412 × 732 ~0.563
    320 × 534 ~0.6
    360 × 720 0.5
    1050 x 1680 0.625


    What do we notice? Well, these are essentially the only aspect ratios we need to worry about. Even 10:16 is really just a computer monitor resolution that slipped in there, but we'll keep it just because it's between 3:4 and 9:16.

    ~0.462 - 9:19.488 - iPhone X (Tallest)
    0.5625 - 9:16 (Most Common)
    0.625 - 10:16 (Noteworthy)
    0.8 - 3:4 - iPads (Shortest)

    Right away I would say that these are essential Game View Settings:

    1125 x 2436 (iPhone X)
    9:16
    10:16
    3:4
     
    Last edited: Apr 7, 2021
    ROBYER1, Meowy, jacobbirge and 3 others like this.
  4. CodeRonnie

    CodeRonnie

    Joined:
    Oct 2, 2015
    Posts:
    538
    Can we clean up some of this raw data? It's too much!

    9:19.488
    --------
    1125 x 2436 (iPhone X)
    414 x 896
    412 x 892
    393 x 851
    375 x 812
    360 x 780

    9:16
    ----
    1440 x 2560 (Google Pixel XL & Many Others)
    1080 x 1920 (iPhone Plus)
    900 x 1600
    864 x 1536
    768 × 1366
    750 x 1334 (iPhone)
    720 x 1280
    640 x 1136
    540 x 960
    414 x 736 (Common Mobile Resolution)
    412 × 732
    375 x 667
    360 x 640 (Common Mobile Resolution)
    320 × 570
    320 × 568

    10:16
    -----
    1050 x 1680
    800 x 1280
    900 x 1440

    3:4 (iPads)
    ---
    2048 x 2732
    1668 x 2224
    1536 x 2048
     
    Last edited: Apr 7, 2021
    Meowy, blurie and Bakanovskiy95 like this.
  5. CodeRonnie

    CodeRonnie

    Joined:
    Oct 2, 2015
    Posts:
    538
    Okay, so, what Reference Resolution?!

    Shortest aspect ratio (iPad/3:4), but with a pixel value on the locked axis that is near to our other important pixel resolutions (phones):
    (Height = desired reference width * 1.333)

    1080 x 1440 <-(This one IMHO) (Common 9:16 reference width, medium res.)
    1125 x 1500 (iPhone X reference width.)
    1440 x 1920 (Pixel XL reference width.)


    What Game View Settings?

    9:19.488
    1125 x 2436 (~9:19.5) (iPhone X)
    360 x 780 (~9:19.5) (Low Res)

    9:16
    1440 x 2560 (9:16) (Google Pixel XL & Many Others)
    1080 x 1920 (9:16) (iPhone Plus) (9:16 Version of Reference Resolution)
    750 x 1334 (~9:16) (iPhone)
    414 x 736 (9:16) (Common Mobile Resolution, Low Res)
    360 x 640 (9:16) (Common Mobile Resolution, Low Res)

    10:16
    1050 x 1680 (10:16)

    3:4
    2048 x 2732 (~3:4) (iPad Pro 12.9")
    1668 x 2224 (3:4) (iPad Pro 10.5")
    1536 x 2048 (3:4) (iPad Pro 9.7"/Air2/Mini4)
    1080 x 1440 (3:4) (Reference Resolution)
     
    Last edited: Apr 7, 2021
    Meowy, blurie, DarkDeivel and 3 others like this.
  6. CodeRonnie

    CodeRonnie

    Joined:
    Oct 2, 2015
    Posts:
    538
    I hope that helps! Let me know what you think.
     
  7. berniegp

    berniegp

    Unity Technologies

    Joined:
    Sep 9, 2020
    Posts:
    42
    Great write-up!

    I'd like to add that the device simulator package can be really useful for previewing the game on different mobile devices.

    edit: Also don't forget to set up the editing environment for UI prefabs. The "default scene" used for this won't have the proper canvas scaler configuration otherwise.
     
    Last edited: May 31, 2021
  8. CodeRonnie

    CodeRonnie

    Joined:
    Oct 2, 2015
    Posts:
    538
    Thank you! I had hoped at least one person would find it useful! :D Thank you for your great tips! Please repurpose and spread this info around however you like. If it can help someone make their game better, that makes me happy.
     
    tantx, Lisk, mimiCryMuffin and 4 others like this.
  9. FeedMyData

    FeedMyData

    Joined:
    Oct 19, 2013
    Posts:
    4
    Hi,
    Thanks for the sum-up. But I want to mention that there is narrower screen than 9:19.5. I just discovered that there is some 9:20 phone and even 9.21. 9:21 is for ultra wide video and it did not manage to breakthrough the market, but 9:20 is very likely to become a common ratio. Therefore I would recommend to always test it and to make your UI work in it.
    (A few phones from 2021 are having this spec: https://www.gsmscore.com/model-finder/aspect-ratio/20-9/)

    I would not discard them and ignore them because they have a low market share today. It will change.

    I would always take a middle common point to create the UI (9:16) and then test the extreme ratio like 3:4 and 9:20..
    Actually, I'm not even sure if 9:16 for mobile in three years will still be relevant if you target high ends phones.
     
    Nomad1108, tantx and CodeRonnie like this.
  10. YousafGrewal

    YousafGrewal

    Joined:
    Jul 5, 2018
    Posts:
    36
    Here is my game resolution and and reference resolution works almost well on every device in simulator


    upload_2024-5-10_16-41-15.png
     
  11. Huminaboz

    Huminaboz

    Joined:
    Mar 12, 2013
    Posts:
    7
    Thanks for this write up!

    How did you get this formula?
    (Height = desired reference width * 1.333)
    I couldn't follow how that came out of the iPad resolution.

    Also, I was using an aspect ratio calculator and fed it all of the most common screen sizes, looked for patterns to make a "close enough" list of ratios to test for and came up with this list of test resolutions:
    .45:1 - 9:20
    .46:1 - 6:13
    .56:1 - 9:16
    (converted from decimals because Unity doesn't allow decimals in the aspect ratios for the Game view)
     
    CodeRonnie likes this.
  12. CodeRonnie

    CodeRonnie

    Joined:
    Oct 2, 2015
    Posts:
    538
    So, I am using a 4:3 ratio (landscape), or 3:4 (portrait) as your reference ratio because it's the most narrow you expect to realistically support. And, again my reasoning for that is that it's better to design for the smallest aspect ratio where everything is pushed together, and then worst case scenario, everything just spaces out on wider/taller ratio screens. In my humble opinion that's better than designing for a tall/wide layout, and then everything runs together and overlaps on a shorter/narrow screen if something is wrong. And of course that's just to prevent worst case / UI bugs, we use anchors along that axis to stretch out elements if desired, not just space out. If we have our desired reference width (because we are designing a portrait layout with screen match mode set to 100% match width), let's say we'll use 1080 as the reference "pixels" (really just virtual pixels at design time, scaled to device at runtime.) So, we want to decide what the virtual pixel reference height would be for a 3:4 aspect ratio.

    So, we have 3/4 = 1080/x and we want to solve for x. We multiply both sides by x to get 0.75(x) = 1080. Then we divide both sides by 0.75 to get x = 1440. Or, basically any reference width divided by 3/4 or 0.75 gives us the other half of the reference resolution for our minimum supported aspect ratio. So, if we divide 1 / 0.75 we get 1.333 repeating. But, that answer is a bit backwards for your question. We could do the same kind of equation like this to get the same answer 4/3 = x/1080. 4/3 = 1.3333 repeating. So, any chosen reference width (for portrrait orientation) multiplied by 1.3333 gives us the matching reference height for a 3:4 ratio. You just have to figure out that number based on your most narrow supported aspect ratio (which technically could be 4:5, not 3:4, in which case the scalar would be 1.25 of your chosen reference width, not 1.333).
     
    Last edited: Jun 21, 2024 at 4:57 PM
  13. halley

    halley

    Joined:
    Aug 26, 2013
    Posts:
    2,589
    SteamDeck LCD (up to 60fps)
    SteamDeck OLED (up to 90fps)

    Native Resolution 1280x800 (16:10)
    HDMI Resolution 1280x720 (16:9 HD)

    HDMI could be other resolutions but that's the default and expected for consoles.

    In my experience, don't try to set resolution until at least Time.frameCount >= 2 on startup, or Unity Windows sometimes returns 800x1280 due to some quirk of the portrait hardware filtering through Proton compatibility. Unity Linux builds don't seem to have the same problem.