Unity中的场景过渡

白金赞助商

Unity中的场景过渡

Tulenber ⸱ 27 March, 2020 ⸱ Intermediate ⸱ 5 min ⸱ 2019.3.6f1 ⸱

visual

这是动漫博客吗？

我认为，每个观看过至少一个动漫系列的人都注意到中间的一小部分，通常可以在场景和广告单元之间切换-保险杠。标题中的图片显示了“ New Game！”中的过渡。标题。由于这是有关Unity的博客，因此我们将考虑其场景之间过渡的设计。^_^

Unity中的场景是将游戏分为几部分的基本单元，它们之间的过渡本身并不复杂。过渡是通过SceneManager类使用LoadScene（）或LoadSceneAsync（）方法实现的。但是，如果没有其他修饰，这些过渡将看起来很奇怪。让我们尝试平滑此过渡，为项目增加一点视觉吸引力。

该方案非常简单：在卸载前一个场景并加载下一个场景时，在其间进行过渡的两个场景在视觉上应相同。通常，这种过渡是通过某些场景元素的动画来组织的。例如，在这篇文章中，我们使用黑屏（导致这种效果的组件将是黑色图片）。前一个场景应逐渐变黑，而下一个场景将从中顺利出现。

动画一词暗示着Unity中称为“ Mecanim”的机制的使用。如果您不太熟悉它，则可以阅读（甚至更好地用作练习）以前的文章“ State”，出于培训目的，该机制用于创建没有动画的状态机。

目的

通过黑屏在三个场景之间切换。第一个场景立即出现，然后在2秒钟后进入第二个场景。第二和第三之间的过渡是循环的，并且通过单击可以平稳地执行。

制备

创建三个场景：
- BootScene-游戏登陆的第一个场景，我们将立即显示它而不会变暗
- FirstScene和SecondScene-通过鼠标单击彼此过渡的两个场景
将场景添加到Build Settings
再创建一个名为SceneTransition的Canvas。设置Render Mode - Screen Space - Camera并添加Main Camera。将Order in Layer设置为999，使其始终位于其他元素之上
向SceneTransition添加新的Image，并将其命名为Fade。完全黑色，覆盖整个屏幕区域。您可以将其关闭，以免阻塞屏幕

动画

创建文件夹Animations
打开一个Animation选项卡。选择Fade后，单击Create按钮并创建FadeIn动画，还创建FadeOut动画。
设置FadeIn动画。选择FadeIn资产。删除Loop Time检查。选择一个Fade对象。在Animation选项卡上，按Enable/Disable keyframe recrding mode按钮并启用动作记录。启用Image组件。将Animation标签上的时间标记移至1秒。在颜色选择器中，设置alpha = 0。禁用Image组件。在Animation标签上，禁用动作录制。从调暗中检查UI平滑外观的动画。
设置FadeOut动画，但顺序相反：启用Image，即Alpha通道从0到100。自己练习此步骤
设置动画过渡。在Animator标签上，添加FadeOut触发器。在FadeIn和FadeOut之间添加过渡。在新的过渡上，禁用Has Exit Time，并将Transition duration设置为0。在Conditions中，添加创建的触发器FadeOut。
创建脚本TransitionHandler，该脚本将在FadeOut动画的末尾使用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


using UnityEngine;
using UnityEngine.SceneManagement;

public class TransitionHandler : MonoBehaviour
{
    // 正在加载场景名称
    [SerializeField] private string nextScene = "";
    // 禁用淡入动画标志
    [SerializeField] private bool disableFadeInAnimation = false;

    private void Start()
    {
        if (disableFadeInAnimation)
        {
            // 将淡入动画移到末尾
            Animator animator = gameObject.GetComponent<Animator>();
            animator.Play("FadeIn", 0 , 1);
        }
    }

    // 从淡出动画结束时触发
    void FadeOutFinished()
    {
        // 下一个场景的加载
        SceneManager.LoadScene(nextScene);
    }
}

将TransitionHandler脚本添加到Fade对象。在FadeOut动画的末尾，添加Event。从TransitionHandler脚本中选择FadeOutFinished()函数

Animation选项卡上的事件对象看起来像这样
从SceneTransition对象创建一个Prefab

过渡设置

为BootScene创建脚本，这将在2秒后开始过渡到FirstScene

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


using System.Collections;
using UnityEngine;

public class BootHandler : MonoBehaviour
{
    // 淡入淡出对象的动画师组件
    [SerializeField] private Animator fadeAnimator = null;

    void Start()
    {
        // 协程用作计时器
        StartCoroutine(Timer());
    }

    IEnumerator Timer()
    {
        // 等待2秒
        yield return new WaitForSeconds(2);
        // 设置触发器以启动动画
        fadeAnimator.SetTrigger("FadeOut");
    }
}

设置BootScene。添加SceneTransition预制。将Main Camera设置为canvas组件。写下下一个场景名称，"FirstScene"。禁用淡入动画
在场景中添加一个空对象，并将其命名为BootHandler。之后，从步骤1添加脚本。设置动画师
在测试开始时，BootScene必须在过渡之前具有淡入淡出的动画
为其他场景创建ClickHandler脚本，这些脚本可通过鼠标单击来处理过渡

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


using UnityEngine;

public class ClickHandler : MonoBehaviour
{
    // 淡入淡出对象的动画师组件
    [SerializeField] private Animator animator = null;
    
    void Update()
    {
        // 听鼠标左键单击
        if (Input.GetMouseButtonDown (0))
        {
            // 设置触发器以启动动画
            animator.SetTrigger("FadeOut");
        }
    }
}

设置"FirstScene"。添加SceneTransition预制。设置Main camera。设置下一个场景名称-SecondScene
在场景中添加一个空对象，并将其命名为ClickHandler。之后，从步骤5添加脚本。设置动画师
设置SecondScene。执行FirstScene设置中的所有步骤，排除下一个场景名称；它必须是-"FirstScene"
享受结果

结论

经过所有操作，我们获得了一个用于场景之间过渡配置的预制件。您不太可能将其用于生产，因为使用的同步场景加载不是一个很好的解决方案。而且，您还需要微调过渡条件。另外，您需要考虑在动画开始时停止游戏。并且希望使动画本身更有趣。例如，在Homescapes（Playrix）中，加载资源和启动菜单之间的过渡隐藏在沿着房屋墙壁下降的摄像头后面。但是，在用自己的双手重复这些步骤之后，您应该对如何使过渡变得漂亮有一个想法。下次见！^_^

visual

如果您喜欢这篇文章，可以为它提供支持

白金赞助商

标签