Search Unity

Font Material

Discussion in 'UGUI & TextMesh Pro' started by abitofjohn, Aug 26, 2014.

  1. abitofjohn

    abitofjohn

    Joined:
    Nov 6, 2012
    Posts:
    27
    I've been looking into stylising some fonts, I just want to add a gradient to the titles on the menu pages, I thought I might be able to achieve this with the font material but so far have had no luck.

    Does anyone know of a way to stylise fonts in the new UI system?

    Cheers
     
    abitofjohn, Aug 26, 2014
    #1

  2. Tim-C

    Tim-C

    Unity Technologies

    Joined:
    Feb 6, 2010
    Posts:
    2,225
    You can do lots of effects like this. You could modify the color information of the vertices on generation, or you could use UV1 or similar to achieve this. Either way it will require some custom coding.

    The simplest way is to modify vertex color (note I have not implemented the gradient calculation):

    Add this to any 'Graphic' and the vert colors will get post processed.
    Code (csharp):
    1.  
    2. using System.Collections.Generic;
    3.  
    4. namespace UnityEngine.UI
    5. {
    6.     [AddComponentMenu ("UI/Effects/Shadow", 14)]
    7.     public class Gradient : BaseVertexEffect
    8.     {
    9.         [SerializeField]
    10.         private Color m_EffectColor = new Color (0f, 0f, 0f, 0.5f);
    11.  
    12.         protected Gradient()
    13.         {}
    14.  
    15.         public Color effectColor
    16.         {
    17.             get { return m_EffectColor; }
    18.             set
    19.             {
    20.                 m_EffectColor = value;
    21.                 if (graphic != null)
    22.                     graphic.SetVerticesDirty ();
    23.             }
    24.         }
    25.  
    26.         protected void ApplyGradient(List<UIVertex> verts, Color32 color)
    27.         {
    28.             for (int i = 0; i < verts.Count; ++i)
    29.             {
    30.                 var vt = verts[i];
    31.                 vt.color = CalculateGradientThingy();
    32.                 verts[i] = vt;
    33.             }
    34.         }
    35.  
    36.         public override void ModifyVertices(List<UIVertex> verts)
    37.         {
    38.             if (!IsActive ())
    39.                 return;
    40.  
    41.             ApplyGradient (verts, effectColor);
    42.         }
    43.     }
    44. }
    45.  
     
    Tim-C, Aug 26, 2014
    #2

  3. abitofjohn

    abitofjohn

    Joined:
    Nov 6, 2012
    Posts:
    27
    Cheers Tim!

    Heres the script for anyone interested. It allows a 2 colour gradient (with alpha if you wish) to be applied to any Unity UI Graphics. I've included a bool to select the direction of the gradient (vertical or horizontal). It would be great to pick the angle of the gradient but my coding capabilities don't extend that far just yet!

    Code (CSharp):
    1. using System.Collections.Generic;
    2. using UnityEngine;
    3.  
    4.  
    5. namespace UnityEngine.UI
    6. {
    7.     [ExecuteInEditMode]
    8.     [AddComponentMenu ("UI/Effects/gradient", 14)]
    9.     public class Gradient : BaseVertexEffect
    10.     {
    11.         [SerializeField]
    12.         private Color col_1 = new Color (0f, 0f, 0f, 1f);
    13.         [SerializeField]
    14.         private Color col_2 = new Color (255f, 255f, 0f, 1f);
    15.  
    16.         [RangeAttribute(-1, 1)]
    17.         public float _Scale = 1f;
    18.  
    19.         public bool Horizontal = false;
    20.  
    21.         public Color color1
    22.         {
    23.             get { return col_1; }
    24.             set
    25.             {
    26.                 col_1 = value;
    27.                 if (graphic != null)
    28.                     graphic.SetVerticesDirty ();
    29.             }
    30.         }
    31.  
    32.         public Color color2
    33.         {
    34.             get { return col_2; }
    35.             set
    36.             {
    37.                 col_2 = value;
    38.                 if (graphic != null)
    39.                     graphic.SetVerticesDirty ();
    40.             }
    41.         }
    42.  
    43.  
    44.         protected void ApplyGradient(List<UIVertex> verts)
    45.         {
    46.             for (int i = 0; i < verts.Count; ++i)
    47.             {
    48.                 var vt = verts[i];
    49.                 if(!Horizontal){
    50.                     vt.color = Color32.Lerp(col_2,col_1, vt.position.y * (_Scale/10));
    51.                 }else{
    52.                     vt.color = Color32.Lerp(col_2,col_1, vt.position.x * (_Scale/10));
    53.                 }
    54.                 verts[i] = vt;
    55.             }
    56.         }
    57.        
    58.         public override void ModifyVertices(List<UIVertex> verts)
    59.         {
    60.             if (!IsActive ())
    61.                 return;
    62.            
    63.             ApplyGradient (verts);
    64.         }
    65.     }
    66. }
    It works with the other UI effects too (shadow and outline) Hope it helps some of you!
     
    abitofjohn, Aug 27, 2014
    #3
    Ostwind, Tim-C and Caio_Lib like this.