Wayback Machinekoobas.hobune.stream
May JUN Jul
Previous capture 12 Next capture
2021 2022 2023
1 capture
12 Jun 22 - 12 Jun 22
sparklines
Close Help
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
avatar image
0
Question by TheGameLearner · Apr 13, 2018 at 07:29 AM · camerarenderingpost processingpost-process-effectforeground

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!!alt text

blackshodow-to-use.png (1.3 kB)
Comment
Add comment
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

2 Replies

· Add your reply
  • Sort: 
avatar image
2
Best Answer

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.

Comment
Add comment · Show 2 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image TheGameLearner · Apr 13, 2018 at 01:37 PM 0
Share

Thanks for the detailed step by step Guide. It was really helpful!!

avatar image MarioSantoso TheGameLearner · Apr 13, 2018 at 03:08 PM 0
Share

I'm glad it worked for you. Please mark your question as answered and mark the answer.

avatar image
1

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.

Comment
Add comment · Show 3 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image TheGameLearner · Apr 13, 2018 at 01:38 PM 1
Share

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.

avatar image Harinezumi TheGameLearner · Apr 14, 2018 at 08:52 AM 0
Share

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).

avatar image TheGameLearner Harinezumi · Apr 14, 2018 at 01:09 PM 0
Share

Thanks for the suggestion. I went through order and was unaware of Transform.SetAsFirstSibling and Transform.SetAsLastSibling. Will see them soon.

Your answer

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Follow this Question

Answers Answers and Comments

129 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

(Unity 2019.2) Post Processing errors with Deferred Rendering Path 1 Answer

Multiple post processing profiles? 2 Answers

Camera layering with post processing? 0 Answers

Using PostProcessing on URP + Cinemachine? 1 Answer

Post Processing Stopped Working 0 Answers


Enterprise
Social Q&A

Social
Subscribe on YouTube social-youtube Follow on LinkedIn social-linkedin Follow on Twitter social-twitter Follow on Facebook social-facebook Follow on Instagram social-instagram

Footer

  • Purchase
    • Products
    • Subscription
    • Asset Store
    • Unity Gear
    • Resellers
  • Education
    • Students
    • Educators
    • Certification
    • Learn
    • Center of Excellence
  • Download
    • Unity
    • Beta Program
  • Unity Labs
    • Labs
    • Publications
  • Resources
    • Learn platform
    • Community
    • Documentation
    • Unity QA
    • FAQ
    • Services Status
    • Connect
  • About Unity
    • About Us
    • Blog
    • Events
    • Careers
    • Contact
    • Press
    • Partners
    • Affiliates
    • Security
Copyright © 2020 Unity Technologies
  • Legal
  • Privacy Policy
  • Cookies
  • Do Not Sell My Personal Information
  • Cookies Settings
"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges