explicitClick to confirm you are 18+

Easy 2D Mirror in Unity

Ray of Ideas 💡 Game Dev TipsSep 15, 2021, 10:14:38 AM
thumb_up1thumb_downmore_vert

My name's Ray, and this is Ray of Ideas discussing a simple tips to make a mirror in a 2D world in Unity. 

Video version:
 

 

Final Result:

 

Step 1 : Prepare the Sprites

Create these gameobjects, and name them as follows:

  • Mirror : your mirror sprite
  • MirroringSprite : a square sprite that will render the camera's view
  • MirroringWorld : a game object that will contain all objects that exclusively appear in the mirror
  • GrayBox : a square sprite that will only appear inside the mirror

*Be cautious, make sure the Z coordinate of the position of the Mirror is 0, else the camera might not capture it by accident.

 

Also, prepare a sprite that matches the inner side on your mirror. It will be used as the mask.

 

Step 2 : Prepare the Mirroring Camera

Make a camera with Projection: Orthographic. Set its Projection Size according to your will. Don't forget to set its position of Z coordinate below zero.

 

Step 3 : Prepare the Render Texture & Material

  1. In your project folder, do Create - Render Texture. Set its Size according to your mirror size, or just leave it be for a while.
  2. In the same folder (if you want to), do Create - Material. Set its Shader to Universal Render Pipeline/Lit if you're using URP.
  3. Assign the render texture to the material's Base Map.

 

Step 4 : Setup The Mirror

1. Assign your render texture as the mirroring camera's Output Texture. The ratio of your camera will be adjusted with the render texture's Size.

 

2. Set the MirroringSprite's material to the new material you have made.

 

3. Add SpriteMask component to your Mirror. Assign the sprite that matches the inner side of your mirror as the SpriteMask's sprite. 

 

4. Move MirroringSprite's location inside the Mirror. Change its SpriteRenderer's Mask Interaction to Visible Inside Mask. Change the Order in Layer above Mirror's order (above zero).

 

Practically, by this point, the mirror works just fine rendering parts of what the main camera is rendering. So, to make it less obvious, we need to add some extra sprites that can only be seen inside the mirror.

To make this example more clear, I'll move the mirror inside my own scene. 

 

After that, I adjust the mirroring camera's Size and position, the MirroringSprite's scale, and also the renderer texture's Size (then reassign it) to make it more realistic. 

 

As you can see, there's a towel behind the player that's also rendered in the mirror. We need to cover that using some sprites that are placed inside MirrorWorld.

 

Step 5 : The Mirror World

1. Use the GrayBox, then cover the towel. Make sure GrayBox's Order in Layer is higher than any object that it is covering.

 

Once we have covered it, our main camera also can't see the towel. So, we have to make an exception for the main camera to ignore some objects. 

2. Make a new Layer, name it "Mirror" (or anything you want).

 

3. Set MainCamera's CullingMask to everything except Mirror layer

 

4. Set MirrorWorld's Layer to Mirror.

 

5. Add more objects into MirrorWorld

 

Step 6 : Optional Tips

  1. Turn off the visibility of Mirror layer if you don't want to see objects that only exist inside the mirror.

 

2. If you want to make a mirror that renderer's the opposite direction of your character, there's a way that I know: Rotate the mirroring camera 180° in Y, the move its position of Z to the other side (usually your camera has minus value on Z axis, but make it positive now).

 

____

 

DONE 🎉

Thank you for reading! 
Share the knowledge everywhere if you want to~
See ya!


___
For more insights, check my posts in

▶️ YouTube : https://www.youtube.com/channel/UChcrY_MMjhUVin4tNzJzmZg
💡 Minds : https://www.minds.com/rayofideas/
🐤 Twitter : https://twitter.com/ray_ideas
📷 Instagram : https://www.instagram.com/rayofideas

----

Thank you for stopping by!