How to Work With Different Screen Resolutions

Question

I'm using Unity 4.3.3 for my game. I'm making a game for Android and iOS devices. Since I'm pretty new to unity, I can't seem to find a way to work with different screen resolution. I'm using c# for my scripts.

I want my game to run full screen. I've tested it on iPad 2 and it runs perfect but for iPhone 4 the sides are clipped and for iPhone 5 they are clipped even more. What is the solution? Which option should I choose under Player Settings > iOS > OtherSettings > Target Resolution?

Solution 1

unity changes its ingame camera to match the dimensions of the aspect ratio of the screen it's using. Obviously this isn't always desired, so there's a couple of ways around this:

1) First method is very easy to implement, though it rarely looks good. You can simply change the camera's aspect ratio to match the one you've designed your game around. So if for example you've designed your game at 4:3, you'd do something like this:

Camera.aspect = 4f/3f;

Just keep in mind that this will distort the game on different aspect ratios.

2) The other method is a little more complex, but the result looks much better. If you're using an orthographic camera, one important thing to keep in mind is that regardless of what screen resolution is being used, the orthographic camera keeps the height at a set value and only changes the width. For example, with an orthographic camera at a size of 10, the height will be set to 2. With this in mind what you'd need to do is compensate for the widest possible camera within each level (for example, have a wider background) or dynamically change the Orthographic Size of the camera until its width matches what you've created.

GUI components are easier to implement simply by setting their position to depend on the screen resolution wherever needed. For example if you want a button to appear in the top right corner, you simply set its position to something like position = new Vector2(Screen.width - 50, 50);

EDIT: Since you mentioned devices you used, I did a bit of looking up to find what aspect ratio each one uses: Ipad2 = 4:3 , Iphone4 = 3:2, and Iphone5 = 16:9

Since you said it looks perfect on the Ipad2, I'm guessing you've designed your game to use a 4:3 aspect ratio, so the "clipping" you mention is just that your orthographic camera has widened. The solution is to use one of the two methods I described above.

You can see how it will look on each device within the unity editor fairly easily. If you go to the game tab (what pops up when you press play in the unity editor), you'll see it has a device name, along with a resolution and aspect ratio. Changing this will let you see what it will look like at different aspect ratios.

Solution 2

You may want to try capturing the device resolution by using Camera.ScreenWidth and Camera.ScreenHeight.

Then do some math to calculate the difference from the resolution you have and apply it to the parent object.

This will scale everything bigger/smaller to fit the device resolution without having multiple image resolutions etc for different resolution devices.

Solution 3

You need to change camera viewport according to device's aspect ratio. Suppose you made the game for 720x1080

Then in the script you should do

float xFactor = Screen.width / 720f;
float yFactor = Screen.height  / 1080f;

Camera.main.rect = new Rect(0,0,1,xFactor/yFactor);

Or

The another way is, if you are making a game for aspect ratio 9:16 then

Do this in your script,

public float targetRatio = 9f/16f; //The aspect ratio of your game
void Start()
{
    Camera cam = GetComponent<Camera>();
    cam.aspect = targetRatio;
}

Solution 4

If your goal is to get the previous width:

[RequireComponent(typeof(Camera))]
public class ResizeCamera : MonoBehaviour 
{
    private float   DesignOrthographicSize;
    private float   DesignAspect;
    private float   DesignWidth;

    public  float   DesignAspectHeight;
    public  float   DesignAspectWidth;

    public void Awake()
    {
        this.DesignOrthographicSize = this.camera.orthographicSize;
        this.DesignAspect = this.DesignAspectHeight / this.DesignAspectWidth;
        this.DesignWidth = this.DesignOrthographicSize * this.DesignAspect;

        this.Resize();
    }

    public void Resize()
    {       
        float wantedSize = this.DesignWidth / this.camera.aspect;
        this.camera.orthographicSize = Mathf.Max(wantedSize, 
            this.DesignOrthographicSize);
    }
}

Solution 5

Ok, this is a big question. Many people have referred to forcing an aspect ratio, which is a good solution to consider. However for many games this is not appropriate. For many game designs, you want the game to feel like it's native to the device/screen it's running on, and you want to use every square inch of screen real-estate you can. To do this, you must build and test every system in your game for different sized and shaped screens. It's a very similar problem to building apps and websites for multiple devices.

Screen Size

The screen size can be retrieved programmatically using the DPI and the resolution with a statement such as:

Resolution res = Screen.currentResolution;
float screenSquareInches = res.width * res.height / Screen.dpi;

For the content on the screen that is viewed through the camera, there's only one variable that needs to be scaled, and that's the size of the camera (or how much stuff in the game world that will be squeezed onto the screen). You can control the size of the camera with the field of view for 3D games or the orthographic size for 2D games. Only testing will say what equation supports the widest range of screen sizes, but something along these lines could serve well:

// this should be a tweakable number, so you can fine tune it to your needs. It represents the screen size at which the camera size should not be scaled at all
float expectedScreenArea = 20;
// this number should also be tweakable, which declares how much smaller/larger text can get depending on the screen size. Generally larger screens are viewed from farther away, so scaling should be slight
float cameraScalingRate = 0.25f;
// multiply this number by the default/base camera size you have picked, whether that's field of view or orthographic size
float cameraSizeMultiplier = 1 + (screenSquareInches / expectedScreenArea - 1) * cameraScalingRate;

Ok, that should get you most of the way on scaling the game world, but what about UI elements, things like text, HUD, and on-screen controls? Well, for elements like text, the above equation should work decently well, though you might want a different value for the scaling rate. For on screen controls, you might want a more full transformation, such as joysticks moving to the bottom corners of the screen on a tablet rather than centered on the sides, or if it's not a touch screen device, remove on-screen controls altogether. That's outside the scope of this question.

Screen Aspect Ratio

The aspect ratio of the screen (how wide vs. tall is it) is also important and needs it's own handling. Generally the best way to do this is to freeze the vertical height of the screen, so that as the screen gets wider, elements on the screen are not scaled, but as the screen gets taller, elements on the screen scale proportionally to how much taller the screen grows. This is already the default behavior for cameras, but for UI elements you have to set it as such. This is relatively easy if you are using the new UI system with canvas'. On a CanvasScalar component, there's a property that controls how the elements are scaled depending on the aspect ratio. Change this to match width or height, and have it match height.

For Further Consideration

With supporting different screen sizes and shapes there's more to consider than just making everything fit. You also need to make sure you game plays well on the different screens. This ranges from things as subtle as not making the player feel claustrophobic on a small screen to making sure enemies can't shoot at the player if they're off screen to making sure you update boundaries that keep elements on screen. Another thing to consider if this is a PC game is that someone might plug their computer into a different screen or change the resolution on the fly. With this in mind, it can be good to rerun the above equations as needed so a player doesn't have to exit the game to get things lining up right again.

View more solutions

Comments

[Ashish Beuwria]

Thanks Steven for such a detailed answer, But I want to play my game on fullscreen mode on all devices. I've edited my question for what I exactly want. How can I do that?

[Steven Mills]

@AshishBeuwria I've edited my answer to reflect the new information you provided. The two solutions I mention still seem to be what you need to do in order to fix your problem. The black bars you're seeing on the sides of the screens for your iphones is just because your screen is wider, thus the ingame camera is wider.

[Ashish Beuwria]

But I'm using a perspective camera not an orthographic one.

[Zeeshan Anjum]

much better way to make dynamic GUI, I think size and position should be calculated only on onStart() method unless you want to make support for both landscape and portrait, then check Screen.orientation on LateUpdate method because it wouldn't be efficient to calculate Rect or unnecessary checks on onGUI method.

[Johny]

Hello @a_m_dev, do you know how to set the target resolution (with the current screen resolution) and also how to set the targets aspect ratio for that?