2D outline pixel shader on a pixel font

I tested the current shader performance with a bunch of test strings.
The performance of the pixel shader doesn’t really drop much with more strings because the shader already checks the whole screen on a downscaled rendertarget.

Shader method: ~ 400 - 500 fps

Drawstring method: ~ 100 - 200 fps

There are probably some improvements I can make but I’m already happy with the results.

2 Likes

Fun side effect of rendering to a smaller render target (and drawing with a higher scale): All custom text effects are now pixel perfect, example:

(green wiggle effect)

4 Likes

Hey @Jelle ! I’ve been using Monogame for a couple months now and have been trying to achieve something like this for awhile and yours looks exactly like what I’m going for! I"m so glad I searched and found your post, and that it’s so recent! I feel like I end up finding posts from 2013 or old XNA stuff from 2006 so often haha.

You mentioned you were willing to share this shader. Would you mind sending it to me?

1 Like

Hi @lentil

You can find the current shader here: hlsl shader optimization
The shader is less flexible now, but probably a bit faster. If you need more help, do not hesitate to contact me! :slight_smile:

1 Like

Hi @Jelle

Also getting started and this is pretty cool is the wiggle also done with shaders? Do you have an example I could see?

Thanks!

Hi @brandc87

The character effects like color, wiggle, … are all done using C# code. I made custom text rendering classes that deconstruct and render strings.

Example:
Hello §bWorld, §r1red wiggle test

Is a string that I need to render. This string will be split into a list of strings: [Hello, World, red wiggle text]. I use ‘§’ as a special character that announces a color for a part of the string, or a color and an effect.

I then calculate the character/string positions depending on the effect and draw them. The wiggle effect splits a string into characters and changes each Y value of each character according to a sinus value, bound to a timer.

I end up with fully animated/colored strings at the end of this process. I then draw all the text to a render target and apply the pixel shader for the extra outlines.

2 Likes