C Archives - Selfloop

Understanding “Sprite Renderer” Component

By | Unity3D | No Comments

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


Understanding “Tag” in “Unity”

By | Unity3D | No Comments

Definition: Tag is basically grouping the different types of game object by assigning them with a name.

For example, let us consider that there are 2 types of enemies such as “square” and “circle”. When the player collided with any of those enemy, the player will die. So far that I have taught you guys, you might be thinking to type your codes like this,

void OnCollisionEnter(Collision other) {

if(other.gameObject.name == “square” || other.gameObject.name == “circle”){




But what if, there are 20 types of enemy in your game, so are you going to type their every single name to your code? And what if there are 20 “circle” enemy in the game, where their naming comes to “circle (1), circle (2) …..” by copying in unity. So are you going to type all of their name through your code? Definitely not, this is where the tagging comes. We are going to create an “Enemy” tag from the “Tag” window in “Unity” and set that “Enemy” tag to our different type of “Enemy” game object. Let’s see how we can create and use tags on unity on the following steps.


  1. To create those tag, lets select a “Game Object”.

Tag (1)

  1. Here, as we selected “Enemy (6)” from the “Hierarchy”. As now we can see that the “Tag” is now set with “Untagged” means, that there is no tag for the following “Game Object”. Let’s click on the drop down menu of the “Tag”.

Tag (2)

Now “Click” on the “Add Tag…” section to creating a “tag” for the following “Game Object”.

  1. Now you can see that the following “Inspector View” has changed to “Tags & Layer” section.

Tag (3)

As we don’t have any “Tags” right now, so the following list is showing “List is Empty”. Let’s click on the small “+” (Add) sign icon to create our first tag.


  1. Let’s set our new tag name as “Enemy”, and click on the “Save” button.

Tag (4)

  1. Now we can see that the “Enemy” tag is now available on the “Tags” list.

Tag (5)

  1. Again, let’s select the “Enemy (6) from the “Hierarchy” and click on the dropdown menu of “Tags” to select the “Enemy” tag for our enemies.

Tag (6)

  1. After selecting the “Enemy” tag, it is now been displayed on the “Tag” section of the “Inspector View”.

Tag (7)

  1. As now we have set the enemies with the “Enemy” tag, we can write our code in something like this,

void OnCollisionEnter(Collision other) {  if(other.gameObject.tag == “Enemy”){         Destroy(gameObject);    }}

Where this script will now destroy the player (assuming this script is attached to “Player”) as it touches with any object containing “Enemy” tag.


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

Muhammad Tashfiqul Bari

Mentor at Coursera