- Home /
make your camera see through an Image!!
Hi I have an Image that I want to use in my game. Basically I am trying to get Vignette like effect but based on the image or form of my choice or in other words, add a foreground Image to my camera. Here I am adding an example Image where I want the camera to see stuff in center clearly but fade towards sides without effecting top and bottom portions.
Now I want to use this image so that I can make different types of images that will allow camera to see specific areas of my choice without showing everything before it.
I am new to Unity and Don't understand shaders and renderers so can anyone explain it in an easy to understand language on how to do it?? Thanks in advance!!
Answer by MarioSantoso · Apr 13, 2018 at 10:21 AM
Not the easiest, but very versatile.
On hierarchy panel, right click and select UI > Canvas
On inspector panel, Canvas > Render Mode = Screen Space - Overlay
On hierarchy panel, select the canvas object, right click on it, select UI > Image
Select the new image object, in inspector panel, Rect Transform > Anchor Presets (clickmage with the words "center" and "middle") > Alt + click bottom right corner image (if you do this correctly, the words will change to "stretch" and "stretch")
On project panel, right click on empty space, Create > Material, give it a name.
With the new material selected, on inspector panel, change shader to **Particles > Multiply*
Assign the material to the image you created before (Material placeholder).
Assign the image/texture for the vignette like effect to the image also (Source Image placeholder).
If you follow these steps properly, you should have the effect you want.
Thanks for the detailed step by step Guide. It was really helpful!!
I'm glad it worked for you. Please mark your question as answered and mark the answer.
Answer by Harinezumi · Apr 13, 2018 at 08:39 AM
The simplest approach I can imagine is to add a plane object as a child to the camera, and move it in only z just a little bit farther than the near clipping plane of the camera (so for example if the near plane is 0.5, then you put the plane at (0, 0, 0.51)). This way the image will always move with the camera and be in front of it.
Then you add your images as texture to the material of your plane (make sure you set the material mode to fade or transparent). Of course, the images also have to have transparency (alpha) in them to be see through.
Thank you for your response, it was helpful. I got the step by step guide as well by @$$anonymous$$ilsnus and I was able to achieve the goal.
You are welcome! Indeed, I've used $$anonymous$$ilsnus' approach as well. Just make sure that if you add a UI how you order your objects, the objects under a Canvas are rendered first-to-last in hierarchy. Transform.SetAsFirstSibling and Transform.SetAsLastSibling are useful for this. Alternatively, you can add the Image under a different Canvas and play with the Canvas' renderOrder and sortingOrder (this second is less important).
Thanks for the suggestion. I went through order and was unaware of Transform.SetAsFirstSibling and Transform.SetAsLastSibling. Will see them soon.