Library for stroked/outlined text

Over the years I heard a lot of developers - including myself - complaining about the inability to give a dynamic TextField different colors for the stroke and the fill. So I created a haxelib to do the job.

With the Stroked TextField library and a TrueType font file you’re now able to render text like this:
OpenFL

The usage is quite simple. The above example is just:

package;

import openfl.display.Sprite;
import openfl.Assets;
import openfl.display.GradientType;
import openfl.display.SpreadMethod;
import openfl.geom.Matrix;

class Main extends Sprite
{
	public function new()
	{
		super();

		var tField:StrokedTextField = new StrokedTextField(Assets.getBytes("assets/ttf/font.ttf"));
		addChild(tField);
		tField.lineStyle(14, 0x38250b);

		var colors:Array<UInt> = [0x9c6601, 0xfffe8a, 0xd9bb51];
		var alphas:Array<Float> = [1, 1, 1];
		var ratios:Array<Int> = [80, 150, 255];
		var mat:Matrix = new Matrix();
		mat.createGradientBox(400, 125, Math.PI / 2, 0, 0);

		tField.gradientFill(GradientType.LINEAR, colors, alphas, ratios, mat, SpreadMethod.REFLECT);

		tField.fontSize = 164;
		tField.mode = "outline";
		tField.text = "OpenFl";
	}

}

So creating the gradient is the only complex thing. Unfortunately though the README markdown file on the haxelib project page does not display properly. Please refer to the github repository instead.

9 Likes

Totally awesome, thanks for this! Bookmarked.

Wow this looks great ! Thanks !

What a great addition to rendering text!
Thank you @obscure