Help to implement "slider on text"

Unity Engine
, ,
1

Hi all

I would like to use a text as a “slider”.

For instance, let’s assume I’m using a fixed font and I have the word “abcde”, in white color.

I would like to be able to define a percentage, from 0 to 1 and a color - let’s say green. If the percentage is at 50% then letters a and b should be full green, d and e should be full white, and center letter c should be half-left part green and half-right one white. If I change the percentage, then this limit between green and white shall change.

I tried to do this by modifying the TMP_SDF-Mobile shader. I added some uniform variables and modified the initial part of fragment like this (here focusing on a vertical implementation rather):

// PIXEL SHADER
fixed4 PixShader(pixel_t input) : SV_Target
{
    UNITY_SETUP_INSTANCE_ID(input);

    half d = tex2D(_MainTex, input.texcoord0.xy).a * input.param.x;
    half4 c = input.faceColor * saturate(d - input.param.w);

    if (input.texcoord0.y< _PercentageOfColor2)
        c *= _FaceColor2;

This is not really working: here is what I obtain:
6376467--709980--Capture.PNG

I guess this is due to the fact I am working on the full atlas texture.

How could I solve this problem ?

Tx !!!

2

I found my way: I was actually attempting to modify one of the mobile shaders, which is not featuring the face texture, therefore is not transmitted the glyph size information.

The TPM_SDF shader IS transmitted such information, so I was able to modify and add 2 properties. Together with the Vertical mapping, it’s working :). Per character correctly fills the exact proportion for one given character.

6378690--710451--Capture.PNG

It can even work on the whole paragraph ! Thanks for this great TMP ! Getting the sources helps !