creating drop shadows in Unity cover image

Creating drop shadows for Sprites

Many Unity games use drop shadows for sprites to add shadows to 2D games. In this article, we will be creating a simple and cool looking shadow for a sprite.

The final shadow will look like:

drop shadow added for 2D sprite

Setting up the Project

To get started, I have created an empty Unity 2D project with the sprite imported.

Creating the Material for Shadow

To create a drop shadow, we need to create a new material by right-clicking the project view and clicking Create -> Material. This will create a new material in the project. Now we need to change the shader of the material to GUI/Text Shader.

change shader for material

We will be using this material for the shadow of a sprite.

Now change the Text Color of the material to something dark, as this will be our shadow color.

Creating the Shadow

Now we will be creating the drop shadow for a sprite.

Start by simply importing any sprite in the scene view. Now create a new script named DropShadow.cs and attach it to the sprite in the scene view. Now replace the script content with the following code.

using UnityEngine;

[RequireComponent(typeof(SpriteRenderer))]
public class DropShadow : MonoBehaviour
{
    public Vector2 ShadowOffset;
    public Material ShadowMaterial;

    SpriteRenderer spriteRenderer;
    GameObject shadowGameobject;

    void Start()
    {
        spriteRenderer = GetComponent<SpriteRenderer>();

        //create a new gameobject to be used as drop shadow
        shadowGameobject = new GameObject("Shadow");

        //create a new SpriteRenderer for Shadow gameobject
        SpriteRenderer shadowSpriteRenderer = shadowGameobject.AddComponent<SpriteRenderer>();

        //set the shadow gameobject's sprite to the original sprite
        shadowSpriteRenderer.sprite = spriteRenderer.sprite;
        //set the shadow gameobject's material to the shadow material we created
        shadowSpriteRenderer.material = ShadowMaterial;

        //update the sorting layer of the shadow to always lie behind the sprite
        shadowSpriteRenderer.sortingLayerName = spriteRenderer.sortingLayerName;
        shadowSpriteRenderer.sortingOrder = spriteRenderer.sortingOrder - 1;
    }

    void LateUpdate()
    {
        //update the position and rotation of the sprite's shadow with moving sprite
        shadowGameobject.transform.localPosition = transform.localPosition + (Vector3)ShadowOffset;
        shadowGameobject.transform.localRotation = transform.localRotation;
    }
}

Now select the sprite in the Project Hierarchy and update the values of Drop Shadow script in the inspector to the following values.

Set the Shadow Offset to (0.2, 0.2)

Drag and drop the material you created in the Shadow Material field.

Hit the Play button and check the drop shadow creating behind the sprite in the game view.

drop shadow added for 2D sprite

Buy me a cup  of coffee @ paypal.me/KunalTandon94, it keeps me motivated and keeps this blog running.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.