冰火围城过场动画
来源:互联网 发布:最新版itunes软件下载 编辑:程序博客网 时间:2024/05/19 12:17
概述
冰火围城里的过场动画,犹如一团火焰,把地图烧毁,气势磅礴。效果如下图:
原理
首先我们需要给当前游戏画面截个屏,作为背景图。通过gradientmain(以下简称gmain)这张图控制燃烧进程。白色部分就是未燃烧到的截屏图,黑色部分是已经烧掉的部分,中间的渐变就是正在燃烧的部分。
仔细的同学已经注意到了,gradientfire(以下简称gfire)这张图和gmain有点相似。gfire的颜色部分,正好对应的是gmain的渐变部分,它们用同一套uv采样,所以火焰的颜色,是由gfire这张图控制的。火焰的形状则由firemap这张图控制。
那么怎么控制火焰从右下角烧到左上角呢?我们需要一个平面网格,然后刷顶点渐变色。左下角Color(0.5)->右上角Color(1),渐变过渡,如下图:
实现
接下去来看看具体的代码实现。
mScreenshot = new Texture2D(Screen.width, Screen.height, TextureFormat.RGB24, false);mScreenshot.ReadPixels(new Rect(0, 0, Screen.width, Screen.height), 0, 0);mScreenshot.Apply();mat.SetTexture("_ScreenCapture", mScreenshot);
这是C#代码,给屏幕截图,并且把图片传入shader。
struct appdata_transition{ float4 vertex : POSITION; float4 texcoord : TEXCOORD0; fixed4 color : COLOR;};
顶点结构定义里加入顶点色。
v2f vert(appdata_transition v){ v2f o = (v2f)0; o.pos = mul(UNITY_MATRIX_MVP, v.vertex); o.uv = v.texcoord.xy * _FireMap_ST.xy + _FireMap_ST.zw; o.uv += frac(_Time.y * float2(_FireMapSpeedX, _FireMapSpeedY)); o.screenUV = (o.pos.xy / o.pos.w) * 0.5 + 0.5; o.color = v.color; return o;}
vertex shader里,计算firemap的uv坐标,并加入uv动画。计算屏幕坐标,作为截屏图片的uv坐标。把顶点色赋值给v2f结构。
fixed4 frag(v2f i) : Color{ fixed4 c = tex2D(_ScreenCapture, i.screenUV); fixed firemap = tex2D(_FireMap, i.uv).r + i.color.r + _DissolveAmount; fixed mainDissolve = tex2D(_GradientMainDissolve, fixed2(firemap, 0)).r; fixed4 fireDissolve = tex2D(_GradientFireDissolve, fixed2(firemap, 0)); c *= mainDissolve; c.rgb += fireDissolve.rgb; return c;}
fragment shader里,首先用屏幕坐标采样截屏图片。
fixed firemap = tex2D(_FireMap, i.uv).r + i.color.r + _DissolveAmount;
_DissolveAmount这个变量是由应用程序传入的,范围在[-1, 0]之间的值。这个值会逐渐递减,使得firemap这个值也随之逐渐递减。得到的值用来作为uv坐标,采样gmian和gfire。右下角的顶点,因为颜色值较小,会最先燃烧。
c *= mainDissolve;
gmain的信息控制动画进程,黑色的直接不显示。
c.rgb += fireDissolve.rgb;
叠加上gfire图,得到火焰的效果。
代码和资源
图片和完整源代码,有需要可以自行去下载
- 冰火围城过场动画
- activity 过场动画
- iOS 自定义过场动画
- 自定义 Android 过场动画
- ios addSubView 过场动画
- ActivityOptions过场动画
- 给view添加过场动画
- iOS过场动画调研笔记
- activitiy切换的过场动画
- android 过场动画如何加载
- Android笔记 Activity过场动画
- Activity过场动画的设置
- 暗黑破坏神2-过场动画中文对白
- 为所有activity加上过场动画overridePendingTransition
- 给UITabbarController 和 UINavigationController添加过场动画
- 【Unity】自定义过场动画Splash Image
- 安卓中一些界面过场动画的实现
- 布局改变时的过场动画
- 完全卸载oracle11g步骤
- ubuntu14.04 Terminal 配置 wildfly-10.0.0.Final 服务器
- 如何去掉Eclipse里面自动追加的一些注释!!!
- 最大子序列的和问题
- 快速排序
- 冰火围城过场动画
- 照片上传功能的实现
- 如何将TextView中的中文设置成粗体?
- JSP中<base href="<%=basePath%>">作用
- ASIHTTPRequest的一些东西
- Can't convert to dimension: type=0x12问题
- U一点·料——阿里巴巴集团1688UED体验设计践行之路——互动出版网
- java 字符流与带有缓冲的字符流 代码笔记
- [C#] 异步模式