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显示,场景里的东西是透明的。这个解决方案有三:
- 格式转换为RGB,但我没有找到
Texture
有对应的转换API; - 写个shader替换默认的Rawimage材质,不使用A通道。
- 我用的方法,不用自带的截屏API,二是自己用ReadPixels来获取。
二、Shader方案
由于全景图的纹理,我是贴到一个球体上的,所以,最直接的方法,就是写Shader,在两种全景纹理下进行切换。这种方案非常适合全景图切换(只是替换两个纹理),但不太适合3d场景转场。
效果:
Unity转场shader效果演示
Shader是用ASE做的,比较简单,连线如下图:
其实,这里只是描述基本的原理,如果想要做到更多的转场效果,玩法非常的多,第一种方法,用UGUI的,也可以写Shader来实现更多炫酷的效果。