Understanding “Sprite Renderer” Component

Definition: “Sprite Renderer” component is responsible for rendering Image/Sprites in 2D/3D game mode.

Sprite Renderer (0)

Let us consider you want to add a simple background to you level. All you have to do is to select a “Game Object” -> Go to “Inspector View” -> Click on the “Add Component” -> “Sprite Renderer”, and select the Image/Sprite from the “Sprite” section to displayed in the game level. You can also create a “Game Object” by right clicking in the “Hierarchy” -> “2D Object” -> Sprite.

Components: Here, we are going to learn about the sub-components of the “Sprite Renderer”.

  1. Sprite: Here, you will be able to select the “Image/Sprite” that you want to be displayed in your game level.

Sprite Renderer (1)


Problem: Let us consider you want to change the Image from one image to another when you pressed the “S” key.

  1. Color: By using the color, you will be able to cast a “Gradient/Shade” on your selected “Image/Sprite”. By default the color is set to white (r: g: b = 255 : 255 : 255). Let us consider the following difference between 2 sprites.

Sprite Renderer (2)

Problem: Let us consider we want to change the opacity to its half when the user pressed the “O” key from keyboard. Note that

  1. Flip: By using this sub-component, you will able to flip the image along with the X/Y-Axis. By default, let us consider your image is facing to the right side. When you flip it along the X-axis, the image will now face to left. Let’s see the following image for better understanding.

Sprite Renderer (3)

Problem: Let us consider we want to flip “Sparty” (Character) to left face when we click on the “Left Arrow Key”. As by default Sparty is facing to the right.


  1. Materiel: Here you can also use different custom materiel for giving different gradient on the following image. We will talk more about in “Understanding “Materiel”” section.
  2. Sorting Layer: it defines the order that which layer would be render over another layer. Let us consider that the “Sparty” waking alongside of a tree. Is the tree will be behind him when he pass? Or the tree will hide “Sparty” when he goes over?
  • Let’s select the “Sparty” from the “Hierarchy”.
  • We can see that the “Sorting Layer” is set to default. (Cause it’s the default sorting layer)
  • Let’s click on the dropdown section and click on the “Add Sorting Layer”.

Sprite Renderer (4)

  • As we can see that our “Inspector View” has changed, and showing the “Sorting Layer”. We can also see that “Unity” has already created the “Default” (Unchangeable) sorting layer which we saw in the “Sprite Renderer” of “Sparty” game object.

Sprite Renderer (5)

  • Let’s create a “Sorting Layer”, naming “Player” layer.

Sprite Renderer (6)

  • Now set the “Player” layer to “Sparty”.

Sprite Renderer (7)

  • Now as we can see that the “Sparty” is now rendering over the “Tree”. Because the “Sparty” is set to the “Player” layer, where as the “Tree” has set to “Default” layer.

Sprite Renderer (8)

  • You should remember that the “Layer” which is the last “Layer” of the list has the highest priority for rendering to the top of the other layer.

  1. Order in Layer: Let us consider there are 2 different images in the same “Default” layer, where both of the images are in the same position. Now the question is, which image would be at the top to render? This is where the “Order in Layer” comes in. The “Sprite” that has the highest number in the “Order in Layer” would be render on the top. Rest of the object will be rendered as following.

Sprite Renderer (9)

# The reference of the documents are taken from the “Unity – Documentation”.

Muhammad Tashfiqul Bari

Mentor at Coursera


Author Muhammad Tashfiqul Bari

More posts by Muhammad Tashfiqul Bari

Leave a Reply