中级Shader教程28 GameUI 血瓶

---

layout: post
title: “中级Shader教程28 GameUI 血瓶”
date: 2018-04-26 16:09:03
author: Jiepeng Tan
categories:

• shader tutorial
  tags: shader_tutorial UI shader bubble wave
  img_path: /assets/img/blog/ShaderTutorial2D/Snow
  mathjax: true

---

Shader 视频教程

shader基础教程（超多案例）

1.实现原理

1.颜色公式

col = a + b* cos(2PI * (ct + d))

更多的颜色变换:

比如彩虹的颜色公式：

col = .6 + .6 * cos( 6.3 * uv.y / _ScreenParam.y *2. + float4(0,23,21,0) );

2.绘制高光
一个小圆减去一个大圆就是一个月牙弧，如果要调整弧度，可以改变两个圆之间的大小比例，位置偏移。如果圆无法满足要求，则使用椭圆来进行集合操作

3.绘制波浪
使用RayMarch方式在原点绘制一个圆盘，然后通过在y值使用两个sin来合成一个小的wave，将这个渲染的结果通过类似贴图的方式贴在水面之上，通过时间控制其y值偏移即可。

raymarch 和 海洋的渲染 我其他的文章有涉及，这里就不说了

4.绘制泡泡
. 绘制一个反向圆，然后在里面绘制几个小圆模拟高光
. 泡泡的运动分为两部分：
0. y轴匀速

1. x轴先的加速度，后sin移动：在圆的底面随机沿着90-range(-60,60)的角度发射一定的初速度，然后添加一个负的加速度，当在x的方向的速度为0的时候停止加速度然后sin函数来控制泡泡左右移动，增加点动态。自己在稿纸上计算其积分，套进去就可以了。

5.这是一个特效。
灵感也是来自一个特效。所以代码中会有很多hack的数字，目的都是为了美术表现，所以怎么好看怎么来

5.源码

// create by JiepengTan 2018-03-25  email: jiepengtan@gmail.com

Shader "FishManShaderTutorial/GameHPUI" {
   
    Properties{
   
        _MainTex("Base (RGB)", 2D) = "white" {
   }
        _LoopNum ("_LoopNum", Vector) = (314.,1., 1, 1)
    }  
    SubShader
    {
   
        Tags {
    "RenderType"="Opaque" }
        LOD 100

        Pass
        {
   
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"
            #include "ShaderLibs/Math.cginc"

            #define  SIZE  0.5
            #define WATER_DEEP 0.6
            struct appdata
            {
   
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
   
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };
            
            float Rand(float x)
            {
   
                return frac(sin(x*866353.13)*613.73);
            }

            float2x2 Rotate2D(float deg){
   
                deg = deg * Deg2Radius;
                return float2x2(cos(deg),sin(deg),-sin(deg),cos(deg));
            }
            float2 Within(float2 uv, float4 rect) {
   
                return (uv-rect.xy)/(rect.zw-rect.xy);
            }
            float Remap(float a,float b,float c,float d,float val){
   
                return (val-a)/(b-a) * (d-c) + c;
            }

            float Circle(float2 uv,float2 center,float size,float blur){
   
                uv = uv - center;
                uv /= size;
                float len = length(uv);
                return smoothstep(1.,1.-blur,len);
            }

            float PureCircle(float2 uv,float2 center,float size,float blur,float powVal){
   
                uv = uv - center;
                uv /= size;
                float len = 1.-length(uv);
                float val = clamp(Remap(0.,blur,0.,1.,len),0.,1.);
                return pow(val,powVal);//* pow(1.+len * 3.,0.1);
            }
            float Ellipse(float2 uv,float2 center,float2 size,float blur){
   
                uv = uv - center;
                uv /= size;