I currently have the VN template set up with its default settings where it fades the entire screen to black before fading back with the new background image. This works well in the VN for transitioning between locations, but I would like to have a second background fade transition where it only impacts the background image layer (so underneath all the dialogue boxes and portrait images) and instead of black I'd like it to fade in the next background image.
I think it would be nice if the image name could be passed in the dialogue node fields like the black fade transition.
Do you mean a cross-fade from one background image to another? In other words, the first background image will be fading out while the second one is fading in?
If so, this is possible. You'll need to write a bit of code. Use two background Images, but in sort orders that are lower than your dialogue UI. Let's call them bg1 and bg2.
When you start the cross-fade, set bg2's sprite to the old background image and set its alpha to 1. You can use a Canvas Group component and control its alpha, or you can change the Image's color property's alpha value.
Set bg1's sprite to the new background image and set its alpha to 0.
Then change bg1's alpha to 1 while you change bg2's alpha to 0.
If you have a tweening library such as DOTween, you could use a tween method to do this. Otherwise you can write a coroutine to do it.
If I made the explanation too confusing, let me know and I can put together some example code this weekend.
Do you mean a cross-fade from one background image to another? In other words, the first background image will be fading out while the second one is fading in?
Yes, this is what I want to achieve.
I am kind of following your explanation on the transition implementation but I am not connecting how it would be called by one of the dialogue nodes. It is starting to sound that this might be a little more involved than I anticipated . There are a lot of moving parts that I am having trouble understanding how it all connects together. Would this new script swapping the images be attached to the background game object that has the "Background Manager" script?
Back up your project first, just to be safe. After downloading the package, you can either import the whole thing or import only the BackgroundManager.cs script and the Background Canvas prefab. Then replace your gameplay scene's Background Canvas with the prefab, and set the Fade Duration to a non-zero value such as 1 to cross-fade over 1 second.
. There are a lot of moving parts that I am having trouble understanding how it all connects together. Would this new script swapping the images be attached to the background game object that has the "Background Manager" script?