Fading Background in Gradually

Unity Courses Ask
,
#1

The following code current changes the background image on the Canvas every number of seconds. There is a CoRoutine that I want to use to fade the background IN and then OUT. However, I am having trouble getting it setup. I need to set the Alpha of the Background Image to Zero and then Fade it in. After a set time I need to Fade it out.

private Image background;
private int index = 0;
[SerializeField]
private List<Sprite> bgImage = new List<Sprite>();
public float timeToStart;
public float timeToNext;

void Start()
{
    background = GetComponent<Image>();
    SetBackground();
    InvokeRepeating("Change", timeToStart, timeToNext);
   
}

void Change()
{
    if (index < (bgImage.Count - 1))
    {
        index++;
        SetBackground();
    }
    else
    {
        index = 0;
        SetBackground();
    }
}

void SetBackground()
{
    StartCoroutine(Fader());
    background.sprite = bgImage[index];
}

IEnumerator Fader()
{
    background.CrossFadeAlpha(255, 2.0f, false);
    yield return new WaitForSeconds(timeToNext);
    background.CrossFadeAlpha(0, 2.0f, false);
}

@Joao_Dalvi
ORIGINAL POST:
Removed for clarity.

#3

Hey King, how are you?

I’m taking a look into it, will reply asap.

#4

Good! Hope you are doing well! Sorry about all the @ tags. I redid the post. Thank you!

#5

No problem king =) Everything find around here.

You want it to fade straight into the next background or would you rather fade it into nothing, change the background and then fade in again?

If you want it to fade into another Background, you would have to add another GameObject in the same place with one image and a script that calls the CrossFadeAlpha from inside this new GameObject (seems that the CrossFadeAlpha don’t work when you are trying to change the alpha of another GameObject, just the one that the script is attached to)

I tried it out, I added this script to the second GameObject (I had to use one CrossFadeAlpha with 0 of duration to change the alpha of the image, otherwise it wouldn’t work, seems that if you start the game with the alpha set to 0, you wont be able to change it with CrossFadeAlpha):

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
public class CrossFade : MonoBehaviour {
	Image myImage;
	void Start()
	{
		myImage = GetComponent<Image>();
		myImage.CrossFadeAlpha(0,0,false);
	}
	public void ChangeMyAlpha(float Amount, float Duration, bool TimeDep)
	{
		myImage.CrossFadeAlpha(Amount,Duration,TimeDep);
	}

This Way you can control the crossfade from another GameObject.

After that you can add an routine that calls the fadein and fadeout in both GameObjects, change the image index and the image in both gameObjects and then calls itself again such as the following:

Image background1;
CrossFade background2;
public float FadeTime;
void Start () {
		background1 = GetComponent<Image>();
		background2 = FindObjectOfType<CrossFade>().GetComponent<CrossFade>();
		StartCoroutine(CrossAlpha(10f,FadeTime));

	}
	IEnumerator CrossAlpha(float TimeUntilChangeBackground, float FadingTime)
	{
		yield return new WaitForSeconds(TimeUntilChangeBackground);
		SpriteOntheBackground2 = NextSpriteToLoad;  // Names choosen as example
		SpriteIndex++; // Names choosen as example
		background1.CrossFadeAlpha(0,FadingTime,false);
		background2.ChangeMyAlpha(1f,FadingTime,false);
		yield return new WaitForSeconds(TimeUntilChangeBackground);
		SpriteOntheBackground1 = NextSpriteToLoad;
		SpriteIndex++;
		background2.ChangeMyAlpha(0,FadingTime,false);
		background1.CrossFadeAlpha(1f,FadingTime,false);
		StartCoroutine(CrossAlpha(FadingTime));
	}

I’ve not done all the code, you would have to add the definition for NextSpriteToLoad, SpriteOntheBackground2, SpriteIndex and SpriteOntheBackground2, I have just done the part regarding the FadeIN and FadeOut, This kind of structure would allow you to Fade in and Fade out directly to another Background.

But if you rather Fade IN and Out to alpha0 instead of Fade into another background, you wouldn’t need to add another GameObject as the example above and would be ready to go with a script as simple as this:

	IEnumerator CrossAlpha(float TimeUntilChangeBackground, float FadingTime)
	{
		yield return new WaitForSeconds(TimeUntilChangeBackground-(2*FadingTime));
		background.CrossFadeAlpha(0,FadingTime,false)
		yield return new WaitForSeconds(FadingTime);
		Change();
		background.CrossFadeAlpha(1,FadingTime,false);
		yield return new WaitForSeconds(FadingTime);
		StartCoroutine(CrossAlpha(TimeUntilChangeBackground, FadeTime));
	}

Although you would have to take the StartCoroutine out of the SetBackground() and add it just to the void Start(),

It should work. Please Let me know the results.

2 Likes
#6

TimeUntilChangeBackground() is the time I would set? That’s when the CoRoutine would run, after that countdown was done? I think the first option is more elegant. I may give it a try shortly.

2 Likes
#7

Yes, it is a float that set the time between changes

1 Like
#9

You’re second solution was the simplest to implement so that’s what I used. Works like a charm. Thank you so much. @Joao_Dalvi

2 Likes
#10

You are welcome King!
I’m glad to know that I was able to help, looking forward to play this game!

#11

I just wanted to thank you for this. I spent the last two hours or so trying to get an image to fade out with CrossFadeAlpha. I was trying to set the alpha with a temp color instead of using CrossFadeAlpha, but after doing that the CrossFadeAlpha no longer worked. Works like a charm now :smiley:

1 Like
#12

Privacy & Terms