Unity 5 UGUI Fade in Fade out

Hi all. Looking for an answer that I don’t seem to find a detailed enough explanation on. Everywhere I look has disjointed, out dated, or unexplained answers that leave me even more confused. I’m fairly weak at C# code, and am pretty new to the language, so please go easy on me here.

What I want to do: Fade a camera in, out, and in multiple colors and speeds. For instance:
Start the game > fade in from black.
Something surprising happens on screen > FLASH the screen white. (quick fade out to white and fade in from white).
end of a scene > fade out to black

From what I’ve found, it is based around drawing an image on the screen that fits the camera and then changing the color and transparency. With the legacy GUI system, you would do that with a GUI skin. But with uGUI, I don’t know how to create an image that changes size based on camera resolution/view size.

I know for the actual changes in color and transparency, I’d use this: https://docs.unity3d.com/ScriptReference/UI.Graphic.CrossFadeColor.html

But, like a lot of the API, it is really unforgiving to new programmers. I have absolutely no clue how to actually get it to work and change something’s color. In the editor, it tells me that CrossFadeColor doesn’t exist within the context.

Anyone know how to put these things together to get a functioning camera Fade In / Fade Out / Flash script?

Thanks

  • Create a canvas. The canvas is already in screen space so should resize with the screen with the default components.
  • Add a UI Image as a child to the canvas. The UI Image inherits the UI.Graphic class.
  • Now you should be able to reference the UI Image and call the UI.Graphic.CrossFadeColor method using that.

Hope that helps.