Wayback Machinekoobas.hobune.stream
May JUN Jul
Previous capture 12 Next capture
2021 2022 2023
1 capture
12 Jun 22 - 12 Jun 22
sparklines
Close Help
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
avatar image
1
Question by yaezah · Oct 11, 2017 at 06:27 PM · coroutineupdatefloatbytecolor32

How to make UI Label text loop through colors ? (example attached)

I'm looking for a way to make the gradient in my UI Label text (not outline, just inside colors) loop through the color spectrum like this:

alt text

So far I only have this bit of code, it's just a test code to see if it even does anything, but it loops REALLY fast that I don't even see the blues and yellows, just red and green mostly and fadeSpeed doesn't really work.

Here's the code:

     Color32 top = new Color(255, 235, 71, 255);
     Color32 bottom = new Color(255, 174, 0, 255);
 
     float tParam = 0;
     public float fadeSpeed = 0.01f;
 
     private void Update()
     {
         if (tParam < 1)
         {
             StartCoroutine(Colors());
             tParam += Time.deltaTime * fadeSpeed;
             _lb.gradientTop = top;
             _lb.gradientBottom = bottom;
         }
     }
     IEnumerator Colors()
 
     {   //1
         top.r = 255;
         top.g = (byte)Mathf.Lerp(0, 255, tParam);
         top.b = 0;
         yield return top;
         bottom.r = 255;
         bottom.g = (byte)Mathf.Lerp(0, 255, tParam);
         bottom.b = 0;
         yield return bottom;
         //2
         top.r = (byte)Mathf.Lerp(255, 0, tParam);
         top.g = 255;
         top.b = 0;
         yield return top;
         bottom.r = (byte)Mathf.Lerp(255, 0, tParam);
         bottom.g = 255;
         bottom.b = 0;
         yield return bottom;
         //3
         top.r = 0;
         top.g = 255;
         top.b = (byte)Mathf.Lerp(0, 255, tParam);
         yield return top;
         bottom.r = 0;
         bottom.g = 255;
         bottom.b = (byte)Mathf.Lerp(0, 255, tParam);
         yield return bottom;
         //4
         top.r = 0;
         top.g = (byte)Mathf.Lerp(255, 0, tParam);
         top.b = 255;
         yield return top;
         bottom.r = 0;
         bottom.g = (byte)Mathf.Lerp(255, 0, tParam);
         bottom.b = 255;
         yield return bottom;
         //5
         top.r = (byte)Mathf.Lerp(0, 255, tParam);
         top.g = 0;
         top.b = 255;
         yield return top;
         bottom.r = (byte)Mathf.Lerp(0, 255, tParam);
         bottom.g = 0;
         bottom.b = 255;
         yield return bottom;
         //6
         top.r = 255;
         top.g = 0;
         top.b = (byte)Mathf.Lerp(255, 0, tParam);
         yield return top;
         bottom.r = 255;
         bottom.g = 0;
         bottom.b = (byte)Mathf.Lerp(255, 0, tParam);
         yield return bottom;
     }


Comment
Add comment
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

1 Reply

· Add your reply
  • Sort: 
avatar image
2
Best Answer

Answer by gnp89 · Oct 11, 2017 at 07:11 PM

I think the way to go is taking the default shader (you can download the sources from the Unity site) and making some modifications.

Your fragment shader needs a float input to represent time, and you need to provide that value to the shader in your game loop. Depending on the fragment position and time, color can be calculated.

Here's a shader I just wrote (not entirely, took the default-ui as a reference) and tested :D Create a new material that uses this shader, and asign the material to the text. It's a good starting point. Just set the 5 colors, set a _GradientWidth (small value, from 0.01 to 0.5 will do) and then update the _Offset from your game loop.

 // Unity built-in shader source. Copyright (c) 2016 Unity Technologies. MIT license (see license.txt)
 
 Shader "UI/Default-gradient"
 {
     Properties
     {
         [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
         _Color1 ("Color1", Color) = (1,1,1,1)
         _Color2 ("Color2", Color) = (1,1,1,1)
         _Color3 ("Color3", Color) = (1,1,1,1)
         _Color4 ("Color4", Color) = (1,1,1,1)
         _Color5 ("Color5", Color) = (1,1,1,1)
 
         _ColorCount ("ColorCount", Float) = 5
         _GradientWidth ("GradientWidth", Float) = 0
         _Offset ("Offset", Float) = 0
         
         _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
     }
 
     SubShader
     {
         Tags
         { 
             "Queue"="Transparent" 
             "IgnoreProjector"="True" 
             "RenderType"="Transparent" 
             "PreviewType"="Plane"
             "CanUseSpriteAtlas"="True"
         }
         
         Stencil
         {
             Ref [_Stencil]
             Comp [_StencilComp]
             Pass [_StencilOp] 
             ReadMask [_StencilReadMask]
             WriteMask [_StencilWriteMask]
         }
 
         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 2.0
 
             #include "UnityCG.cginc"
             #include "UnityUI.cginc"
 
             #pragma multi_compile __ UNITY_UI_ALPHACLIP
             
             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;
                 float2 texcoord  : TEXCOORD0;
                 float4 worldPosition : TEXCOORD1;
                 UNITY_VERTEX_OUTPUT_STEREO
             };
             
             fixed4 _Color1;
             fixed4 _Color2;
             fixed4 _Color3;
             fixed4 _Color4;
             fixed4 _Color5;
             float _ColorCount;
             float _GradientWidth;
             float _Offset;
             fixed4 _TextureSampleAdd;
             float4 _ClipRect;
 
             v2f vert(appdata_t IN)
             {
                 v2f OUT;
                 UNITY_SETUP_INSTANCE_ID(IN);
                 UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
                 OUT.worldPosition = IN.vertex;
                 OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);
 
                 OUT.texcoord = IN.texcoord;
 
 
                 return OUT;
             }
 
             sampler2D _MainTex;
 
             fixed4 frag(v2f IN) : SV_Target
             {
                 float gradientColorLerpValue = ((IN.worldPosition + _Offset) * _GradientWidth) % _ColorCount;
                 fixed4 gradientColor;
 
                 if(gradientColorLerpValue < 1){
                     gradientColor = lerp(_Color1, _Color2, gradientColorLerpValue);
                 } else if(gradientColorLerpValue < 2) {
                     gradientColor = lerp(_Color2, _Color3, gradientColorLerpValue - 1);
                 } else if(gradientColorLerpValue < 3) {
                     gradientColor = lerp(_Color3, _Color4, gradientColorLerpValue - 2);
                 } else if(gradientColorLerpValue < 4) {
                     gradientColor = lerp(_Color4, _Color5, gradientColorLerpValue - 3);
                 } else if(gradientColorLerpValue < 5) {
                     gradientColor = lerp(_Color5, _Color1, gradientColorLerpValue - 4);
                 }
 
                 half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * gradientColor;
 
                 color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
                 
                 #ifdef UNITY_UI_ALPHACLIP
                 clip (color.a - 0.001);
                 #endif
 
                 return color;
             }
         ENDCG
         }
     }
 }
 
Comment
Add comment · Show 9 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image yaezah · Oct 11, 2017 at 07:19 PM 0
Share

Thanks for the tip, I haven't really dealt with shaders before and have just been trying to loop through all the colors by manipulating the text's gradient thru code. Can you actually use shaders on UI Labels?

avatar image gnp89 · Oct 11, 2017 at 07:52 PM 1
Share

This shader has a horizontal gradient only, a gradient in an angle will need some more complex maths.

avatar image yaezah gnp89 · Oct 11, 2017 at 08:18 PM 0
Share

Thanks, I added that shader and set values as you said , but when I add it to the sprite it makes the sprite dissapear .

avatar image gnp89 yaezah · Oct 11, 2017 at 08:24 PM 0
Share

are we talking about a text component? I thought you needed this for text

Show more comments
Show more comments

Your answer

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Follow this Question

Answers Answers and Comments

75 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

Float to Byte for Color32 3 Answers

[WORKAROUND] How to time pause in update (yield) 1 Answer

Float won't update when clicking multiple objects 1 Answer

How efficient is Update() vs Update via a Manager vs Coroutines for iOS Deployment? 2 Answers

Coroutine is not called between frames 2 Answers


Enterprise
Social Q&A

Social
Subscribe on YouTube social-youtube Follow on LinkedIn social-linkedin Follow on Twitter social-twitter Follow on Facebook social-facebook Follow on Instagram social-instagram

Footer

  • Purchase
    • Products
    • Subscription
    • Asset Store
    • Unity Gear
    • Resellers
  • Education
    • Students
    • Educators
    • Certification
    • Learn
    • Center of Excellence
  • Download
    • Unity
    • Beta Program
  • Unity Labs
    • Labs
    • Publications
  • Resources
    • Learn platform
    • Community
    • Documentation
    • Unity QA
    • FAQ
    • Services Status
    • Connect
  • About Unity
    • About Us
    • Blog
    • Events
    • Careers
    • Contact
    • Press
    • Partners
    • Affiliates
    • Security
Copyright © 2020 Unity Technologies
  • Legal
  • Privacy Policy
  • Cookies
  • Do Not Sell My Personal Information
  • Cookies Settings
"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges