TextmeshPro-Gradient


這次來寫一篇關於TextmeshPro的擴展應用。有用文字系統的夥伴,相信一定對於TextmeshPro不陌生。由於它的多樣性文字效果,使得他幾乎專案當中是必備的存在。

然而TextmeshPro默認的漸層模式卻也是稍有侷限,只能接受上下2種不同得顏色的漸變效果,有時候不見得能夠符合需求。

因此這次則對漸層的方面做出擴展,來讓TextmeshPro能更支援更多的顏色漸變。

從默認的漸變模式的Shader可以得知,由於默認的漸變是藉由頂點色染色的緣故,因此對於一片面來說只有4個頂點,所以最多只能做到上下或是左右的漸變變化。

對此則可以運用給予漸層貼圖的方式讓它的漸變能支援更多的顏色變化。以下是使用 Gradient 動態產生建成貼圖。

Texture2D GenerateTextureFromGradient(Gradient gradient, int width = 64, int height =1 )

{

            Texture2D texture = new Texture2D(width, height, TextureFormat.RGBA32, false);

            for (int y = 0; y < height; y++) 

            {

                for (int x = 0; x < width; x++)

                {

                    float t = (float)x / (width - 1);

                    Color color = gradient.Evaluate(t);

                    texture.SetPixel(x, y, color);

                }

            }

            texture.wrapMode = TextureWrapMode.Clamp;

            texture.Apply();

            return texture;

}

再來,我們可以利用頂點色作為UV的辦法將貼圖平鋪到文字上面。由於已經有了UV,因此當然可以再Shader當中加入旋轉UV模式:

void Unity_Rotate_Degrees_float(float2 UV, float2 Center, float Rotation, out float2 Out)

{

            Rotation = Rotation * (3.1415926f/180.0f);

            UV -= Center;

            float s = sin(Rotation);

            float c = cos(Rotation);

            float2x2 rMatrix = float2x2(c, -s, s, c);

            rMatrix *= 0.5;

            rMatrix += 0.5;

            rMatrix = rMatrix * 2 - 1;

            UV.xy = mul(UV.xy, rMatrix);

            UV += Center;

            Out = UV;

}

最後。由於整個 TextmeshPro 的 材質球 是不可更改的,因此我們只好對 TextmeshPro 的 C# 部分進行繼承 ,從而能去改寫給予材質球的方法。


可以做到內層或是外層的漸變化&旋轉效果。


留言

這個網誌中的熱門文章

Stencil Portal Effect

Rain Drop

Universal Render Pipeline 14