Trailer text overlay
Trailer text overlay

This week was a bit slow, working on a particular element of the trailer which is the overlay text. I wanted a nice font and some nice effect to make it stand out, and since I'm on full DIY mode, I need to do something more that provided presets from open source programs. As usual, I ended up using some combination of distance fields and simplex noise. I found out a really nice font called Milonga.

The way it works is roughly:

  • Initialise an empty image with 2x the size, so that I can do some nice downscaling in the end for supersampling antialiasing.
  • Render text using desired font to desired position in an image, with plenty of padding
  • Calculate distance field based on distance to the opaque font pixels
  • Calculate some 3D FBM simplex noise (pixel_x, pixel_y, time)
  • Combine the FBM and the distance field to get a fuzzy noisy wispy text effect, still single channel
  • Modulate to obtain other channels (resulting in the blueish hue)

Still working on things like text placement, font size, fade in/out effects/animations etc, so that I can put all the trailer related text procedurally into the video segments.

Trailer text starting a few seconds in, with a quick fade in/out effect
Same as above, but with longer fade in/out times and pixelated font