Implémentation de barres de progression variées avec des shaders Unity

Shader de barre de progression circulaire


Shader "CustomCircularProgress"
{
    Properties
    {
        _FondTex("Texture de fond", 2D) = "white" {}
        _MasqueTex("Texture de masque", 2D) = "white" {}
        _CouleurTeinte("Teinte", Color) = (1,1,1,1)
        _Progression("Angle", range(0,361)) = 360
        _PointCentral("Centre", vector) = (.5,.5,0,0)
        _Epaisseur("Largeur", float) = 1
        _MasquePrecision("Précision masque", range(0,1)) = 0.3
        _MasqueCouleur("Masque couleur", Float) = 15
    }

    SubShader
    {
        Tags
        {
            "Queue" = "Transparent"
            "IgnoreProjector" = "True"
            "RenderType" = "Transparent"
            "PreviewType" = "Plane"
            "CanUseSpriteAtlas" = "True"
        }

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

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

            float _Progression;
            float4 _PointCentral;
            half _Epaisseur;
            fixed4 _CouleurTeinte;
            fixed _MasquePrecision;
            sampler2D _MasqueTex;
            sampler2D _FondTex;
            float4 _MasqueTex_ST;
            float4 _FondTex_ST;

            struct appdata
            {
                float4 position : POSITION;
                float4 couleur : COLOR;
                float2 coordTex : TEXCOORD0;
            };

            struct v2f
            {
                float4 position : SV_POSITION;
                fixed4 couleur : COLOR;
                half2 uvMasque : TEXCOORD0;
                half2 uvFond : TEXCOORD1;
            };

            v2f vert(appdata entree)
            {
                v2f sortie;
                sortie.position = UnityObjectToClipPos(entree.position);
                sortie.uvMasque = TRANSFORM_TEX(entree.coordTex, _MasqueTex);
                sortie.uvFond = TRANSFORM_TEX(entree.coordTex, _FondTex);
                sortie.couleur = entree.couleur * _CouleurTeinte;
                return sortie;
            }

            fixed4 frag(v2f entree) : SV_Target
            {
                half4 couleurMasque = tex2D(_MasqueTex, entree.uvMasque) * entree.couleur;
                float2 delta = entree.uvMasque.xy - _PointCentral.xy;
                float angleCalcule = degrees(atan2(delta.x, -delta.y)) + 180;
                couleurMasque.a *= saturate((angleCalcule - _Progression) / _Epaisseur);

                half4 couleurFond = tex2D(_FondTex, entree.uvFond) * entree.couleur;
                float seuil = step(_MasquePrecision, couleurMasque.a);
                couleurMasque = seuil * couleurMasque + (1 - seuil) * couleurFond;

                return couleurMasque;
            }
            ENDCG
        }
    }
}

Shader de barre de progression linéaire


Shader "CustomLinearProgress"
{
    Properties
    {
        _FondTex("Texture de fond", 2D) = "white" {}
        _ProgressionTex("Texture de progression", 2D) = "gray" {}
        _ValeurProgression("Valeur progression", Range(0,1)) = 0.3
        _CouleurTeinte("Teinte", Color) = (1,1,1,1)
        _MasqueStencil("Masque Stencil", Float) = 15
        [Toggle(UNITY_UI_ALPHACLIP)] _UtiliserAlphaClip("Utiliser Alpha Clip", Float) = 0
    }

    SubShader
    {
        Tags
        {
            "Queue" = "Transparent"
            "IgnoreProjector" = "True"
            "RenderType" = "Transparent"
            "PreviewType" = "Plane"
            "CanUseSpriteAtlas" = "True"
        }

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

        Pass
        {
            Name "Par défaut"
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma target 2.0
            #include "UnityCG.cginc"
            #include "UnityUI.cginc"
            #pragma multi_compile __ UNITY_UI_CLIP_RECT
            #pragma multi_compile __ UNITY_UI_ALPHACLIP

            struct appdata
            {
                float4 position : POSITION;
                float4 couleur : COLOR;
                float2 coordTex : TEXCOORD0;
                UNITY_VERTEX_INPUT_INSTANCE_ID
            };

            struct v2f
            {
                float4 position : SV_POSITION;
                fixed4 couleur : COLOR;
                float2 coordTex : TEXCOORD0;
                float4 positionMondiale : TEXCOORD1;
                UNITY_VERTEX_OUTPUT_STEREO
            };

            fixed4 _CouleurTeinte;
            fixed4 _AjoutEchantillonTexture;
            float4 _ZoneDecoupage;

            v2f vert(appdata entree)
            {
                v2f sortie;
                UNITY_SETUP_INSTANCE_ID(entree);
                UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(sortie);
                sortie.positionMondiale = entree.position;
                sortie.position = UnityObjectToClipPos(sortie.positionMondiale);
                sortie.coordTex = entree.coordTex;
                sortie.couleur = entree.couleur * _CouleurTeinte;
                return sortie;
            }

            sampler2D _FondTex;
            sampler2D _ProgressionTex;
            half _ValeurProgression;

            fixed4 frag(v2f entree) : SV_Target
            {
                half masque = step(_ValeurProgression, entree.coordTex.y);
                half4 couleur = (tex2D(_FondTex, entree.coordTex) * masque + tex2D(_ProgressionTex, entree.coordTex) * (1 - masque) + _AjoutEchantillonTexture) * entree.couleur;

                #ifdef UNITY_UI_CLIP_RECT
                couleur.a *= UnityGet2DClipping(entree.positionMondiale.xy, _ZoneDecoupage);
                #endif

                #ifdef UNITY_UI_ALPHACLIP
                clip(couleur.a - 0.001);
                #endif

                return couleur;
            }
            ENDCG
        }
    }
}

Shader de barre de progression infinie par défilement UV


Shader "CustomInfiniteProgress"
{
    Properties
    {
        _TexturePrincipale("Texture principale", 2D) = "white" {}
        _VitesseDefilement("Vitesse défilement couche base", Float) = 1.0
        _CouleurTeinte("Teinte", Color) = (1,1,1,1)
        _MasqueStencil("Masque Stencil", Float) = 15
        [Toggle(UNITY_UI_ALPHACLIP)] _UtiliserAlphaClip("Utiliser Alpha Clip", Float) = 0
    }

    SubShader
    {
        Tags
        {
            "Queue" = "Transparent"
            "IgnoreProjector" = "True"
            "RenderType" = "Transparent"
            "PreviewType" = "Plane"
            "CanUseSpriteAtlas" = "True"
        }

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

        Pass
        {
            Name "Par défaut"
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma target 2.0
            #include "UnityCG.cginc"
            #include "UnityUI.cginc"
            #pragma multi_compile __ UNITY_UI_CLIP_RECT
            #pragma multi_compile __ UNITY_UI_ALPHACLIP

            struct appdata
            {
                float4 position : POSITION;
                float4 couleur : COLOR;
                float2 coordTex : TEXCOORD0;
                UNITY_VERTEX_INPUT_INSTANCE_ID
            };

            struct v2f
            {
                float4 position : SV_POSITION;
                fixed4 couleur : COLOR;
                float2 coordTex : TEXCOORD0;
                float4 positionMondiale : TEXCOORD1;
                UNITY_VERTEX_OUTPUT_STEREO
            };

            fixed4 _CouleurTeinte;
            fixed4 _AjoutEchantillonTexture;
            float4 _ZoneDecoupage;
            float _VitesseDefilement;

            v2f vert(appdata entree)
            {
                v2f sortie;
                UNITY_SETUP_INSTANCE_ID(entree);
                UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(sortie);
                sortie.positionMondiale = entree.position;
                sortie.position = UnityObjectToClipPos(sortie.positionMondiale);
                sortie.coordTex = entree.coordTex + frac(float2(_VitesseDefilement, 0.0) * _Time.y);
                sortie.couleur = entree.couleur * _CouleurTeinte;
                return sortie;
            }

            sampler2D _TexturePrincipale;

            fixed4 frag(v2f entree) : SV_Target
            {
                half4 couleur = (tex2D(_TexturePrincipale, entree.coordTex) + _AjoutEchantillonTexture) * entree.couleur;

                #ifdef UNITY_UI_CLIP_RECT
                couleur.a *= UnityGet2DClipping(entree.positionMondiale.xy, _ZoneDecoupage);
                #endif

                #ifdef UNITY_UI_ALPHACLIP
                clip(couleur.a - 0.001);
                #endif

                return couleur;
            }
            ENDCG
        }
    }
}

Remarques importantes :

  1. Asurez-vous que les sprites UI ont une transition continue pour éviter les coupures visibles, comme illustré dans l'exemple ci-dessus.
  2. Modifiez le mode de wrap du sprite en "Repeat" pour permettre l'affichage en boucle ; le mode par défaut "Clamp" provoque une seule lecture des coordonnées UV.

Étiquettes: UnityShader ProgressBar ShaderLanguage UnityUI CGProgramming

Publié le 18 juin à 20h46