Designing for iPhone X + new aspect ratio (18.5:9)

Unity Engine
1

Hey everyone!

I’m a UI designer for a 2D app, QuizJam.

With the new aspect ratio coming out (S8 + Google Pixel 2) and designing for iPhone X, I’m having a little trouble figuring out what resolution I should be designing for myself.

Right now I use 640x1136, which works for all 16:9 devices.

I need both ideas on how to approach this from a design point of view as well as developers (How to auto scale the UI, and how to hide certain elements when on an iPhone X).

Thanks everyone!

2

Interesting. It’s sort of the opposite of an iPad where you have huge amounts of empty space on the left and right instead of on the top and bottom, assuming landscape.

Unless I misunderstand something, it seems like to me, you shouldn’t be thinking about hiding stuff when in 18.5:9, you should be thinking of coming up with something new to place into the extra 2.5 of space on the sides.

Have you seen this snippet of code yet? Attach it to your main camera(s) and it will letterbox/pillarbox everything outside of your target resolution and get your game as big as possible in the available space. On most resolutions, the empty space it creates are pretty negligible. The exception is iPad’s where it creates a big empty area on top/bottom.

The Unity UI system has everything you need to easily autoscale your dialog windows and fonts for all the main resolutions without really that much (or any) adjustment code. If you put your UI canvas in World Space, things adjust very nicely by themselves without having to add things like CanvasScalers and AspectRatioFitters.When you zoom in/out with the main camera, you will also automatically make the UI bigger/smaller.

    void Awake() {

        // set the desired aspect ratio (the values in this example are
        // hard-coded for 16:9, but you could make them into public
        // variables instead so you can set them at design time)
        float targetaspect = 16.0f / 10.0f;
  
        // determine the game window's current aspect ratio
        float windowaspect = (float)Screen.width / (float)Screen.height;
  
        // current viewport height should be scaled by this amount
        float scaleheight = windowaspect / targetaspect;
  
        // obtain camera component so we can modify its viewport
        Camera camera = GetComponent<Camera>();
  
        // if scaled height is less than current height, add letterbox
        if (scaleheight < 1.0f) {
            Rect rect = camera.rect;
  
            rect.width = 1.0f;
            rect.height = scaleheight;
            rect.x = 0;
            rect.y = (1.0f - scaleheight) / 2.0f;
          
            camera.rect = rect;
        }
        else {
        // add pillarbox
     
            float scalewidth = 1.0f / scaleheight;
  
            Rect rect = camera.rect;
  
            rect.width = scalewidth;
            rect.height = 1.0f;
            rect.x = (1.0f - scalewidth) / 2.0f;
            rect.y = 0;
  
            camera.rect = rect;
        }
    }
1 Like
3

Hi,

@RamboAz Did you find the solution. I am also having lots of Trouble with iPhone X & Samsung S9 & S9+ resolution

4

Hi,

@peterk1968 I tried your way but its not working in Portrait Mode can u elaborate little more…
Thanks in Advance