Unity3D-实现炉石卡牌特效

  • 发布者:geekpeer / 2017-02-22 14:33:56
  • 0
Unity3D-实现炉石卡牌特效
一、前言
本文旨在与大家一起探讨学习新知识,如有疏漏或者谬误,请大家不吝指出。
二、概述
相信很多人都玩过炉石,炉石中的金卡特效做的非常的棒。这篇文章就来讲一讲炉石里面金卡用到的一些特效的写法。
先来两张炉石的金卡特效,我们来分析一下。
 Unity3D-实现炉石卡牌特效Unity3D-实现炉石卡牌特效
上述两张金卡用到的特效有:uv动画以及扭曲。其中uv动画又可以分为移动、缩放和旋转。我们通过不断地叠加图层来实现丰富的特效,当然,这里考虑性能的消耗,最大的叠加图层设置为4比较好。而之所以是4,是因为每个图层其实都需要一个蒙板来参与混合计算,一张贴图最多有RGBA四个通道,这样我们就可以用一张贴图来存储四个蒙板。
然后来看下我们最终的实现效果:(没有合适的卡牌原画只能随便截图一张了)
 接下来我们来分别实现上述功能。


三、实现
l  UV缩放
UV缩放是最简单的一个功能,我们可以通过下面的顶点着色器代码来实现:
o.uv.xy = TRANSFORM_TEX(v.uv, _MainTex);
TRANSFORM_TEX其实就是一个语法糖,具体实现可以在”UnityCG.cginc”中参看,这里略过不讲。通过上述代码,我们通过Tiling和Offset参数来调整uv的大小和偏移。
l  UV移动动画
UV移动动画也是比较简单的,根据时间_Time.y来修改uv以实现移动动画:
half2 DoMove(half2 uv, half4 param){
        return uv+param.xy*half2(_Time.y, _Time.y);
    }
其中param.xy存储的是uv移动的方向和速度,对param.xy做normalize后,即是uv的移动方向,而param.xy的长度即是移动的速度。
l  UV旋转动画
由于我们其实是在2D上做的旋转,所以这里我们需要一个2D的旋转矩阵:
Unity3D-实现炉石卡牌特效
这是一个逆时针旋转Unity3D-实现炉石卡牌特效弧度的旋转矩阵。然后我们考虑用它来对uv进行旋转变换:
half2 DoRotate(half2 uv, half4 param){
        float cosx = cos(param.z+param.w*_Time.y);
        float sinx = sin(param.z+param.w*_Time.y);
        float2x2 m2 = float2x2(cosx, -sinx, sinx, cosx);
        //
        return mul(m2, uv.xy-param.xy)+param.xy;
    }
     有几点需要注意,首先,如果我们对uv同时进行了旋转、缩放和平移的变换,那么一般来说,我们是先进行旋转变换,再进行其余两个变换。其次,param.xy是旋转的中心位置,我们应该先将uv平移-param.xy再进行旋转,最后平移param.xy。
l  扭曲
扭曲的一种最简单实现是利用法线贴图来扰动uv,这样用受到扰动的uv去取贴图上的像素时就有了扭曲的效果。
    half4 DoDistort(sampler2D src, half2 uv, half mask, sampler2D distTex, half2 uv2, half param)
{
   half4 distColor =  tex2D(distTex, uv2);
   half2 offsetUV = mask*UnpackNormal(distColor)*param;
   half4 result = tex2D(src, uv+offsetUV);
   return result;
}
 
最后,取mask贴图的RGBA四个通道,然后将四个图层和原图混合,就基本实现了炉石的金卡特效了:
col.xyz += effect.xyz * mask.r;
(effect是图层的像素值,col则是我们最终得到的结果。)
 
PS:uv动画还可以通过flow map来实现,灵活度更高,能做出更多的效果。
PPS:源码看情况放出,最近感觉文章的活跃度很低,没啥心情共享。而且原理和核心代码就上面那些,十分简单。

分享到微信 分享到QQ