MY BLOG DIRECTORY:

小IVan:专题概述及目录​zhuanlan.zhihu.com

INTRODUCTION:

当遇见某些特殊需求,比如对游戏效果有很多变化的要求,这时使用静态的贴图就不太适合了,这时候就需要实时计算绘制出来的数据。下面就来总结一些常用的程序化UI效果,下面的效果将全部使用公式计算的方式生成,不使用一张贴图。


MAIN CONTENT:

【1】律动波形

使用

这个简单的公式,把图像画出来

然后重复一次相减即可得到一条细线。然后再重叠第二个波上去,即可得到更有变化的效果。我这里只叠加了两个波,如果还想更丰富还可以继续往上叠。

上面的材质连线是不是太乱了呢,而且如果想做更复杂的叠波就比较困难了,材质编辑器能把人头连晕,所以我下面封装了一个框架来帮助我解决这个事情。

void GetWaveFeild(out float Up, out float Down, in float A, in float T, in float WaveWidth, in float2 UV, in float time)
{float TwoPI = 3.1415926 * 2;Up = A * sin(TwoPI / T * UV.x + time);Down = A * sin(TwoPI / T * UV.x + time) + WaveWidth;
}float GetWaveColor(in float FeildUp, in float FeildDown, in float UVY)
{UVY = UVY - 0.5;return step(UVY, FeildDown) - step(UVY, FeildUp);
}float CalculateWave(in float2 UV, float A, float T, float WaveWidth, in float time)
{float Output = 0;float WaveFeildUp = 0;float WaveFeildDown = 0;// If you need more wave feild. Adding them here!float WaveUp_01 = 0;float WaveDown_01 = 0;GetWaveFeild(WaveUp_01, WaveDown_01, A, T, WaveWidth, UV, time);float WaveUp_02 = 0;float WaveDown_02 = 0;GetWaveFeild(WaveUp_02, WaveDown_02, A, T * 2, WaveWidth, UV, time * -1.2);float WaveUp_03 = 0;float WaveDown_03 = 0;GetWaveFeild(WaveUp_03, WaveDown_03, A * 5, T * 0.2, WaveWidth, UV, time * 8);//Wave field blend operationsWaveFeildUp = WaveUp_01 + WaveUp_02 * WaveUp_03 + WaveUp_03 * 0.1;WaveFeildDown = WaveDown_01 + WaveDown_02 * WaveDown_03 + WaveDown_03 * 0.1;Output = GetWaveColor(WaveFeildUp, WaveFeildDown, UV.y);return Output;
}float RenderWave(in float2 UV, in float t)
{float Output = 0;Output = CalculateWave(UV, 0.1, 0.2, 0.02, t * 2);return Output;
}
//return RenderWave(UV, t);

最后的效果:

我这里只叠了三层,其实还可以叠更多。我来稍微讲解下这个框架。首先是要计算出波场,上波场和下波场,上下波场相减就能得到波的细线。GetWaveColor便是相减上下波场。我们如果要混合不同波,只能在计算波场的时候混合,在GetWaveColor之前。计算波场有很多种混合方式,相加相减相乘等。

把自变量x变成整数就可以得到柱状波形

如果不和Y的绝对值比较的话,可以得到一边的效果

【2】技能冷却

先用代码画个圆然后画冷却线

step(distance(uv, float2(0.5, 0.5)) , R);

冷却线

step(H, uv.y );

如果想要制作扇形效果,可以使用极坐标的方法,先把UV变换到中心点

然后用极坐标判断即可

float SkillTime(float2 uv, float R, float Radius)
{float2 centeruv = uv - 0.5f;float cos = dot(normalize(centeruv), float2(1,0));return step(Radius, cos);
}

【3】旋转扭曲

使用旋转矩阵变换一下就好了,还是非常简单的

请无视gif压缩产生的马赛克
float2 RotateUV(float2 uv,float2 center, float angle)
{float PI = 3.1415927f;float Ang = angle * (2.0f * PI/ 360.0f);float2 RowX = float2(cos(Ang), -sin(Ang));float2 RowY = float2(sin(Ang), cos(Ang));float ArgOne = dot(RowX, uv - center);float ArgTwo = dot(RowY, uv - center);return float2(ArgOne, ArgTwo) + center;
}

有了最基础的旋转,就可以在此基础上做些其它效果了

代码如下:

float2 Twirl(float2 uv, float2 centeroffset, float strenth)
{   //Transform uv to centeruv = uv - float2(0.5, 0.5);//Offset the uv centerfloat2 delta = uv - centeroffset;float angle = strenth * length(delta);float x = cos(angle) * delta.x - sin(angle) * delta.y;float y = sin(angle) * delta.x + cos(angle) * delta.y;float RowX = x + centeroffset.x;float RowY = y + centeroffset.y;return float2(RowX, RowY);
}

【4】SubUVAnimation

把水印P掉即可使用

SubUVAnimation其实是经常会使用到的东西,原理非常简单,就是整块整块挪动UV,虽然很简单但是很容易出错。

float2 SubUV(float t, float2 coord)
{float SubUVX = 4;float SubUVY = 4;float Time = floor(t);float row = floor(Time / SubUVX);float cloum = Time + row * SubUVX;float2 UV = coord + float2(cloum, row);UV.x /= SubUVX;UV.y /= SubUVY;return UV;
}

首先需要确保UV的方向和贴图的Animation方向是相同的

 float row = floor(Time / SubUVX);    float cloum = Time + row * SubUVX;

Cloum的数量是Row的横轴格数的倍数加当前横轴位置。

这里的UV偏移是非常大的,需要把UV限制到0-1所以除以X和Y的SubUV数目,这里一定是最后缩放到0-1,因为如果先缩放到0-1会产生累积误差。最后可以再采一次time+1时候的图像和当前图像做插值,这样来做帧缓存让图像更加顺滑。


SUMMARY AND OUTLOOK:

Enjoy it!


NEXT:

YivanLee:虚幻4渲染编程(UI篇)【第三卷:程序化UI特效-[2]】

渲染到ui_虚幻4渲染编程(UI篇)【第二卷:程序化UI特效-[1]】相关推荐

  1. 并发编程基础篇——第二章(如何创建线程)

    上节讲了基础概念,本章正式进入线程专题,对基础薄弱的同学可以好好看本章!! 1.Thread匿名子类 我们可以通过下面的代码来直接创建一个线程. // 构造方法的参数是给线程指定名字,推荐 Threa ...

  2. Java编程基础篇第二章

    关键字 概述:被Java语言赋予特定含义的单词. 特点:组成关键字的字母全部为小写字母. 标识符 概述:给类,接口,包,方法,常量起名字时的字符序列 组成规则:英文大小写字母,数字,$和- 命名规则. ...

  3. 虚幻4渲染编程(游戏Demo篇)【第一卷:飞机大战】

    我的专栏目录: 小IVan:急速游戏开发综述及目录 概述: 技术美术需要对整个游戏制作流程都非常清楚,这样才能在开发中提出合理的制作方法.有时候有空可以自己做做游戏demo,这个过程也非常有趣.游戏D ...

  4. 虚幻4皮肤材质_虚幻4渲染编程(材质编辑器篇)【第六卷:各向异性材质amp;玻璃材质】...

    My blog directory: YivanLee:专题概述及目录​zhuanlan.zhihu.com Introduction: 各向异性材质 玻璃材质 材质编辑器篇的很多效果都非常简单,可以 ...

  5. 虚幻4渲染编程(材质编辑器篇)【第三卷:正式准备开始材质开发】

    My blog directory: YivanLee:专题概述及目录 Introduction: 前面两章我们已经完成了对工具的研究,下面我们久正式开始启程啦!后面的内容可能就比较美术了. 还是老规 ...

  6. 虚幻4渲染编程(光线追踪篇)【第一卷:光线追踪篇开篇综述】

    MY BLOG DIRECTORY: 小IVan:专题概述及目录​zhuanlan.zhihu.com INTRODUCTION: 什么都不说了先上个效果: 光线追踪云 电子游戏的光线追踪时代即将到来 ...

  7. 虚幻4渲染编程(环境模拟篇)【第三卷:体积云天空模拟(3)---高层云】

    我的专栏目录: 小IVan:专题概述及目录 目前业内流行有两种体积云模拟的方式,模型+特殊shader法,RayMarching法.我前两篇文章已经对它们都做了介绍.当然还有些比较非主流的,比如粒子云 ...

  8. 虚幻4渲染编程(环境模拟篇)【第五卷:可交互物理植被模拟 - 上】

    我的专栏目录: 小IVan:专题概述及目录 开篇综述 这一卷将会开始研究可交互植被环境的模拟.我把可交互植被环境模拟这个大的课题拆解为几个部分.我挑选了几个森林模拟至关重要的几个要素并且实现它们. [ ...

  9. 虚幻4渲染编程(材质编辑器篇)【第五卷:布料,丝绸纱皮革棉】

    My blog directory: 小IVan:专题概述及目录 Introduction: 现在的游戏对质感要求越来越高(我估计是硬件越来越好,可编程管线越来越来越完善).游戏的画面已经越来越接近影 ...

最新文章

  1. java stringbuffer 转数组_JAVA之旅(十七)——StringBuffer的概述,存储,删除,获取,修改,反转,将缓存区的数据存储到数组中,StringBuilder...
  2. 加拿大大学 计算机专业排名2015,加拿大大学计算机专业排名top15
  3. Spring与网关的集成
  4. 数据结构之优先队列:优先队列的介绍与基础操作实现,Python代码实现——14
  5. java ntpudpclient_使用NTP获取网络时间-----java
  6. 2020-09-15
  7. 简单常用的10个excel公式
  8. 【滤波器】最小均方(LMS)自适应滤波器
  9. cisco思科交换机的基本使用
  10. python椭圆拟合_椭圆拟合(python)
  11. Symbian使用TTime类获取系统时间并转换为描述符
  12. 如何确保网站的安全性
  13. hadoop错误:java.io.IOException: There appears to be a gap in the edit log. We expected txid 1
  14. 14: PYCURL ERROR 6 - Couldn't resolve host 'mirro
  15. 第三代CAN技术即将到来
  16. (¥1011)-(一千零一拾一元整)输出
  17. 机智云轻网关服务,提升生产管理效率
  18. 微信小程序分销系统有哪些营销模式?看完你就秒懂了!
  19. 国产最强分布式调度,它回来了
  20. java去除音频无声_如何给视频消音 把视频中的声音去掉只留视频画面

热门文章

  1. 什么是动态语言(转)
  2. Understanding HBase and BigTable 译文
  3. Nodejs介绍及其安装
  4. ssh端口映射,本地转发
  5. 20151217:Web之Repeater使用:添加
  6. Oracle中比较日期大小
  7. 如何采用简化方法进行需求分析
  8. dedecms模板中首页实现分页的方法
  9. 7个步骤,帮您轻松实现云迁移
  10. Python 字符串改变