Tinting Labels

Questions
8

So, it turns out it wasn’t all that hard.

Here is what I ended up with for the fragment shader:

varying mediump vec2 var_texcoord0;
varying lowp vec4 var_face_color;
varying lowp vec4 var_outline_color;
varying lowp vec4 var_shadow_color;
varying lowp vec4 var_layer_mask;

uniform lowp vec4 texture_size_recip;
uniform lowp sampler2D texture_sampler;
uniform lowp vec4 tint; // The tint applied to the material

void main()
{
    // Copied from /builtin/fonts/font.fp
    lowp float is_single_layer = var_layer_mask.a;
    lowp vec3 t                = texture2D(texture_sampler, var_texcoord0.xy).xyz;
    float face_alpha           = t.x * var_face_color.w;
    gl_FragColor      = (var_layer_mask.x * face_alpha * vec4(var_face_color.xyz, 1.0) +
        var_layer_mask.y * vec4(var_outline_color.xyz, 1.0) * var_outline_color.w * t.y * (1.0 - face_alpha * is_single_layer) +
        var_layer_mask.z * vec4(var_shadow_color.xyz, 1.0) * var_shadow_color.w * t.z * (1.0 - min(1.0, t.x + t.y) * is_single_layer));

    // Apply a tint to the whole pixel
    lowp vec4 tint_pm = vec4(tint.xyz * tint.w, tint.w);
    gl_FragColor = gl_FragColor * tint_pm;    
}

Then just made a material to use it

name: "label"
tags: "tile"
vertex_program: "/builtins/fonts/font.vp"
fragment_program: "/materials/tinted_font.fp"
vertex_space: VERTEX_SPACE_WORLD
vertex_constants {
  name: "view_proj"
  type: CONSTANT_TYPE_VIEWPROJ
  value {
    x: 0.0
    y: 0.0
    z: 0.0
    w: 0.0
  }
}
fragment_constants {
  name: "tint"
  type: CONSTANT_TYPE_USER
  value {
    x: 1.0
    y: 1.0
    z: 1.0
    w: 1.0
  }
}

and now I can fade it out with

go.animate("#text", "tint.w", go.PLAYBACK_ONCE_FORWARD, 0, go.EASING_OUTSINE, self.duration)

Thanks again for the help everyone. Not so scared of shaders anymore!

5 Likes