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:
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.
This is awesome! Openfl… WE really needed such a gem! Thank you @obscure !
What about width and height properties? Are they the effective pixel perfect size of the whole shape or they return weird size like default textfields do, that include invisible properties embedded in the fonts?
And… are you going to add a textfieldBox width property to make auto-multiline texts? I have more than 20 languages to handle, and adding \n for every single language would be impossible.
@GiG The width & height is indeed the bounding box of the actual text including the outlines.
I did not consider auto-multiline text yet but I will keep it in the back of my head!
The initial purpose of the whole library was more or less just to display more attractive
one-liner’s.
I highly doubt it rainy as it simply has more to render. Nevertheless as it inherits
from Shape->DisplayObject you can use the .cacheAsBitmap property to speed up
static content.
