Tinting Labels

[smarthall]

Hi!

I am trying to make a label slowly disappear by animating its alpha channel to zero. If I animate it with this line

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

that makes it fade to black. Looking around the forums I see mentions of being able to animate the tint property in the forum. However this doesn’t appear to apply to labels as the built in fragment program for fonts has no tint property.

I barely understand what is happening in the fragment shader, is there a reason it doesn’t have a tint attribute? Should I learn how to write a shader so that I can add one? Also, how come the animating the color attribute didn’t work?

[Mitch]

Is it a label on a GO or a text in GUI?

If it’s on a GO, a lazy/simple way to do it.

 go.animate("#label", "color", go.PLAYBACK_ONCE_FORWARD, vmath.vector4(1,1,1,0), go.EASING_OUTSINE, 1)
 go.animate("#label", "outline", go.PLAYBACK_ONCE_FORWARD, vmath.vector4(1,1,1,0), go.EASING_OUTSINE, 1)
 go.animate("#label", "shadow", go.PLAYBACK_ONCE_FORWARD, vmath.vector4(1,1,1,0), go.EASING_OUTSINE, 1)

There’s probably better and more elegant solutions but it should work.

[Pkeod]

You can make a new label shader too. Copy and paste the builtin one and update the associations, compare with the sprite material and fp to see how you can add a tint to everything which would modify alpha for everything all at once.

[Mitch]

Like this?

https://gist.github.com/britzl/9880dad39b0d01fa0c908927320dd6d1

[smarthall]

Ah okay, so I see the problem now!

The outline is drawn first and then the color, so if you make the color transparent the outline shows through.

So I’ve gone with the simple solution now (just fading the outline as well as I don’t have shadows):

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

With a note to figure out why there are so many differences between @britzl’s tinted label shader and the built in one, before I try to add a tint myself. I’ll post back here if I ever figure that out.

Thanks everyone!

[britzl]

With a note to figure out why there are so many differences between @britzl’s tinted label shader and the built in one, before I try to add a tint myself. I’ll post back here if I ever figure that out.

We made significant changes to the fonts recently to fix issues we hade with outlines etc. If you’ve found a shader by me it might be old. Can you share a link?

[Mitch]

He’s referring to this; https://gist.github.com/britzl/9880dad39b0d01fa0c908927320dd6d1

[smarthall]

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!