Pixel Crushers Forum

Hello,

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.


How difficult would this be to implement?

Thanks!

Hi,

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?

Yes; the easiest way would be to modify the BackgroundManager script. I'll post a modified version here tomorrow.

Hi,

I updated the VN starter framework package:

VisualNovelFramework_2_0_14.unitypackage

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.

Thank you so much! This is exactly the effect I was looking for.

Happy to help!

I could not use this package you provided, I imported it, followed your instructions but still could not understand how I can use this package to make cross-transitions as I want from the nodes in my conversation . Can you provide me more step-to-step explanation please? I tried testing this pakage by changing the source images of Background and Background2 gameobjects to the images I actually want to make transition between, Fade Duration was already set to 1(a non-zero) value so I did not change it for the first time I tried but transition became instantly instead of over 1 second and when I changed Fade Duration to 10 it did not change anything. I also still did not understand how should I integrate this with my conversation nodes.

Tony Li wrote: ↑Sun Apr 21, 2024 10:06 am Hi,

I updated the VN starter framework package:

VisualNovelFramework_2_0_14.unitypackage

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.

I could not use this package you provided, I imported it, followed your instructions but still could not understand how I can use this package to make cross-transitions as I want from the nodes in my conversation . Can you provide me more step-to-step explanation please? I tried testing this pakage by changing the source images of Background and Background2 gameobjects to the images I actually want to make transition between, Fade Duration was already set to 1(a non-zero) value so I did not change it for the first time I tried but transition became instantly instead of over 1 second and when I changed Fade Duration to 10 it did not change anything. I also still did not understand how should I integrate this with my conversation nodes.

Hi,

Do not make any changes to the Background Canvas GameObject/prefab except for optionally changing the Fade Duration value. It's initially set to 1, which means the new background image will fade in over a duration of 1 second. If you have made any other changes to the Background Canvas or its children, reimport a fresh, working copy from the Visual Novel starter framework package.

To change backgrounds, use the Background() sequencer command or specify the new background image name in a field named "Background" in your dialogue entry. For instance, the example conversation has a dialogue entry that changes the background to the "rainy" image:


The "rainy" image is inside a folder named Resources.