Put an image on top of a background?

Your feedback is very important to us. We are listening.

Put an image on top of a background?

Postby summer » Fri Mar 01, 2019 5:18 pm

This may be a stupid question but I can't figure out how to put an image on top of a background and be able to fade that in and out.

I want this:
Image
Image

But I can only figure out how to do this:
Image
Where the background is always visible through the circle.

Am I missing a node or is it more complex than I initially thought?
summer
 
Posts: 10
Joined: Tue Nov 13, 2018 4:47 pm

Re: Put an image on top of a background?

Postby summer » Fri Mar 01, 2019 5:25 pm

Now I have something like this:
Image

Is that the correct approach?
summer
 
Posts: 10
Joined: Tue Nov 13, 2018 4:47 pm

Re: Put an image on top of a background?

Postby Amplify_Borba » Fri Mar 01, 2019 5:28 pm

The only stupid question is the question that is never asked.

- Ramon Bautista


Hello, there should be a couple of ways to achieve this effect, but here's one possible and simple solution which I hope that fits your requirements, in which I make use of the Lerp node:

Image

And the result as you set the slider from 0 to 1, and back to 0:

Image

Please let me know if this helps, thanks!
Customer Relations at Amplify Creations
Learn more about our offering: Amplify Creations Products
Amplify Shader Editor won the Asset Store Best Tool Award - Thank you for your support!
User avatar
Amplify_Borba
 
Posts: 1239
Joined: Mon Jul 24, 2017 9:50 am

Re: Put an image on top of a background?

Postby summer » Tue Mar 05, 2019 2:53 pm

Hey! Thanks for the reply and suggestion.

The problem here is that I don't want the additive effect which is why I had to make it black on the background where the image has to be added.

Basically what I want is a way to just put and image on top of another with transparency based on the image alpha channel. As far as I can see the only two ways of mixing two images is using either add or multiply neither block out the background completely hence the black circle on the background.
summer
 
Posts: 10
Joined: Tue Nov 13, 2018 4:47 pm

Re: Put an image on top of a background?

Postby Amplify_Borba » Wed Mar 06, 2019 11:53 am

You can also use the Image's alpha channel as the interpolator for the Lerp node:

Image

The result is not additive in this case, rather a blend between both image and background, is this what you're looking for?

Image
Customer Relations at Amplify Creations
Learn more about our offering: Amplify Creations Products
Amplify Shader Editor won the Asset Store Best Tool Award - Thank you for your support!
User avatar
Amplify_Borba
 
Posts: 1239
Joined: Mon Jul 24, 2017 9:50 am

Re: Put an image on top of a background?

Postby summer » Mon Mar 11, 2019 1:46 pm

Wow, thanks so much!

This was exactly what I was hoping for plus I learned something that I can use for other things as well.

Thanks a bunch for excellent support!
summer
 
Posts: 10
Joined: Tue Nov 13, 2018 4:47 pm

Re: Put an image on top of a background?

Postby Amplify_Borba » Wed Mar 13, 2019 12:34 pm

Happy I was able to help!

Have you had the chance to rate and review Amplify Shader Editor? It would be awesome if you could share your experience with the Unity community, every bit helps and your feedback is extremely valuable to us.

Feel free to get back in touch if you have further issues or questions, thank you!
Customer Relations at Amplify Creations
Learn more about our offering: Amplify Creations Products
Amplify Shader Editor won the Asset Store Best Tool Award - Thank you for your support!
User avatar
Amplify_Borba
 
Posts: 1239
Joined: Mon Jul 24, 2017 9:50 am

Re: Put an image on top of a background?

Postby summer » Wed Mar 13, 2019 4:27 pm

I believe I did some time ago, but I gave you another 5 stars just now.
summer
 
Posts: 10
Joined: Tue Nov 13, 2018 4:47 pm

Re: Put an image on top of a background?

Postby Amplify_Borba » Thu Mar 14, 2019 9:39 am

Thank you for your kindness, we really appreciate it!
Customer Relations at Amplify Creations
Learn more about our offering: Amplify Creations Products
Amplify Shader Editor won the Asset Store Best Tool Award - Thank you for your support!
User avatar
Amplify_Borba
 
Posts: 1239
Joined: Mon Jul 24, 2017 9:50 am


Return to General Discussion

Who is online

Users browsing this forum: No registered users and 0 guests