Scaling Background Image with Unity 2D

Unity makes it easy to develop for multiple platforms at once, and the Unity 2D toolkit makes creating 2D games pretty straight forward.  But one piece that can often causes problems is ensuring that your game looks the same across platforms/devices.  There is a wide variety of aspect ratios and screen sizes among phones and tablets, and it can be difficult to properly scale your game to them.  This tutorial will walk you through creating a background image for your 2D game and ensuring it properly covers all screens.  It also assumes you have some basic knowledge of how to use and navigate Unity.

Our basic approach will be as follows:
1. Create an image of 800x600 to use for the background.  We will be creating it to fit some of the smallest screens, and then scaling up.
2. Import this into your Unity project.
3. Add in a scaling factor for the background sprite.
4. Adjust the orthographic size of the camera.

First, create a new 2D Unity project and a new scene.  Now create (or find) an 800x600 image to be used for the background.  I used paint.net to create my background.

Add the image to Unity as a sprite with a 'Pixels To Units' value of 100.  To do this, simply drag and drop it into the Assets folder, then click on it and adjust the values in the 'Inspector' view to match the following:

Now create a new sprite in your scene.  You can do this via the hierarchy or GameObject->create other->sprite.  Drag your image from the Asset view to the 'Sprite' field of the 'Sprite renderer' in the inspector of the new sprite you just created.  This is shown in the image below:

You now should see your background in the scene!! We are almost there, just 2 simple scripts left to go.  First, we will create the camera script.  In the hierarchy, select the 'Main Camera'.  Under the 'camera' section in the Inspector view, make sure your camera's 'Projection' field is set to 'Orthographic'.  Now click 'Add Component' and add a C# script named "MainCamera". We will use this script to set the orthographic size of the camera and to set the scaling factor for the background image.

Before the onStart() method, add in the following lines.  These will be the fields that we use to calculate the scaling factor and to inform other scripts of the scaling factor.

private static float background_width = 800.0f;

private static float background_height = 600.0f;

public static float pixelsToUnits = 100.0f;

public static Vector3 scalingFactor = new Vector3(

                                       Screen.width/background_width,                                             Screen.height/background_height,

                                       1.0f);

The first two fields are the width and height of our background image.  We created an 800x600 image, so we fill in those values here.  These must be 'static' because they are used to calculate the 'static' scalingFactor.  The next is the pixels to unit value.  This will be used to set the orthographic size of the camera later.  Finally, we calculate the scaling factor.  This will give us a factor to multiple our sprites by in order to make them properly fit on the device screen.  Note that as long as all of your sprites are created proportionally to the 800x600 background image, you can multiple your sprites by this same scaling factor and they will remain the same size relative to each other on any screen.

Now that we have set up the scaling factor, we must change the orthographic size of the camera.  The camera's viewing box is determined by a few factors.  The width varies with the aspect ratio, which is set automatically by taking the size of the screen you are currently using and dividing the width by the height.  The height of the viewing box is determined by the orthographic size.  The orthographic size is defined as half of the viewing box's height.  But this height is not measured in pixels.  It is instead measured in units.  If you have a screen of height 900 and a pixels per unit value of 100, you will want an orthographic size value of 4.5 ((900/100)/2) in order to see the whole image.

To do this, we will adjust the camera's orthographic size in the onStart() method using the formula:
(screen height) / (pixels per unit) / 2.

void Start() {
    camera.orthographicSize = (Screen.height / pixelsToUnits ) / 2;
}

Now the camera will adjust properly to the screen when the game starts.  The last piece is to ensure that the background image scales to the screen correctly.  To do this, select your background sprite in the hierarchy and create a new c# script component.

In the onStart() method, add the following bit of code:
void Start () {
    SpriteRenderer sr = GetComponent<SpriteRenderer>();
    transform.localScale = MainCamera.scalingFactor;

}

These few lines first get the SpriteRenderer associated with the background sprite, and then scales the sprite based on the scaling vector we created in the MainCamera script.

That's it! You now have a background image which will scale to any size device screen.