在 Unity 中创建螺旋形 UI 栏答案

【问题标题】：create a spiral UI bar in Unity在 Unity 中创建螺旋形 UI 栏
【发布时间】：2018-01-03 08:02:11
【问题描述】：

是否可以在 Unity 中创建这样的栏？

默认组件似乎只能在原始状态下工作。我可以将矩形作为条形或径向条。

这个螺旋条需要能够访问路径，因为颜色必须知道如何沿着精灵移动。

【问题讨论】：

我会创建不同的直条来实现这一点。就像总条有 10 条边，10 条不同的条。一个满了，就开始填另一个。但我也想知道是否有更简单的方法。
是的，我想过，但这个“技巧”可能会以过度设计而告终

标签： user-interface unity3d

【解决方案1】：

我会使用带有“填充信息”的精灵的自定义着色器作为 Alpha 通道。

在下图中，您将看到您的原始精灵，以及另一个带有渐变 alpha 的精灵（抱歉，我不是 Photoshop 专家）。

您可以在their website 上下载 Unity 着色器，然后在 DefaultResourcesExtra/UI 中选择 UI-Default.shader 并稍微调整以填充根据精灵的 alpha 值生成精灵。

类似的东西（未测试）

Shader "UI/FillAlpha"
{
    Properties
    {
        [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
        _Color ("Tint", Color) = (1,1,1,1)

        _FillAmount ("Fill amount", Float) = 1

        // ...
    }

    SubShader
    {
        // ...

            sampler2D _MainTex;
            fixed _FillAmount;

            fixed4 frag(v2f IN) : SV_Target
            {
                half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;

                color.a = color.a > _FillAmount ? 1 : 0 ;

                color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);

                // ...

                return color;
            }
        ENDCG
        }
    }
}

然后，您将能够使用myMaterial.SetFloat 更改FillAmount 参数

【讨论】：

如果您想避免逻辑运算符“大于”出现的混叠问题，您应该使用保留渐变中细微差别的函数，例如：color.a = saturate((color.a - _FillAmount) * _Transition );

【解决方案2】：

您可以使用Line Renderer 组件来创建您的酒吧。在此处查看文档和示例：

https://docs.unity3d.com/Manual/class-LineRenderer.html

https://docs.unity3d.com/352/Documentation/Components/class-LineRenderer.html

请注意，Line Renderer 在 3D 空间中工作。

【讨论】：