UnityShader3实现转圈与冷却效果

本文实例为大家分享了UnityShader3实现转圈与冷却效果的具体代码,供大家参考,具体内容如下

参考链接:OpenGL Shader实例分析(3)等待标识效果

一.转圈效果

效果图:

如何实现一个圆绕中心点运动呢?原理很简单,就是随着时间的流逝,起始边固定,而另一条边不断地移动,弧度从0到2*PI,只需求出移动边与圆边的交点,然后画圆即可。至于这个交点,因为圆心的uv为(0.5,0.5),所以交点的坐标就是(0.5 - r * cos(a) , 0.5 + r * sin(a))。

Shader "Custom/Loading"
{
 Properties
 {
 _Color ("Color", Color) = (0, 1, 0, 1)
 _Speed ("Speed", Range(1, 10)) = 1
 _Radius ("Radius", Range(0, 0.5)) = 0.3
 }
 SubShader
 {
 Tags { "Queue" = "Transparent" }
 Blend SrcAlpha OneMinusSrcAlpha
 ZWrite Off

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

  #define PI 3.14159

  struct appdata
  {
  float4 vertex : POSITION;
  float2 uv : TEXCOORD0;
  };

  struct v2f
  {
  float4 vertex : SV_POSITION;
  float2 uv : TEXCOORD0;
  };

  fixed4 _Color;
  half _Speed;
  fixed _Radius;

  fixed4 circle(float2 uv, float2 center, float radius)
  {
  //if(pow(uv.x - center.x, 2) + pow(uv.y - center.y, 2) < pow(radius, 2)) return _Color;

  if(length(uv - center) < radius) return _Color;
  else return fixed4(0, 0, 0, 0);
  }

  v2f vert (appdata v)
  {
  v2f o;
  o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
  o.uv = v.uv;

  return o;
  }

  fixed4 frag (v2f i) : SV_Target
  {
  fixed4 finalCol = (0, 0, 0, 0);

  for(int count = 7; count > 1; count--)
  {
   half radian = fmod(_Time.y * _Speed + count * 0.5, 2 * PI);//弧度
   half2 center = half2(0.5 - _Radius * cos(radian), 0.5 + _Radius * sin(radian)); 

   finalCol += circle(i.uv, center, count * 0.01);
  }

  return finalCol;
  }
  ENDCG
 }
 }
}

二.冷却效果

效果图:

参考上面那张原理图,稍加修改就可以了。

Shader "Custom/Cooling"
{
 Properties
 {
 _MainTex ("Texture", 2D) = "white" {}
 _Speed ("Speed", Range(1, 10)) = 1
 _Color ("Color", Color) = (0, 0, 0, 1)
 }
 SubShader
 {
 Pass
 {
  CGPROGRAM
  #pragma vertex vert
  #pragma fragment frag
  #include "UnityCG.cginc"

  #define PI 3.142

  struct appdata
  {
  float4 vertex : POSITION;
  float2 uv : TEXCOORD0;
  };

  struct v2f
  {
  float4 vertex : SV_POSITION;
  float2 uv : TEXCOORD0;
  };

  sampler2D _MainTex;
  float4 _MainTex_ST;
  half _Speed;
  fixed4 _Color;

  v2f vert (appdata v)
  {
  v2f o;
  o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
  o.uv = TRANSFORM_TEX(v.uv, _MainTex);
  return o;
  }

  fixed4 frag (v2f i) : SV_Target
  {
  fixed4 col = tex2D(_MainTex, i.uv);

  //以正中间为中心,所以将uv范围映射到(-0.5, 0.5)
  float2 uv = i.uv - float2(0.5, 0.5);
  //atan2(y, x):反正切,y/x的反正切范围在[-π, π]内
  //-1用于控制方向
  float radian = atan2(uv.y, uv.x) * -1 + PI;

  float2 radian2 = fmod(_Time.y * _Speed, 2 * PI);
  fixed v = step(radian, radian2);

  if(v > 0) return col;
  else return col * _Color;
  }
  ENDCG
 }
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • OpenGL Shader实例分析(3)等待标识效果

    本文实例为大家分享了OpenGL Shader实例,等待标识,不过效率估计不是很高.结果如下: 代码: Shader "stalendp/waitIcons" { CGINCLUDE #include "UnityCG.cginc" #pragma target 3.0 struct v2f { float4 pos:SV_POSITION; float2 uv : TEXCOORD0; }; v2f vert(appdata_base v) { v2f o; o.

  • UnityShader3实现转圈与冷却效果

    本文实例为大家分享了UnityShader3实现转圈与冷却效果的具体代码,供大家参考,具体内容如下 参考链接:OpenGL Shader实例分析(3)等待标识效果 一.转圈效果 效果图: 如何实现一个圆绕中心点运动呢?原理很简单,就是随着时间的流逝,起始边固定,而另一条边不断地移动,弧度从0到2*PI,只需求出移动边与圆边的交点,然后画圆即可.至于这个交点,因为圆心的uv为(0.5,0.5),所以交点的坐标就是(0.5 - r * cos(a) , 0.5 + r * sin(a)). Shad

  • iOS点击文字按钮变转圈加载效果

    本文实例为大家分享了iOS点击文字按钮变转圈加载效果的相关代码,供大家参考,具体内容如下 实现效果: 实现代码: // 画弧线 - (void)drawHalfCircle { loadingLayer = [self drawCircle]; // 这个是用于指定画笔的开始与结束点 loadingLayer.strokeStart = 0.0; loadingLayer.strokeEnd = 0.75; } - (CAShapeLayer *)drawCircle { CGRect fram

  • UnityShader3实现波浪效果

    本文实例为大家分享了UnityShader3实现波浪效果展示的具体代码,供大家参考,具体内容如下 参考链接: [OpenGL]Shader实例分析(一)-Wave 效果图: 1.首先,实现格子背景图 Shader "Custom/Curve" { Properties { _BackgroundColor ("BackgroundColor", Color) = (1, 1, 1, 1) _BackgroundColor2 ("BackgroundColo

  • UnityShader3实现彩光效果

    本文实例为大家分享了UnityShader3实现彩光效果展示的具体代码,供大家参考,具体内容如下 参考链接: [OpenGL]Shader实例分析(八)- 彩色光圈 效果图: 这里我把它分三部分实现:1.彩色 2.光圈 3.动画 1.先实现彩色效果.分析一下那张彩色图,它是以中心为原点的,然后颜色分为三部分,如下图.当角度为90度时,蓝色最多:当角度为-150度时,红色最多:当角度为-30度时,绿色最多.然后其他地方就是三色混合. Shader "Custom/Colors" { Pr

  • java实现转圈打印矩阵算法

    本文实例为大家分享了java实现转圈打印矩阵的具体代码,供大家参考,具体内容如下 给定一个整形矩阵Matrix,请按照顺时针方向转圈的方式,输入(打印)元素值. 例如: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 输出结果为:1 2 3 4 8 12 16 15 14 13 9 5 6 7 11 10 要求:额外空间复杂度为O(1) JAVA代码如下: package com.bean.algorithmexec; public class MatrixDemo

  • python实现转圈打印矩阵

    本文实例为大家分享了python实现转圈打印矩阵的具体代码,供大家参考,具体内容如下 #! conding:utf-8 __author__ = "hotpot" __date__ = "2017/10/28 9:40" def return_edge(matrix, start_col, end_col, start_row, end_row): if start_row == end_row: return matrix[start_row][start_col

  • UnityShader3实现2D描边效果

    本文实例为大家分享了UnityShader3实现2D描边效果的具体代码,供大家参考,具体内容如下 1. Shader "Custom/Edge" { Properties { _MainTex ("Texture", 2D) = "white" {} _OffsetUV ("OffsetUV", Range(0, 1)) = 0.1 _EdgeColor ("EdgeColor", Color) = (1,

  • Android自定义View实现自动转圈效果

    本文实例为大家分享了Android实现自动转圈效果展示的具体代码,供大家参考,具体内容如下 在values文件夹下创建attrs.xml <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="MyPb"> <attr name="circle_color" format="col

  • Android ProgressDialog用法之实现app上传文件进度条转圈效果

    ProgressDialog 继承自AlertDialog,AlertDialog继承自Dialog public class ProgressDialog extends AlertDialog ProgressDialog的创建方式有两种,一种是new ProgressDialog,一种是调用ProgressDialog的静态方法show()创建并显示,这种进度条只能是圆形条. ProgressDialog dialog = ProgressDialog.show(this, "提示&quo

  • CocosCreator实现技能冷却效果

    CocosCreator实现技能CD效果 在很多游戏里面都有技能,玩家在点击技能按钮后技能会有一个冷却的时间,当冷却时间过了之后技能才可以再次使用 在cocos中实现这个效果很简单,需要用到精灵组件 首先将技能按钮的图片拖到canvas下 然后在技能按钮下新建一个label 像这样 然后新建TS脚本把下面的代码复制粘贴进去 const {ccclass, property} = cc._decorator; @ccclass export default class NewClass exten

随机推荐