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  value to  and click .
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 , the sprite will have a width of 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 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  and another half by .
Consider the following two sprites:

SPRITE 1 256 x 256 RED COLOR


SPRITE 2 512 x 256 GREEN COLOR

Import the sprites in the scene view after updating the values of the sprites to the following values:
  • For Red Sprite, 
  • For Green Sprite, 
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 and attach it to the .
The 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 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  script.

Press the  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 so to fit the two sprites, each sprite must be 
The code then scales the sprites to  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 (i.e. ScreenWidth / 4) and for the other sprite, it will be at and the script just positions two sprites at the following positions.

Share This Story

Tags: ,

You Might Also Like

0 comments

Follow by Email