- Home /
Fading in and out triggered canvases
Hi everyone, In my scene I have a canvas with an image. This canvas is being triggered by canvas trigger object "basically an empty gameobject with a collider". My code looks like this.
using UnityEngine;
using System.Collections;
using UnityEngine.UI;
public class CanvasTrigger : MonoBehaviour {
void Start () {
myCanvas.enabled = false;
myPanel.GetComponent<CanvasRenderer> ().SetAlpha (0.5f);
}
public Canvas myCanvas;
public Image myPanel;
void OnTriggerEnter(){
myCanvas.enabled = true;
myPanel.CrossFadeAlpha (1f, 5f, false);
}
void OnTriggerExit(){
myCanvas.enabled = false;
}
}
When I enter the trigger the canvas appears but without the fading effect. Also I have tried attaching a different code to the canvas trigger like this:
using UnityEngine;
using System.Collections;
public class CanvasTrigger : MonoBehaviour {
void Start () {
myCanvas.enabled = false;
}
public Canvas myCanvas;
void OnTriggerEnter(){
myCanvas.enabled = true;
}
void OnTriggerExit(){
myCanvas.enabled = false;
}
}
And then attach a different script to the image component of my canvas like this:
using UnityEngine;
using System.Collections;
using UnityEngine.UI;
public class ImageFade : MonoBehaviour {
public Image myPanel;
void Start() {
myPanel.GetComponent<CanvasRenderer> ().SetAlpha (0f);
}
void FixedUpdate(){
myPanel.CrossFadeAlpha (1f, 20f, false);
}
}
But niether ways are working. It is getting a bit frustrating.
Any help much appreciated. Thanks.
Answer by Hanoble · Sep 21, 2016 at 09:32 PM
I wrote this not long ago for fading elements within a canvas, it works on individual maskable graphics, which should work just fine. I use it by placing it on individual elements, such as text, image, etc., and then getting the FadeColor component from whatever object needs it and then calling the FadeIn() or FadeOut(). I have tried to keep it generic, so it should work for you, but if not the coroutine is handling the fade and if nothing else that should help you. This script is also set up to handle partial fades (such as only half fading out before being told to fade in again). Lastly, there is an OnFadeComplete event for any objects interested in subscribing. I will attach the script and a sample use of it.
using UnityEngine;
using UnityEngine.UI;
using System;
using System.Collections;
public class FadeColor : MonoBehaviour
{
public event Action OnFadeComplete; //This is called when the fade in or out has finished.
public MaskableGraphic _FadeGraphic;
public Color _StartColor = Color.white;
public Color _FadeInColor;
public Color _FadeOutColor;
public float _FadeInDuration = 2.0f;
public float _FadeOutDuration = 1.0f;
public float _FadeInitialDelay = 1.0f;
private IEnumerator mFadeCoroutine = null;
private Color mCurrentFadeColor;
private bool mIsFading = false;
public bool pIsFading
{
get
{
return mIsFading;
}
}
private void Start()
{
if(_FadeGraphic == null)
{
Debug.LogError("FadeColor component on object " + gameObject.name + " has no Fade Graphic assigned!");
return;
}
_FadeGraphic.color = _StartColor;
mCurrentFadeColor = _FadeGraphic.color;
}
public void FadeOut()
{
if(mFadeCoroutine != null)
StopCoroutine(mFadeCoroutine);
mFadeCoroutine = RunFade(mCurrentFadeColor, _FadeOutColor, _FadeOutDuration, false);
StartCoroutine(mFadeCoroutine);
}
public void FadeIn()
{
if(mFadeCoroutine != null)
StopCoroutine(mFadeCoroutine);
mFadeCoroutine = RunFade(mCurrentFadeColor, _FadeInColor, _FadeInDuration, true);
StartCoroutine(mFadeCoroutine);
}
private IEnumerator RunFade(Color startColor, Color endColor, float duration, bool isFadeIn)
{
float timer = 0.0f;
mIsFading = true;
if(isFadeIn && _FadeInitialDelay > 0)
{
while(timer < _FadeInitialDelay)
{
timer += Time.deltaTime;
yield return null;
}
}
timer = 0.0f;
if(_FadeGraphic != null)
{
while(timer <= duration)
{
_FadeGraphic.color = Color.Lerp(startColor, endColor, timer / duration);
mCurrentFadeColor = _FadeGraphic.color;
timer += Time.deltaTime;
yield return null;
}
_FadeGraphic.color = endColor;
mCurrentFadeColor = _FadeGraphic.color;
mIsFading = false;
// If anything is subscribed to OnFadeComplete call it.
if(OnFadeComplete != null)
OnFadeComplete();
}
else
Debug.LogError("FadeColor component on object " + gameObject.name + " has no Fade Graphic assigned!");
mFadeCoroutine = null;
}
}
How to use:
void OnTriggerEnter()
{
if(_FadeGraphic != null)
_FadeGraphic.FadeIn();
}
Your answer
Follow this Question
Related Questions
How to fade an image 1 Answer
How Would I Make A GUI Label Fade After A Certain Amount Of Time? 1 Answer
make buttons appear slowly 1 Answer
Making the objects infront of the primary hero translucent? 1 Answer
How to: Image effect fade in, stay on for a set amount of time, then fade out again? 0 Answers