Materials for 2D projects

You’ve made materials for 3D projects, including simulating solid surfaces, applying texture maps, creating transparent and translucent effects, and using Shader Graph to create custom shaders.

In this tutorial, you’ll explore a 2D version of a similar scene and learn how the implementation of those same features would be similar or different.

In this step, you'll open the CreativeCore_2D project and then explore the 2D Materials demo scene within it.

To test out and explore the 2D Materials scene, follow these instructions:

1. Download and open the CreativeCore_2D project:

• If you’ve already downloaded the CreativeCore_2D project in a previous unit, open it now using the Unity Hub.
• If you haven’t downloaded it yet, you can download the project here and then open it using the Unity Hub.
• When the project is open in the Unity Editor, verify you see a _CreativeCore_2D folder within your Project window, containing several subfolders.

2. Open the CC_Materials_2D scene:

• Go to Assets > CreativeCore_2D > Scenes, then open CC_Materials_2D_Scene.

3. Enter Play mode and take note of the materials:

• Enter Play mode.
• Notice the following:
  • The fruits are layered on top of each other in a way that makes it seem like the apple is in front of the banana, which is in front of the pear.
  • An animated material is displayed on the TV, made with a shader graph.
  • An emissive material on the purple gem, which appears brighter than the green one, despite being in a dark corner.
  • The trophy with the moving light shows how a 2D image can be made to look more 3D with normal maps.
• Exit Play mode when you are done.

When implementing materials in Unity 2D projects, you'll find both similarities and key differences compared to 3D projects. For each of the similarities and differences listed below, explore the project to make sure you understand how each of the features were implemented in 2D.

What's the same?

Materials define how surfaces look and respond to lighting and rendering, regardless of 2D or 3D. You still assign a material to a renderer, and that material’s shader determines available properties and visual effects.

What's different?

Sprite Renderer vs. Mesh Renderer

The main difference is that 3D objects have a Mesh Renderer component, while 2D sprites have a Sprite Renderer component. This is an important difference that is relevant to almost all art assets in a 2D scene. The Mesh Renderer component is used for 3D meshes and handles properties like light interaction and shadows based on 3D geometry. The Sprite Renderer component is specifically for 2D sprites and handles properties like the sprite asset, color, and Sorting Layers.

2D projects can also have other 2D-specific renderers:

• Tilemap Renderer: Renders tiles from a Tilemap component (grid-based 2D levels).
• Sprite Shape Renderer: Renders Sprite Shape contours (spline-based 2D geometry with fill and edge sprites). It’s ideal for organic terrains or paths.

To locate a Sprite Renderer component in the scene, follow these instructions:

1. Select the Unity Mug in the Scene view.

2. In the Sprite Renderer component, locate the Sprite property and the Material property, which determine the overall appearance of the GameObject.

Lit vs Unlit 2D shaders:

Lighting in 2D projects is not as common or universally necessary as in 3D projects; it often serves a specific artistic style. Since many 2D projects don't require lighting, they would use an unlit shader. A sprite with an unlit shader will appear the same brightness regardless of lighting conditions. You need to use a lit shader (such as Sprite-Lit-Default) for lighting to even work.

1. Select the Mug GameObject again and locate its Material property, noting that it’s set to the default Sprite-Unlit-Default shader.

2. In the Scene view, move the mug around the scene, noticing how it stays the same brightness.

3. Select one of the fruits and do the same thing, noticing how the Sprite-Lit-Default shader allows the sprite to react to different lighting conditions.

Sorting Layers and Order in Layer:

In 2D, the Sorting Layer and Order in Layer properties (found in the Sprite Renderer component) control which sprites render on top of each other, creating the illusion of position relative to the camera without actual 3D positioning along the Z axis. This is distinct from relying on physical 3D depth to manage overlapping objects.

1. Select the fruit on the table and take note of the values they have for Sorting Layer and Order in Layer.

You can use the Order in Layer property to sort objects’ rendering within the same layer (the Default layer in this case).

2. Select the table beneath the fruit and notice that it’s on a lower Background layer.

Everything on this layer will render beneath the higher Default layer, regardless of its Order in Layer property.

Secondary Texture maps:

For 2D sprites, Secondary Textures, including normal maps, mask maps, or other custom maps aren’t directly controlled within the Sprite Renderer component's material slot like they would be in a Mesh Renderer. Instead, you typically configure these through the Sprite Editor as Secondary Textures associated with the sprite asset itself. The Trophy GameObject has a normal map applied to it, which allows it to appear more 3D and respond to changing light direction.

Note: Applying this kind of secondary mapping detail to 2D projects is more of a stylistic choice. It’s perfectly valid to have 2D projects without any lighting or secondary maps.

1. Enter Play mode and watch how the light affects the Trophy GameObject as it moves.

Additional details on surface direction from the normal map makes it appear more 3D.

2. Select the Trophy GameObject that is sitting on the table, then in the Sprite Renderer component, select Open Sprite Editor.

3. In the upper-left corner of the Sprite Editor window, open the Sprite Editor dropdown and select Secondary Textures.

4. Locate the normal map assigned to this sprite in the lower-left corner.

Normal maps disabled by default in lights:

While normal maps in 3D appear by default with standard lights, 2D Lights have normal maps disabled by default.

1. In the Hierarchy window, select one of the Light 2D GameObjects.

2. In the Light 2D component, use the foldout (triangle) to expand the Normal Maps section, then open the Quality property dropdown and explore the options.

The Quality property is set Disabled by default, but you must use either Fast or Accurate for normal maps to render under a 2D light.

Emissive materials:

For 3D, you typically enable Emission directly in the material and use HDR colors to make an object appear to glow. In 2D, to create emissive properties, you’d need to use a material with a custom 2D shader that uses an HDR color. Then, you just need to have post-processing and Bloom enabled in order to get the glowing effect. This technique is a bit more advanced; consider checking out our 2D Lighting for Pixel Art course for more detailed guidance.

1. Select the Gem_Emission GameObject.

2. In the Inspector window, use the foldout (triangle) to expand the Sprite_Lit_Gem Material section.

Note that this material uses a custom shader, which defines a Main texture, an Emission texture, and an emission Color property. These are all configured as Secondary Textures in the Sprite Editor, as well.

You now understand how to implement materials in 3D projects and how that translates to 2D projects. You’re ready to apply these concepts to your own personal projects, be they 3D or 2D.