Unity 简易的UI背景昼夜轮替效果

在 UI 背景上实现带有光影照射的简易昼夜轮替效果，能让界面比静态背景更加生动形象。传统的实现方式通常是采用多图轮流替换的序列帧动画，但如果要使整个 UI 背景大图的各个部分都呈现出光影效果，就需要每张图片都是全屏大图，这会造成严重的资源浪费。另一种较为高级的方法是使用 Shader 来实现，不过本文将介绍一种更为简单的实现方式。

实现思路

主要思路是为 UI 背景图片指定一个材质，可新建一个默认材质，使背景能够接收光照。接着在指定位置添加灯光并进行适当调节，从而实现出色的光影效果。

具体步骤

1. 创建灯光

首先，在场景中创建一个点光源，将其作为夜晚的月亮；再创建一个方向光，作为白天的阳光。通过改变这两个灯光的强度，来实现昼夜轮替效果。以下是实现该功能的代码：

// 夜晚灯光
private Light NightLight;
// 白天灯光
private Light DayLight;
// 昼夜轮替速度
public float _Speed = 0.2f;
// 一天的时间
public int _Time = 3;
// 昼夜轮替方向
private int _Direction = -1;
// 开启昼夜轮替的时间流逝
private bool _IsTimeLapse = false;

void Start () {
NightLight = GlobalManager._Login.FindChild("夜晚灯光").GetComponent<Light>();
DayLight = GlobalManager._Login.FindChild("白天灯光").GetComponent<Light>();
// 初始一天时间结束后昼夜轮替开始
StartCoroutine(GlobalManager._Tool.DelayToInvokeDo(delegate() {
_IsTimeLapse = true;
}, _Time));
}

void Update () {
if (GlobalManager._Login.gameObject.activeSelf) {
// 开启昼夜轮替
if (_IsTimeLapse) {
// 白天状态
if (DayLight.gameObject.activeSelf) {
// 通过修改灯光强度以体现时间流逝的效果
DayLight.intensity += Time.deltaTime * _Speed * _Direction;
// 白天灯光强度为 0，标示着白天结束
if (DayLight.intensity <= 0 && _Direction < 0) {
// 进入夜晚
DayLight.gameObject.SetActive(false);
NightLight.gameObject.SetActive(true);
_Direction *= -1;
return;
}
// 白天持续中
if (DayLight.intensity >= 1 && _Direction > 0) {
_Direction *= -1;
_IsTimeLapse = false;
// 一天时间结束后再开启时间流逝
StartCoroutine(GlobalManager._Tool.DelayToInvokeDo(delegate () {
_IsTimeLapse = true;
}, _Time));
return;
}
}
// 夜晚状态
if (NightLight.gameObject.activeSelf) {
// 通过修改灯光强度以体现时间流逝的效果
NightLight.intensity += Time.deltaTime * _Speed * _Direction;
// 夜晚灯光强度为 0，标示着夜晚结束
if (NightLight.intensity <= 0 && _Direction < 0) {
// 进入白天
DayLight.gameObject.SetActive(true);
NightLight.gameObject.SetActive(false);
_Direction *= -1;
return;
}
// 夜晚持续中
if (NightLight.intensity >= 1 && _Direction > 0) {
_Direction *= -1;
_IsTimeLapse = false;
// 一天时间结束后再开启时间流逝
StartCoroutine(GlobalManager._Tool.DelayToInvokeDo(delegate () {
_IsTimeLapse = true;
}, _Time));
return;
}
}
}
}
}

2. 延时执行函数说明

代码中使用的 DelayToInvokeDo 是一个延时执行函数，具体实现可参照我的另一篇博客。

效果展示

我随机选取了一张图片进行测试，从效果图来看，实现的效果还不错。

• 白天（阳光最强时）：[此处可插入白天效果图]
• 黄昏（阳光变弱）：[此处可插入黄昏效果图]
• 夜晚（窗顶上的那个是月亮）：[此处可插入夜晚效果图]

通过上述步骤，我们就可以在 Unity 中实现简易的 UI 背景昼夜轮替效果。