Scaling Sprites based on Screen Resolutions in Unity

July 27, 2019




While developing 2D games, there exist some scenarios where we want the sprites to fit the screen based on its current width such that the sprite scales exactly touching the screen’s left and right edge.
Unity has no native support for scaling a sprite based on the screen’s width. But there is a quick and easy workaround to this issue.

Getting the Screen’s width and height

In Unity, the sprites are in world coordinates. They don’t understand the position in screen pixels. In order to update the position or scale of the sprite, we need to convert screen point to world coordinate.
We will use the same principle to get the width and height of the screen in world coordinates.
I have created a simple script named ScreenSize.cs which has two static getters defined, which can be used to get the screen’s width and height for an orthographic camera
NOTE: This article explains scaling sprites for orthographic view only. It does not work for Perspective camera view.
using UnityEngine;
The script used the viewport to world point calculation to get the screen’s height in world units.

Scaling the Sprites

Now, we have the screen width in world units, now we will change the scale of the sprite to fit the screen width or height.

Importing Sprites in Project

When you import sprites in Unity, make sure that you are setting the Pixels per Unit value of the sprite to the sprites native size.
For example, consider we have a sprite of size 256 x 256 pixels. Now when we import the sprite into the project, make sure that you set the Pixels per Unit value of the sprite to 256.
By doing this, the sprite when used in a unity scene will be 1 world unit x 1 world unit at a scale of Vector3(1, 1, 1).
Consider we have to import this sprite that is 256x256 pixels in size.


Download this 256x256 pixels image

When we import this sprite in Unity, we can click on the sprite to change the Pixels per Unit value of the sprite. On import, the default value is set to 100.
To change the Pixels per Unit value, select the sprite in Unity’s Project view and change the value of Pixels per Unit to 256.


Then click on the Apply button at the bottom to confirm.

Scaling Sprite to Fit the Screen Width

Import the sprite into the scene view and position it at (0, 0, 0) at a scale of (1, 1, 1)
Now create a new C# script named Scaler.cs and attach it to the sprite in the scene view.

In the Start() method of Scaler.cs, write the following lines of code.
void Start()
{
    float width = ScreenSize.GetScreenToWorldWidth;
    transform.localScale = Vector3.one * width;
}
Now click the Play button and see if the sprite scales to the width of the screen’s width.

Practice

1. You can also try scaling the sprite to the screen’s height. You can also try the same with non-square sprites and matching their width/height to screen’s width or height.
2. You can also divide the width by 2 to get 50% of the screen’s width and with some simple maths, you can place two sprites side by side.
In the upcoming article, I will be covering all these practices in detail to scale multiple sprites and aligning them side by side.
Find next article @ here
Thanks for the read.

You Might Also Like

0 comments

Follow by Email