Unity制作曲线进度条

这篇具有很好参考价值的文章主要介绍了Unity制作曲线进度条。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

unity制作曲线进度条

  大家好,我是阿赵。
  在使用Unity引擎做进度条的时候,有时会遇到一个问题,如果进度条不是简单的横向、纵向或者圆形,而是任意的不规则形状,那该怎么办呢?比如这样的:
unity 画曲线,Unity引擎Shader效果,unity,游戏引擎,进度条,曲线

一、制作方法

1、准备的素材

  这个进度条的原理很简单,我们需要一张跟随这路径变化灰度的图片。这张图片大概是这样的:
unity 画曲线,Unity引擎Shader效果,unity,游戏引擎,进度条,曲线
unity 画曲线,Unity引擎Shader效果,unity,游戏引擎,进度条,曲线

  我这里使用了RGB通道作为灰度,然后Alpha通道作为显示范围。结合在一起,在Unity里面会是这样的一张图:
unity 画曲线,Unity引擎Shader效果,unity,游戏引擎,进度条,曲线

  当然,图片也有另外的做法,比如我们想在进度条上显示一些渐变色或者纹理,可以把图片的RGB通道作为纹理图片,然后Alpha通道作为灰度变化也是可以的,毕竟灰度变化其实只用一个通道就够,没必要用RGB三个通道。

2、计算过程

目的:
1.可以使用在UI上
2.通过Image的图片作为输入
3.通过Image的颜色的RGB通道作为进度条的颜色
4.通过Image的颜色的A通道作为进度条显示的进度控制
unity 画曲线,Unity引擎Shader效果,unity,游戏引擎,进度条,曲线

  颜色的计算很简单,直接获取顶点色的RGB就可以了。如果觉得纯颜色的RGB不好看,也可以再另外做一张有颜色的图片作为显示用。
  接下来是遮罩进度条的效果。因为这里我直接用了图片的RGB色的灰度渐变,所以我先取了一个RGB的灰度。如果像上面说的,RGB颜色想自己做一个有图案的进度条图片,那么其实这个进度的也可以不用RGB色,而改用图片的Alpha通道作为灰度也是可以的。
unity 画曲线,Unity引擎Shader效果,unity,游戏引擎,进度条,曲线unity 画曲线,Unity引擎Shader效果,unity,游戏引擎,进度条,曲线

  不论怎样,获得了一个图片的灰度值,然后输入一个想控制进度的值,用这个值和灰度值做减法,再用Step函数控制显示的范围。如果想过渡的地方有一个渐变的效果,可以使用SmoothStep函数。由于灰度是沿着路径渐变的,当输入的值变化时,显示范围就会沿着灰度路径而变化了。
  最后,把Step的结果作为显示的Alpha值,结合需要显示的RGB颜色,就能得到进度条最终的显示颜色和范围了。

3、灰度渐变图的制作

  这个方法的难点不在于shader的编写,而在于素材的制作。
  我这里是用3D的方式来制作这个图片的,首先建一个面片,把它的横向段数设置到1000。
unity 画曲线,Unity引擎Shader效果,unity,游戏引擎,进度条,曲线

  然后展UV,面片的最左边的u坐标是0,最右边的u坐标是1。然后做一张从左到右的渐变图。把渐变图赋予给面片。
unity 画曲线,Unity引擎Shader效果,unity,游戏引擎,进度条,曲线

  最后通过路径变形,把面片沿着路径拉伸,得到了形状。
unity 画曲线,Unity引擎Shader效果,unity,游戏引擎,进度条,曲线

最后,把这个模型渲染出来,就得到了上面的渐变灰度图了。

  这样做,勉强能得到一个分布均匀的灰度图,但并不是100%准确。如果想得到一个完全匹配百分比的变化的灰度图,比如在进度条上画上刻度,然后想输入什么百分比,图片的灰度刚好到达那个百分比,那还要想别的办法去做这张图。文章来源地址https://www.toymoban.com/news/detail-766612.html

三、Shader源码

Shader "azhao/CurveProgress"
{
	Properties
	{
		[PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
		_Color ("Tint", Color) = (1,1,1,1)
		
		_StencilComp ("Stencil Comparison", Float) = 8
		_Stencil ("Stencil ID", Float) = 0
		_StencilOp ("Stencil Operation", Float) = 0
		_StencilWriteMask ("Stencil Write Mask", Float) = 255
		_StencilReadMask ("Stencil Read Mask", Float) = 255

		_ColorMask ("Color Mask", Float) = 15

		[Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
		_min("min", Range( -1 , 1)) = 0
		_max("max", Range( 0 , 1)) = 1
		[HideInInspector] _texcoord( "", 2D ) = "white" {}

	}

	SubShader
	{
		LOD 0

		Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" "PreviewType"="Plane" "CanUseSpriteAtlas"="True" }
		
		Stencil
		{
			Ref [_Stencil]
			ReadMask [_StencilReadMask]
			WriteMask [_StencilWriteMask]
			CompFront [_StencilComp]
			PassFront [_StencilOp]
			FailFront Keep
			ZFailFront Keep
			CompBack Always
			PassBack Keep
			FailBack Keep
			ZFailBack Keep
		}


		Cull Off
		Lighting Off
		ZWrite Off
		ZTest [unity_GUIZTestMode]
		Blend SrcAlpha OneMinusSrcAlpha
		ColorMask [_ColorMask]

		
		Pass
		{
			Name "Default"
		CGPROGRAM
			
			#pragma vertex vert
			#pragma fragment frag
			#pragma target 3.0

			#include "UnityCG.cginc"
			#include "UnityUI.cginc"

			#pragma multi_compile __ UNITY_UI_CLIP_RECT
			#pragma multi_compile __ UNITY_UI_ALPHACLIP
			
			#define ASE_NEEDS_FRAG_COLOR

			
			struct appdata_t
			{
				float4 vertex   : POSITION;
				float4 color    : COLOR;
				float2 texcoord : TEXCOORD0;
				UNITY_VERTEX_INPUT_INSTANCE_ID
				
			};

			struct v2f
			{
				float4 vertex   : SV_POSITION;
				fixed4 color    : COLOR;
				half2 texcoord  : TEXCOORD0;
				float4 worldPosition : TEXCOORD1;
				UNITY_VERTEX_INPUT_INSTANCE_ID
				UNITY_VERTEX_OUTPUT_STEREO
				
			};
			
			uniform fixed4 _Color;
			uniform fixed4 _TextureSampleAdd;
			uniform float4 _ClipRect;
			uniform sampler2D _MainTex;
			uniform float4 _MainTex_ST;
			uniform float _min;
			uniform float _max;

			
			v2f vert( appdata_t IN  )
			{
				v2f OUT;
				UNITY_SETUP_INSTANCE_ID( IN );
                UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
				UNITY_TRANSFER_INSTANCE_ID(IN, OUT);
				OUT.worldPosition = IN.vertex;
				
				
				OUT.worldPosition.xyz +=  float3( 0, 0, 0 ) ;
				OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);

				OUT.texcoord = IN.texcoord;
				
				OUT.color = IN.color * _Color;
				return OUT;
			}

			fixed4 frag(v2f IN  ) : SV_Target
			{
				float2 uv_MainTex = IN.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.zw;
				float4 tex2DNode1 = tex2D( _MainTex, uv_MainTex );
				float grayVal = Luminance(tex2DNode1.rgb);
				float remapVal = ( grayVal - ( 1.0 - (0.0 + (( IN.color.a + 0.01 ) - 0.0) * (( _max + 1.0 ) - 0.0) / (1.0 - 0.0)) ) );
				float smoothstepVal = smoothstep( _min , _max , remapVal);
				float4 color = (float4(IN.color.r , IN.color.g , IN.color.b , ( tex2DNode1.a * smoothstepVal )));
				
			
				#ifdef UNITY_UI_CLIP_RECT
                color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
                #endif
				
				#ifdef UNITY_UI_ALPHACLIP
				clip (color.a - 0.001);
				#endif

				return color;
			}
		ENDCG
		}
	}
	
	
	
}

到了这里,关于Unity制作曲线进度条的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • SuperMap Hi-Fi 3D SDK for Unity制作游戏引擎材质

    kele     在交通,电力,规划等行业中,有的对象常常具有很强的质感,比如金属质感的 钢轨,电力塔;陶瓷材质的绝缘子;玻璃材质的建筑幕墙等,但常规方式的表现效果 往往差强人意。     游戏引擎(Unity3D)中已有丰富的材质资源库,比如玻璃,金属等材质,这

    2024年02月09日
    浏览(84)
  • 【用unity实现100个游戏之19】制作一个3D传送门游戏,实现类似鬼打墙,迷宫,镜子,任意门效果

    https://assetstore.unity.com/packages/3d/props/interior/doo

    2024年02月03日
    浏览(52)
  • 【用unity实现100个游戏之1】制作类元气骑士、挺进地牢——俯视角射击游戏多种射击效果(二)(附源码)

    参考原视频链接 : 【视频】:https://space.bilibili.com/641773200 注意 :本文为学习笔记记录,推荐支持原作者,去看原视频自己手敲代码理解更加深入

    2024年02月07日
    浏览(62)
  • 【用unity实现100个游戏之1】制作类元气骑士、挺进地牢——俯视角射击游戏多种射击效果(一)(附源码)

    参考原视频链接 【视频】:https://space.bilibili.com/641773200 注意 :本文为学习笔记记录,推荐支持原作者,去看原视频自己手敲代码理解更加深入 近几年 俯视角射击游戏 随着《挺进地牢》等双摇杆射击游戏的火热再次出现在玩家的视野中,这类游戏通常都有种类繁多的 武器

    2024年02月12日
    浏览(48)
  • 【Unity Shader】Unity中利用GrabPass实现玻璃效果

    《入门精要》中模拟玻璃是用了Unity里的一个特殊的Pass来实现的,这个Pass就是 GrabPass ,比起上一篇博客实现镜子的方法,这个方法我认为相对复杂,因此在实现之前需要对GrabPass及实现原理做一个更加详细的介绍。 场景物体拜访和贴图完全参考《入门精要》: 以及当前场景

    2024年02月09日
    浏览(46)
  • Unity Shader学习3:透明效果

    Unity中的透明效果由透明通道控制(RGBA中的A),其值为0是完全透明,为1时完全不透明。有两种方法可以实现透明效果: 透明度测试(Alpha Test) 和 透明度混合(Alpha Blend) 。 透明度测试是指通过特定的条件(通常是Alpha通道的值是否超过某个阈值)来判断片元是否透明,只

    2024年01月19日
    浏览(59)
  • 【Unity Shader】Unity中阴影映射标准制作流程

    前半部分的基于图片的实时阴影技术是百人计划的前半部分总结,后面的Unity中的实现过程是《入门精要》中的实现。 这里的“基于图片”指阴影生成一张图片。 他并不是一个基于图片的解决方案,但思路值得借鉴。 缺点:只能投影到平面;投影物体必须在光线和平面之间

    2023年04月17日
    浏览(32)
  • Unity Shader入门精要学习——透明效果

    要么完全透明,要么完全不透明。 实现简单,实质上是一种剔除机制,通过将不满足条件(通常使用小于某个阈值来判定,一般使用clip方法)的片元舍弃的方法来达到完全透明效果。这些被舍弃的片元不会再进行任何的处理,也不会对颜色缓冲产生任何影响,其余满足条件

    2024年02月17日
    浏览(47)
  • Unity用Shader实现边缘光效果

    《自学记录》 1、先创建一个Cube,再创建两个材质球Cube、Unilt 2、再创建一个shader代码UniltShader【Project右键Create-Shader-NewSurfaceShader】把里面原来的代码删除,写入下面的代码 3、把shader UniltShader拖给材质球Unilt 4、把Cube的Mesh Renderer中Materials的Size改为2,然后把材质球Cube、Unilt分

    2024年02月08日
    浏览(44)
  • 学习100个Unity Shader (14) ---透明效果

    由”Queue“ 标签决定,索引号越小越早被渲染: 名称 队列索引号 Background 1000 Geometry 2000 AlphaTest 2450 Transparent 3000 Overlay 4000 某一片元的透明度小于某个阈值,即被舍弃,反之,按非透明物体处理,进行正常的深度测试和深度写入【不需要关闭深度写入】。 UnityObjectToClipPos 将顶

    2024年04月29日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包