浏览代码
UI Fade in and out code and implementation
UI Fade in and out code and implementation
This implements the UI fader to black card using events and scriptable objects. To use, add a FadeChannelSO to the relevant script, assign the scriptable object, the call either Fade, FadeIn, or FadeOut. Has parameters for duration and target color. This is usable anywhere and at any time, but contains no safeguards besides preventing multiple fades from happening at the same time. Note: This modifies the PersistentManagers scene and adds an Image UI element that it depends on./devlogs-3-input
IroncladLandship
4 年前
当前提交
ac869e64
共有 7 个文件被更改，包括 328 次插入 和 0 次删除
-
121UOP1_Project/Assets/Scenes/PersistentManagers.unity
-
18UOP1_Project/Assets/ScriptableObjects/Events/UI/FadeChannelSO.asset
-
8UOP1_Project/Assets/ScriptableObjects/Events/UI/FadeChannelSO.asset.meta
-
58UOP1_Project/Assets/Scripts/Events/ScriptableObjects/UI/FadeChannelSO.cs
-
11UOP1_Project/Assets/Scripts/Events/ScriptableObjects/UI/FadeChannelSO.cs.meta
-
101UOP1_Project/Assets/Scripts/UI/FadeManager.cs
-
11UOP1_Project/Assets/Scripts/UI/FadeManager.cs.meta
|
|||
%YAML 1.1 |
|||
%TAG !u! tag:unity3d.com,2011: |
|||
--- !u!114 &11400000 |
|||
MonoBehaviour: |
|||
m_ObjectHideFlags: 0 |
|||
m_CorrespondingSourceObject: {fileID: 0} |
|||
m_PrefabInstance: {fileID: 0} |
|||
m_PrefabAsset: {fileID: 0} |
|||
m_GameObject: {fileID: 0} |
|||
m_Enabled: 1 |
|||
m_EditorHideFlags: 0 |
|||
m_Script: {fileID: 11500000, guid: 2f3f18ccb43e7594cb1a18cfbc24190e, type: 3} |
|||
m_Name: FadeChannelSO |
|||
m_EditorClassIdentifier: |
|||
_color: {r: 0, g: 0, b: 0, a: 0} |
|||
_inDuration: 1 |
|||
_outDuration: 1 |
|||
_holdDuration: 1 |
|||
|
|||
fileFormatVersion: 2 |
|||
guid: b40bb60f3ca40164e9d7acc6992bae10 |
|||
NativeFormatImporter: |
|||
externalObjects: {} |
|||
mainObjectFileID: 0 |
|||
userData: |
|||
assetBundleName: |
|||
assetBundleVariant: |
|||
|
|||
using System.Collections; |
|||
using System.Collections.Generic; |
|||
using UnityEngine; |
|||
using UnityEngine.Events; |
|||
|
|||
[CreateAssetMenu(menuName = "Events/UI/Fade Channel")] |
|||
public class FadeChannelSO : ScriptableObject |
|||
{ |
|||
public UnityAction<bool, float, Color> OnEventRaised; |
|||
/// <summary>
|
|||
/// Generic fade function. Communicates with <seealso cref="FadeManager.cs"/>.
|
|||
/// </summary>
|
|||
/// <param name="fadeIn">If true, the rectangle fades in. If false, the rectangle fades out.</param>
|
|||
/// <param name="duration">How long it takes to the image to fade in/out.</param>
|
|||
/// <param name="color">Target color for the image to reach. Disregarded when fading out.</param>
|
|||
public void Fade(bool fadeIn, float duration, Color color) |
|||
{ |
|||
if (OnEventRaised != null) |
|||
OnEventRaised.Invoke(fadeIn, duration, color); |
|||
} |
|||
|
|||
/// <summary>
|
|||
/// Generic fade function. Communicates with <seealso cref="FadeManager.cs"/>.
|
|||
/// </summary>
|
|||
/// <param name="fadeIn">If true, the rectangle fades in. If false, the rectangle fades out.</param>
|
|||
/// <param name="duration">How long it takes to the image to fade in/out.</param>
|
|||
public void Fade(bool fadeIn, float duration) |
|||
{ |
|||
if (OnEventRaised != null) |
|||
OnEventRaised.Invoke(fadeIn, duration, new Color(0, 0, 0, 1)); |
|||
} |
|||
|
|||
/// <summary>
|
|||
/// Fade helper function to simplify usage. Fades in the rectangle.
|
|||
/// </summary>
|
|||
/// <param name="duration">How long it takes to the image to fade in.</param>
|
|||
/// <param name="color">Target color for the image to reach.</param>
|
|||
public void FadeIn(float duration, Color color) |
|||
{ |
|||
Fade(true, duration, color); |
|||
} |
|||
/// <summary>
|
|||
/// Fade helper function to simplify usage. Fades in the rectangle.
|
|||
/// </summary>
|
|||
/// <param name="duration">How long it takes to the image to fade in.</param>
|
|||
public void FadeIn(float duration) |
|||
{ |
|||
Fade(true, duration, new Color(0, 0, 0, 1)); |
|||
} |
|||
/// <summary>
|
|||
/// Fade helper function to simplify usage. Fades out the rectangle.
|
|||
/// </summary>
|
|||
/// <param name="duration">How long it takes to the image to fade out.</param>
|
|||
public void FadeOut(float duration) |
|||
{ |
|||
Fade(false, duration, new Color(0, 0, 0, 1)); |
|||
} |
|||
} |
|||
|
|||
fileFormatVersion: 2 |
|||
guid: 2f3f18ccb43e7594cb1a18cfbc24190e |
|||
MonoImporter: |
|||
externalObjects: {} |
|||
serializedVersion: 2 |
|||
defaultReferences: [] |
|||
executionOrder: 0 |
|||
icon: {instanceID: 0} |
|||
userData: |
|||
assetBundleName: |
|||
assetBundleVariant: |
|||
|
|||
using System.Collections; |
|||
using System.Collections.Generic; |
|||
using UnityEngine; |
|||
using UnityEngine.UI; |
|||
|
|||
public class FadeManager : MonoBehaviour |
|||
{ |
|||
[Header("Fadeout Event")] |
|||
[SerializeField] private FadeChannelSO _fadeChannelSO = default; |
|||
|
|||
[Header("Fadeout Canvas")] |
|||
public GameObject _fadeoutCanvas = default; |
|||
|
|||
private Image _imageComponent; |
|||
|
|||
private bool IsCurrentlyFading = false; |
|||
|
|||
/// <summary>
|
|||
/// Enumerators that fades in the canvas's imageComponent to turn the screen to a flat color over time. Fadeins called simeutaneously will only fade in the earliest call and discard any others.
|
|||
/// </summary>
|
|||
/// <param name="duration">How long it takes to the image to fade in.</param>
|
|||
/// <param name="color">Target color for the image to reach.</param>
|
|||
/// <returns></returns>
|
|||
private IEnumerator FadeInEnum(float duration, Color color) |
|||
{ |
|||
float totalTime = 0f; // Total amount of time this coroutine has taken. Determines when the fadein will end and what color the imageComponent should be at every frame.
|
|||
while (totalTime <= duration) |
|||
{ |
|||
totalTime += Time.deltaTime; |
|||
_imageComponent.color = Color.Lerp(new Color(0, 0, 0, 0), color, totalTime/duration); // Sets the image's color to a mixture between total transparency and the target color, and interpolates based on the amount of time to completion.
|
|||
yield return null; |
|||
} |
|||
_imageComponent.color = color; // Here to guarentee the image is exactly the requested color at the end of the loop.
|
|||
IsCurrentlyFading = false; |
|||
yield return null; |
|||
} |
|||
|
|||
/// <summary>
|
|||
/// Enumerators that fades out the canvas's imageComponent to turn the screen to normal gameplay color over time. Fadeouts called simeutaneously will only fade out the earliest call and discard any others.
|
|||
/// </summary>
|
|||
/// <param name="duration">How long it takes to the image to fade out.</param>
|
|||
/// <returns></returns>
|
|||
private IEnumerator FadeOutEnum(float duration) |
|||
{ |
|||
Color oldColor = _imageComponent.color; // Temporarily stores the old color of the image component, as we can't assume the image will always be black.
|
|||
float totalTime = 0f; // Total amount of time this coroutine has taken. Determines when the fadeout will end and what color the imageComponent should be at every frame.
|
|||
while (totalTime <= duration) |
|||
{ |
|||
totalTime += Time.deltaTime; |
|||
_imageComponent.color = Color.Lerp(oldColor, new Color(0, 0, 0, 0), totalTime / duration); // Sets the image's color to a mixture between the old color and total transparency, and interpolates based on the amount of time to completion.
|
|||
yield return null; |
|||
} |
|||
_imageComponent.color = new Color(0, 0, 0, 0); // Here to guarentee the image is fully transparent at the end of the loop.
|
|||
IsCurrentlyFading = false; |
|||
yield return null; |
|||
} |
|||
|
|||
private void Start() |
|||
{ |
|||
_imageComponent = _fadeoutCanvas.GetComponent<Image>(); |
|||
} |
|||
|
|||
private void OnEnable() |
|||
{ |
|||
if (_fadeChannelSO != null) |
|||
{ |
|||
_fadeChannelSO.OnEventRaised += fadeGeneral; |
|||
} |
|||
} |
|||
|
|||
private void OnDisable() |
|||
{ |
|||
if (_fadeChannelSO != null) |
|||
{ |
|||
_fadeChannelSO.OnEventRaised += fadeGeneral; |
|||
} |
|||
} |
|||
|
|||
/// <summary>
|
|||
/// Controls the fade-in and fade-out.
|
|||
/// </summary>
|
|||
/// <param name="fadeIn">If true, the rectangle fades in. If false, the rectangle fades out.</param>
|
|||
/// <param name="duration">How long it takes to the image to fade in/out.</param>
|
|||
/// <param name="color">Target color for the image to reach. Disregarded when fading out.</param>
|
|||
private void fadeGeneral(bool fadeIn, float duration, Color color) |
|||
{ |
|||
if (!IsCurrentlyFading) // Makes sure multiple fade-ins or outs don't happen at the same time. Note this will mean fadeouts called at the same time will be discarded.
|
|||
{ |
|||
IsCurrentlyFading = true; |
|||
if (fadeIn) |
|||
{ |
|||
StartCoroutine(FadeInEnum(duration, color)); |
|||
} |
|||
else |
|||
{ |
|||
StartCoroutine(FadeOutEnum(duration)); // Fadeout doesn't need color, so the color parameter is disregarded.
|
|||
// I would like to say that setting the color for the fadeout wouldn't be hard to implement, but I reckon most people wouldn't use it, so it would just be an unnecessary burden.
|
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
fileFormatVersion: 2 |
|||
guid: d4a9e678d7a028b459e5b9971e79931a |
|||
MonoImporter: |
|||
externalObjects: {} |
|||
serializedVersion: 2 |
|||
defaultReferences: [] |
|||
executionOrder: 0 |
|||
icon: {instanceID: 0} |
|||
userData: |
|||
assetBundleName: |
|||
assetBundleVariant: |
|||
撰写
预览
正在加载...
取消
保存
Reference in new issue