Scaling Sprites to Screen’s Resolution in Unity — Part 2

July 27, 2019

This article is a sequel to the Part 1. Please read this before continuing with this article.

In Part 1, we learned how we can scale a sprite based on the screen’s resolution. We will deep dive into the above article to cover advanced concepts in this article.

Overview

In this article, we will work with non-squared sprites to fit them exactly in a screen width/height. We will also see how we can place multiple sprites side by side fitting exactly inside the edges of the screen.

IN THE EXAMPLES, MAKE SURE THAT YOUR CAMERA IS IN ORTHOGRAPHIC VIEW ELSE THE EXAMPLES WON’T WORK

Working with non-squared sprites

In this section, we will create a horizontal divider in the middle of the screen. We will start with the following rectangle image that is 256px wide and 5px tall.

Download this horizontal divider sprite

(256 x 5 pixels)

Import the image and set the Pixels per Unit value to 256 and click Apply.

Now import the divider in the game view and reset the transform by selecting the sprite and clicking on Reset Transform button.

Resetting the transform

With Pixels per Unit value of 256, the sprite will have a width of 1 world unit and we will use the concept we used in the last article to scale this sprite to screen’s width.

Create a new script named ScaleDivider.cs ad attach it to the imported horizontal divider in the game view and replace the content of the script with the following code.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;public class ScaleDivider : MonoBehaviour
{
    // Use this for initialization
    void Start()
    {
        float screenWidth = ScreenSize.GetScreenToWorldWidth;        transform.localScale = Vector3.one * screenWidth;
    }
}

Now hit the Play button and check how the divider will scale with the screen’s width.

Fitting two sprites side by side

Now we will be fitting two sprites side by side horizontally fitting exactly half of the screen’s width such that half width is covered by sprite 1 and another half by sprite 2.

Consider the following two sprites:

SPRITE 1 256 x 256 RED COLOR

Import the sprites in the scene view after updating the Pixels per Unitvalues of the sprites to the following values:

For Red Sprite, 256
For Green Sprite, 512

At this point, the project hierarchy will look like:

and the sprites in the game view might look like,

or you might be seeing only the red sprite only with the green sprite hiding behind the red one.

Now reset the transform of both sprites.

Now create a script named SpriteScaler.cs and attach it to the Main Camera.

The SpriteScaler.cs script will have the reference of both sprites and it will scale and position the sprites side by side fitting exactly the screen’s width.

Now replace the code in SpriteScaler.cs file with the following code:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;public class SpriteScaler : MonoBehaviour
{
    public SpriteRenderer RedSprite, GreenSprite;
    float screenWidth;    // Use this for initialization
    void Start()
    {
        screenWidth = ScreenSize.GetScreenToWorldWidth;        //update scale of Red sprite to half of screen' width
        RedSprite.transform.localScale = new Vector3(screenWidth / 2, screenWidth / 2, screenWidth / 2);        //update position of Red sprite to fit in the left half of the screen
        RedSprite.transform.position = new Vector3(-(screenWidth / 2) / 2, RedSprite.transform.position.y, RedSprite.transform.position.z);        //update scale of Green sprite to half of screen' width
        GreenSprite.transform.localScale = new Vector3(screenWidth / 2, screenWidth / 2, screenWidth / 2);        //update position of Green sprite to fit in the right half of the screen
        GreenSprite.transform.position = new Vector3((screenWidth / 2) / 2, GreenSprite.transform.position.y, GreenSprite.transform.position.z);
    }
}

Now update the reference for the sprites in ScriptScaler script.

Press the play button, you will see the sprites fitting side by side in the game view.

Understanding the SpriteScaler.cs code

The sprite scaler script calculates the width of the screen in world units. Let’s say the screen is 6 units wide so to fit the two sprites, each sprite must be 3 units wide.

The code then scales the sprites to 3 units each.

Now we have to position the sprites side by side. Here come simple Vector maths. We have two sprites of width 3 units each and have to place them side by side. There are two sprites so the sprites will touch each other at the origin, assuming the camera is at x = 0. So the center for one sprite will be at x = -1.5 (i.e. ScreenWidth / 4) and for the other sprite, it will be at x = 1.5, and the script just positions two sprites at the following positions.

Scaling Sprites to Screen’s Resolution in Unity — Part 2

Overview

Working with non-squared sprites

Fitting two sprites side by side

Share This Story

You Might Also Like

0 comments