Unity利用UGUI RawImage组件制作转场动画

Unity利用UGUI RawImage组件制作转场动画

最近接到了一个unity全景图的小项目，由于在不同的场景之间转场时直接转会太过生硬，因此要求有个Alpha转场的动画。于是想到两种可行的方案：

一、UGUI方案

用UGUI显示当前屏幕纹理，然后进行场景切换，切换好之后，在把UGUI隐掉。这种方案适合任何场景的切换。
先看效果：

Unity 利用UGUI制作转场动画的演示

直接上代码：

// 调用这个方法，就可以直接把全景图纹理更换为newTex
public ChangeScene( Texture newTex )
{
	// 暂时关闭玩家控制
	_controller.enable = false;

	// 启动切换协程
	StartCoroutine(StartSceneChange(newTex));
}

// 更换纹理的协程
private IEnumerator StartSceneChange(SceneNode node)
{
    // 这里要等到当前帧渲染完成，否则截屏结果将不正确。
    yield return new WaitForEndOfFrame();

	// 开始截屏，保存当前的屏幕画面到一张纹理中。
    var oldtex = new Texture2D(Screen.Width, Screen.Height, TextureFormat.RGB24, false );
    oldtex.ReadPixels(rectScr, 0, 0);
    oldtex.Apply();

	// 等待UGUI完成渐隐
    yield return Switch(oldtex, newTex);

	// 销毁截屏
    Destroy(oldtex);
}

public IEnumerator Switch(Texture oldTex, Texture newTex)
{
	// 激活UGUI并将截屏显示到RawImage
    rawImage.gameObject.SetActive(true);
    yield return null;
    _rawImage.texture = oldTex;
    rawImageCanvasGroup.alpha = 1;
    yield return null;

	// 更换球体纹理为新的全景图
    _material.SetTexture(GameLogic.mainTex, newTex);
    
    // 渐隐UGUI
    while (_group.alpha > 0.01f)
    {
        _group.alpha -= speed * Time.deltaTime;
        yield return null;
    }

	// 隐藏UGUI
    _rawImage.texture = null;
    rawImageCanvasGroup.alpha = 0;
    rawImage.gameObject.SetActive(false);
}

代码非常容易理解。值得一提的是，Unity截屏的API，其实是有现成的：

ScreenCapture.CaptureScreenshotAsTexture();

但是，这个截屏出来的格式是RGBA格式的，直接贴到RawImage上，会只有UI显示，场景里的东西是透明的。这个解决方案有三：

1. 格式转换为RGB，但我没有找到Texture有对应的转换API；
2. 写个shader替换默认的Rawimage材质，不使用A通道。
3. 我用的方法，不用自带的截屏API，二是自己用ReadPixels来获取。

二、Shader方案

由于全景图的纹理，我是贴到一个球体上的，所以，最直接的方法，就是写Shader，在两种全景纹理下进行切换。这种方案非常适合全景图切换（只是替换两个纹理），但不太适合3d场景转场。
效果：

Unity转场shader效果演示

Shader是用ASE做的，比较简单，连线如下图：

其实，这里只是描述基本的原理，如果想要做到更多的转场效果，玩法非常的多，第一种方法，用UGUI的，也可以写Shader来实现更多炫酷的效果。