Create a Fullscreen Pixel effect (optional)

In the last tutorial, you learned how to create a Pixel Shader that changes the appearance of individual GameObjects. However, you can also achieve a similar effect using Render Textures instead of shaders to affect the entire screen. This tutorial introduces an alternative approach and showcases how different tools in Unity can be used to achieve similar visual results.

The Pixel shader you previously created only affects the GameObject it’s applied to. This makes it efficient when your goal is to pixelate a specific GameObject. However, if you want the effect to affect the entire scene, applying the shader to every GameObject would be inefficient.

One solution is to use full-screen shaders, which you will learn about in the next tutorial: Create a full-screen Dithering Shader. But another option is to use Render Textures, which in this case can create a similar full-screen effect by rendering the camera view at a lower resolution. This approach produces consistent pixelation across the entire scene regardless of object materials.

There is one limitation to the approach you’ll learn in this tutorial. As you’ll learn in next steps, the camera will render the scene into the Render Texture to create the pixelated effect. Since post-processing is applied after the camera renders the scene, these effects are not captured in the Render Texture and therefore won’t be visible in the final result.

Important: This tutorial is optional. You may choose to skip it and continue directly to the next tutorial, which covers full-screen shaders.

After this tutorial, you’ll understand a different approach on how to use Render Textures when you want a consistent full-screen retro effect.

Important: This tutorial is part of the Get Started with Shader Graph course, which covers different units focused on different types of shaders. In case you haven't downloaded the project files, follow these instructions on how to create a new project and import the project assets.

You could apply the effect directly to your screen right now, but doing so would affect the other shaders you have already created, as well as any shaders you create in the future. To keep this effect independent from the rest of the scene, you will instead trigger it through an interactable object.

In the following steps, you will attach a script to this object that enables the effect when you interact with it and disables it when it is no longer in use.

To add the interactable GameObject, follow these instructions:

1. Open the Development_Scene

• In the Project window, open the _GetStartedWithShaderGraph > Scenes folder.
• Double-click the Development_Scene to open it.

2. Add the object to your scene

• In the Project window, locate the HeadSet prefab.
• Drag the HeadSet prefab into the Hierarchy window.
• In the Scene view, position the HeadSet GameObject over the table that's already placed in the scene.

This GameObject will act as an activator. In later steps, you’ll attach the EquippableGlasses script to it, which will enable and disable the GameObject responsible for the pixel effect in the scene while in use or not.

A Render Texture is a special type of texture that a camera can render into instead of rendering directly to the screen. By rendering the scene to a low-resolution Render Texture and then displaying that image across the full screen, you can create a pixelated effect. When the low-resolution image is stretched to fill the screen, each pixel becomes a visible block, producing a retro pixel style.

To create and configure a Render Texture, follow these instructions:

1. Create a Render Texture

• Right-click in the Project window and select Create > Rendering > Render Texture.
• Rename it "Pixel Camera".

2. Configure the Render Texture settings

• In the Inspector window, configure the following settings:
  • Set the Size property to 640 x 360 (Width x Height).

These settings create a 640 × 360 Render Texture. By default, the Game view uses a 16:9 aspect ratio, so these values are derived by multiplying that ratio by a scale factor of 40: 16 × 40 = 640 (width), and 9 × 40 = 360 (height), making the Render Texture smaller than the actual screen resolution.

Note: If your Game view uses a different aspect ratio, use the corresponding width and height values of that ratio and multiply them by the scale factor, or switch to 16:9 aspect ratio.

After you assign the Render Texture, the scene will be rendered into a 640 × 360 image, which is much smaller than the actual screen resolution. As this image is smaller it needs to be stretched to fill the screen, each pixel then becomes a larger block on the display, producing the retro pixel effect.

Note: The value 40 was chosen after testing to produce a noticeable pixelated effect, but you can experiment with different values to adjust the visual result.

• Set the Filter Mode property to Point.

Point filtering prevents smoothing between pixels when the image is scaled. This keeps the edges of each pixel sharp and blocky, which is essential for the pixel-art aesthetic we're aiming for.

To apply the Render Texture to your game, you first need to configure a camera to render into it. Instead of modifying the Main Camera, you will create a secondary camera that renders to the Render Texture. This camera will only be activated when the player interacts with the HeadSet GameObject.

To set up the Pixel Camera, follow these instructions:

1. Create a child camera

• In the Hierarchy window, right-click the Main Camera GameObject and select Camera to create a Camera child GameObject.
• Rename it "Pixel Camera".
• Confirm that Pixel Camera’s Position and Rotation properties are both set to (0,0,0).

Creating the new camera as a child GameObject of the Main Camera GameObject, with the same Transform values, ensures it moves together with the Main Camera and maintains the same viewpoint.

2. Configure the Pixel Camera

• With the Pixel Camera selected, in the Inspector window:
  • Copy the values from the Projection section of the Main Camera GameObject and paste them into the Pixel Camera.
  • Locate the Camera component and, in the Output section, find the Output Texture property.
  • Drag the Pixel Camera Render Texture from the Project window into the Output Texture property box.

This tells the Pixel Camera to render into the Render Texture instead of directly to the screen.

• Set the Priority property to 99 (or any high value like 50, 100, etc.).

Camera Priority determines the render order when multiple cameras exist in a scene. Cameras with higher priority values render first. By setting the Pixel Camera's priority higher than the Main Camera (which defaults to 0), you ensure that when the Pixel Camera is active, it renders the scene into the Render Texture before the Main Camera processes anything.

The Pixel Camera renders the scene into the Render Texture, but that image isn’t visible yet. To display it on screen, you need to apply the Render Texture to a UI Raw Image that fills the entire viewport.

To create a UI Raw Image display, follow these instructions:

1. Create a Canvas with Raw Image

• Right-click in the Hierarchy window and select UI (Canvas) > Raw Image. This creates both a Canvas parent GameObject and a Raw Image child GameObject.

2. Verify Canvas settings

• Select the Canvas GameObject.
• In the Inspector window, verify the Canvas component is set to Render Mode: Screen Space - Overlay.

Screen Space - Overlay ensures the UI appears on top of everything else in the scene, perfect for full-screen effects.

3. Configure Raw Image to fill screen

• In the Hierarchy window, select the Raw Image GameObject.
• In the Inspector window, locate the Rect Transform component.
• Select the Anchor Presets button (the square target icon in the upper-left of the Rect Transform component).
• Hold Alt+Shift (macOS: Option+Shift) and select stretch-stretch (the lower-right preset) .

This stretches the Raw Image to fill the entire screen, regardless of screen resolution.

4. Assign the Render Texture

• In the Hierarchy window, select the Raw Image GameObject.
• In the Raw Image component, locate the Texture property.
• Drag the Pixel Camera Render Texture from the Project window into the Texture property box.

After assigning the Render Texture, you’ll immediately see the effect in the Game view, showing a fully pixelated screen.

As you only want this effect to appear when the player interacts with the HeadSet . You’ll add an EquippableGlasses script to the HeadSet to only enable the Pixel Camera and Canvas when the object is picked up. To set up correctly your scene for the script, disable both the Canvas and Pixel Camera so the effect is not active by default.

1. Disable the Canvas

• In the Hierarchy window, select the Canvas GameObject.
• In the Inspector window, disable the checkbox in the GameObject header to disable the GameObject.

2. Disable the Pixel Camera

• In the Hierarchy window, select the Pixel Camera GameObject.
• In the Inspector window, disable the checkbox in the GameObject header to disable the GameObject.

The EquippableGlasses script will control when the pixel effect is active, enabling and disabling the Pixel Camera and Canvas based on the interaction with the HeadSet .

To add the EquippableGlasses script, follow these instructions:

1. Add the script component

• In the Hierarchy window, select the HeadSet GameObject.
• In the Inspector window, select the Add Component button.
• Search for and add the EquippableGlasses script (_GetStartedWithShaderGraph > Scripts).

The EquippableGlasses script has two UnityEvent arrays:

• On Put On: Actions that occur when the player interacts with the GameObject to "wear" it.
• On Remove: Actions that occur when the player interacts again to remove it.

Note: You can add many GameObject method calls to these events, making the script flexible for various effects.

2. Configure On Put On events

• In the EquippableGlasses component, locate the On Put On event array.
• Select the Add (+) button twice to add two new events.
• First event (enable Pixel Camera):
  • Drag the Pixel Camera GameObject from the Hierarchy into the first event slot.
  • Open the dropdown and select GameObject > SetActive.
  • Enable the checkbox that appears below the dropdown (this sets the parameter to "true").
• Second event (enable Canvas):
  • Drag the Canvas GameObject from the Hierarchy into the second event slot.
  • Open the dropdown and select GameObject > SetActive.
  • Enable the checkbox that appears below the dropdown.

3. Configure On Remove events

• In the EquippableGlasses component, locate the On Remove event array.
• Select the Add (+) button twice to add two new events.
• First event (disable Pixel Camera):
  • Drag the Pixel Camera GameObject from the Hierarchy into the first event slot.
  • Open the dropdown, and select GameObject > SetActive.
  • Leave the checkbox disabled (this sets the parameter to "false").
• Second event (disable Canvas):
  • Drag the Canvas GameObject from the Hierarchy into the second event slot.
  • Open the dropdown and select GameObject > SetActive.

Now when you interact with the HeadSet (press E when close), the Pixel Camera and Canvas activate, creating the full-screen pixel effect. Press E again to deactivate it.

Now it's time to test the effect and see it in action. You will playtest in the Game view and adjust the resolution if necessary.

To test the Render Texture pixel effect, follow these instructions:

1. Enter Play mode

• Select the Play button in the Unity Editor.

2. Test the effect

• Move close to the HeadSet GameObject.
• Press E to interact with it.

The entire screen should become pixelated. Notice that the effect applies to everything the camera sees, not just a single object. If the effect is hard to notice, try adding more GameObjects to the scene to make the pixelation more visible.

• Press E again to disable the effect.
• The screen returns to normal resolution.

Note: If the effect isn’t as strong as you would like, adjust the scale factor used to calculate the Render Texture resolution. Modify the width and height values until you find a pixel size that fits your desired visual style.

3. Exit Play mode

• Select the Play button again to exit Play mode.

The Render Texture approach successfully creates a full-screen pixel effect. Unlike the shader approach, this method pixelates the entire rendered scene uniformly.

Now you can create a prefab of the interactive object you created so it can be reused it in other scenes

To create a prefab and save your work, follow these instructions:

1. Make a parent GameObject

• Multi-select the HeadSet and Canvas GameObjects.
• Right-click and select Create Empty Parent.
• Rename the new parent GameObject "PixelGlasses".

By creating a parent GameObject, you can group both the Canvas and HeadSet GameObjects into a single prefab, making it easier to reuse in other scenes.

2. Create a prefab of your object

• In the Project window, locate the Prefabs folder.
• Drag the PixelGlasses GameObject from the Hierarchy window into the Prefabs folder. This creates a prefab that stores the GameObject, its material, and its components.
• In the Hierarchy window, select the PixelGlasses GameObject and, in the Inspector window, disable the checkbox in the GameObject header to deactivate it. This helps keep the scene organized.

Because the PixelGlasses GameObject relies on the PixelCamera to produce the effect, you will also create a prefab of that camera.

3. Create a prefab of the PixelCamera

• In the Project window, locate the Prefabs folder.
• Drag the PixelCamera GameObject from the Hierarchy window into the Prefabs folder.
• In the Hierarchy window, select the PixelCamera GameObject and, in the Inspector window, disable the checkbox in the GameObject header to deactivate it. This helps keep the scene organized.
• From the main menu, select File > Save.

Important: Saving (Ctrl+S (macOS: Cmd+S)) with the Shader Graph window open only saves the shader. Scene changes must be saved separately.

The prefabs are now saved and ready to reuse. When using these prefabs in a new scene, you need to configure two things:

• The PixelCamera should be placed as a child GameObject of the Main Camera GameObject so it shares the same viewpoint.
• You must reassign the references in the EquippableGlasses component of HeadSet GameObject so it can enable and disable the correct GameObjects.

Congratulations!

You learned a different method for achieving pixel-style visual effects, demonstrating Unity's flexibility and how multiple tools can be used to create similar results.

In the next tutorial, you'll create a full-screen dithering shader, another retro-inspired effect that uses patterned transparency to simulate different shades, a technique commonly seen in early games and display technologies.