Unity ID
A Unity ID allows you to buy and/or subscribe to Unity products and services, shop in the Asset Store, and participate in the Unity community.
Premium
Introduction to the Sprite Renderer
Overview
Overview
Summary
The Sprite Renderer is very important component to use when developing 2D projects as it determines how the given Sprite is rendered. It’s an essential component for the Tilemap system to work properly as well.
In this tutorial, you'll learn how to add the Sprite Renderer to your Sprite, set various properties, and arrange Sprites to render in layers.
1.
What is the Sprite Renderer?
The Sprite Renderer is very important component to use when developing 2D projects as it determines how the given Sprite is rendered. It’s an essential component for the Tilemap system to work properly as well.
2.
Adding the Sprite Renderer
When working in a 2D scene, the Sprite Renderer is important as it lets you display images as Sprites. It is also applicable within a 3D project.
- Add the component to a GameObject, go to the Components menu, Component > Rendering > Sprite Renderer.
- You can also create a GameObject with a Sprite Renderer already attached, GameObject > 2D Object > Sprite. You will now have a new component attached to the GameObject that will allow you to adjust the settings in order to control how that given GameObject is rendered (Figure 01).
- Add two or more GameObjects to the scene and ensure they both contain a Sprite Renderer.
From here, you will now see two GameObjects in your scene, both containing a Sprite Renderer. We will use the Sprite Renderer to set what Sprites both GameObjects will represent and then go over the additional functionality that the Sprite Renderer has.
3.
Sprite Renderer Properties
Select one of the Sprite GameObjects we added to the scene. You will see the following properties you can change within the Sprite Renderer.
- Sprite: This is the Sprite that will render. Sprite objects can be generated from textures by using the Sprite setting on the Texture Importer or created with the Sprite Editor tool. You will want to add a Sprite you wish to render here.
- Color: This will set the vertex color of the rendered Mesh for the Sprite Useful for changing the overall color of the sprite mesh.
We want to find the Sprite setting and drag and drop the Sprite we wish to use onto the object.
- Flip: This will flip the Sprite in the X or Y planes, effectively mirroring the sprite.
- Material: This is the material that will be used to render the Sprite. It is useful in case you have a specific material you wish to use to render the sprite with.
- Draw Mode: This property has several settings within the dropdown menu that defines how the Sprite scales when you change its dimensions.
- Sorting Layer: This is the Layer that defines the Sprites overlay priority during rendering.
- Order in Layer: The overlay priority of this Sprite within its own Layer. Lower numbers are rendered first and subsequent numbers overlay those below. This is useful if you have a particular sprite that should be hidden behind other sprites on the same Layer.
- Mask Interaction: When using the Sprite Masking feature, this determines how the Sprite behaves with the Sprite Mask, giving you three possible options: None, Visible Inside Mask, Visible Outside Mask. This is important to control if your using Sprite Masks.
Click the Draw Mode of your Sprite Renderer to reveal additional properties. We won’t change anything here for now:
- Simple: This is the default behavior, the image scales in all directions when its dimensions change.
- Sliced: Use this option if you intend to apply a 9-slicing to an image and that you want the sections to stretch. In this mode, the corners stay the same size while the top and bottom of the Sprite stretches horizontally. The sides of the Sprite stretch vertically and the center of the Sprite stretches horizontally and vertically to fit the Sprites size.
- Tiled: Use this option if you intend to apply a 9-slicing to an image and that you want the sections to repeat. In this mode, the Sprite remains the same size and does not scale. Instead the top and bottom of the Sprite repeat horizontally while the sides repeat vertically. The center of the Sprite repeats in a tile formation to fit the Sprites size.
Select the Tiled option from the list, you get a few more properties you can set, for now we won’t change anything here but it is good to get familiar with the settings.
- Size: Use this to change the horizontal and vertical size of the Sprite. You have to use this property to change the size of the Sprite if you want the 9-slicing to work.
- Tile Mode: Use this to control how the sections repeat when the dimensions of the Sprite change.
Tile Mode also has a few additional properties that become available to configure:
- Continuous: This is the default option. The the Sprite changes size, the Sprite repeats evenly.
- Adaptive: The repeating sections of the Sprite only repeat when the dimensions of the Sprite reach the Stretch Value (Figure 03).
- Stretch Value: This slider is between 0 and 1. 1 represents an image resized to twice its original dimensions. So if the value is 1, the section repeats when the image is stretched to twice its original value.
4.
Sprite Renderer Materials
A Sprite Renderer uses the texture supplied in the Sprite property but uses the Shader and other properties from the Material property. This means you can use the same material to render different Sprites without worrying about what texture is assigned on the material. The Sprite is then rendered on a mesh that uses position, color and UV at each vertex but doesn’t use a normal vector. If you require the use of normal vectors, you can calculate them using a vertex Shader. There are two default Shaders used for Sprites:
- Sprites/Default: This is a simple alpha blended Shader that does not interact with the lights in the scene.
- Sprites/Diffuse: This is a simple alpha blended surface Shader that does interact with the lights in the scene. This Shader generates a front facing normal vector.
5.
Flipping The Sprites
Let’s flip the Sprites we have in our scene:
- Take your second sprite and make it a child of your first.
- Select the parent sprite and assign it a -1 for its Scale in the X direction (Figure 05).
- Notice this has a side effect of also flipping any and all child GameObjects.
- Set the Scale back to 1.
- Ensure you have the Parent Sprite selected then select Flip X option. The Sprites flipping property provides a lightweight alternative which doesn’t affect any other components of GameObjects attached to the Sprite (Figure 06). This will enable us to flip Sprites individually, regardless of if they are parents or children of other GameObjects.
6.
Sorting Layers with Sprites
Next let’s take a look at Sorting Layers and see how they can benefit you. Sorting Layers help determine the order in which Sprites are rendered. When you have an image set on a ‘lower’ Sorting Layer, it will be rendered first, such as a rock behind the player avatar to simulate background objects (Figure 07). Adversely, if the rock is moved to a higher Sorting Layer, it’ll be overlayed on the player avatar to simulate foreground objects (Figure 08).
- Create two Sorting Layers, name the first one you create Background and the second one you create Foreground.
- Select your first Sprite and add it to the Background Sorting Layer.
- Take the second Sprite and add it to the Foreground Sorting Layer.
- Put these two sprites in the same position. You will notice the Foreground Layer will overlap the Background.
- Flip the Sprites’ Layers and you will see that the Sprites reverse which one is overlapping the other.
Unlike 3D games, there is no concept of “depth” with 2D games. It’s important to have some ways to determine the overlay priority of different Sprites to help fake “depth”. This is why Sorting Layers is important to 2D projects, it allows you to divide Sprites into groups for overlay priority. Furthermore you can assign overlay priority with the Order in Layer for Sprites that exists in the same layer but should be overlayed a specific way. For example, the player Sprite and the rock Sprite could both exist on the same Sorting Layer. Let’s say we want the player Sprite to have more importance over the rock Sprite, so we would assign the player Sprite a higher priority in the Order in Layer property. Doing so will tell the renderer to overlay the player Sprite last (Figure 07).
It is important to understand how the Sprite Renderer works as it can give you much needed control over your 2D projects and how the sprites behave when they are rendered to the screen. Gaining mastery over the Sprite Renderer will come naturally as you work with your 2D project.
Copyright © 2019 Unity Technologies
Language: