Implement Constant Size Sprite in Unity2D

In this tutorial, we will learn to implement a constant size sprite in Unity2D so that zooming in or zooming out won’t change the sprite’s size.

Contact me

Find the GitHub repository of this tutorial at https://github.com/shamim-akhtar/constant-size-sprite.

Click to try the WebGL version below. NOTE: The WebGL version might not work for mobile devices.

Click To Play The WebGL version

The Unity Project

In our previous tutorial, we implemented pan, zoom-in and zoom-out of our camera in 2d. We will continue to use the scene we created in our last tutorial. You can use the code from GitHub or create a new scene and import the package.

After you import the starter_scene.package, you will see the below.

The above picture shows the starter scene for our demo that comes with a 2d camera manipulator to pan and zoom.

The Normal Sprite

First, we create a normal sprite. This sprite won’t scale up or down based on the zoom factor. In other words, this will be our normal sprite. We will use the following picture for our normal sprite. You can find it in the Assets/Resources/Images folder.

The home sprite. We will use this sprite as a normal sprite.

Drag and drop this sprite onto the scene and rename it Normal Sprite. Set the scale to be 0.4, 0.4, 1.0 and the position at 1.5, 2.5, -1.0, as shown below.

The transform properties in the Inspector for Normal Sprite

The Constant Size Sprite

Next, we create another sprite. We want this sprite to scale up or down based on the zoom factor of our camera. We will use the following picture for our normal sprite. You can find it in the Assets/Resources/Images folder.

The location sprite. We will use this sprite for our constant size sprite.

Drag and drop this sprite into the scene, change the name to Constant Size Sprite, and set the location and scale as shown below.

The transform properties in the Inspector for Constant Size Sprite.

At this point, you can click on Play and see the behaviour. You will see that as you zoom in and zoom out, both our sprites change in size depending on the camera size (or the zoom factor).

We shall now implement the necessary script to fix our constant size sprite’s scale even though we change the camera’s size.

The Script

Select the Constant Size Sprite from the hierarchy, go to the Inspector and add a new Script component. call it ConstantScreenSizeForSprite.

Double-click and open in Visual Studio and add the following code.

using UnityEngine;

public class ConstantScreenSizeForSprite : 
  MonoBehaviour
{
  // Set the original camera size. 
  // This is the camera size when your
  // sprite size is just right.
  [SerializeField]
  float OriginalCameraSize = 10.0f;

  // Set the original scale of the sprite.
  [SerializeField]
  Vector3 OrigScale = Vector3.one;

  void LateUpdate()
  {
    if (Camera.main.orthographicSize > 0.1f)
    {
      transform.localScale = 
        Camera.main.orthographicSize / 
        OriginalCameraSize * OrigScale;
    }
  }
}

Code language: C# (cs)

Go to the Unity Editor and set the values of the fields of the ConstantScreenSizeForSprite component, as shown below.

The values for the ConstantScreenSizeForSprite component.

Click play and run the application. The scale for Constant Size Sprite now changes as you zoom in and zoom out so that the pixel size of the sprite remains the same. See the video below.

Read My Other Tutorials

Shamim Akhtar

A committed and optimistic professional who brings passion and enthusiasm to help motivate, guide and mentor young students into their transition to the Industry and reshape their careers for a fulfilling future. The past is something that you cannot undo. The future is something that you can build.

I enjoy coding, developing games and writing tutorials. Visit my GitHub to see the projects I am working on right now.
Educator | Developer | Mentor