Skip to content

Creating Glyph Shaders

Cole Campbell edited this page Mar 3, 2018 · 2 revisions

Glyph shaders provide a way to exercise additional control over text rendering. A glyph shader is a piece of code which is executed every time the text renderer draws a glyph of text, and which can modify that glyph's rendering parameters, such as color, scale, and so on.

Defining Glyph Shaders

To create a new glyph shader, you must create a class which inherits from the Ultraviolet.Graphics.Graphics2D.GlyphShader abstract base class. This class defines a single abstract method called Execute() which is invoked for each glyph that is rendered.

The Execute() method takes three parameters:

  • context

    The glyph shader context. This context contains metadata about the text being rendered, such as the length of the source text and the offset of the current text block within that source text.

  • data

    The glyph data. This contains all of the rendering parameters which the glyph shader can modify.

  • index

    The index of the glyph being rendered within the overall text.

The code below is an example of a glyph shader which causes glyphs to wobble up and down.

private class WavyGlyphShader : GlyphShader
{
    public override void Execute(ref GlyphShaderContext context, ref GlyphData data, Int32 index)
    {
        var timeoffset = (Int32)(DateTime.UtcNow.TimeOfDay.TotalMilliseconds / 50);
        var angle = (((timeoffset + index) % 10) / 10.0) * Math.PI * 2.0;
        data.Y += (Single)Math.Cos(angle) * 4f;
    }
}

The code below is an example of a glyph shader which causes glyphs to rotate through the colors of the rainbow.

private class RainbowGlyphShader : GlyphShader
{
    public override void Execute(ref GlyphShaderContext context, ref GlyphData data, Int32 index)
    {
        var timeoffset = (Int32)(DateTime.UtcNow.TimeOfDay.TotalMilliseconds / 50);
        data.Color = colors[(index + timeoffset) % colors.Length];
    }

    private static readonly Color[] colors = new[] { Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Blue, Color.Indigo, Color.Violet };
}

Using Glyph Shaders

The TextRenderer class exposes a method called RegisterGlyphShader() which associates a name with a particular glyph shader instance.

textRenderer = new TextRenderer();
textRenderer.RegisterGlyphShader("wavy", new WavyGlyphShader());
textRenderer.RegisterGlyphShader("rainbow", new RainbowGlyphShader());

Once registered, a glyph shader can be activated by inserting the |shader| command at the appropriate position within the text.

textRenderer.Draw(spriteBatch, "Hello, world! |shader:wavy|This is a test of |shader:rainbow|glyph shaders|shader|!", Vector2.Zero, Color.White, settings);

Note that glyph shaders can be nested; activating a second glyph shader while a first glyph shader is already active will cause both shaders to be active until one of them is deactivated.

Clone this wiki locally