Gradient fill for TextField with TrueType font

Help
#1

Is it possible to create something like this without using bitmap fonts?
https://bit.ly/3bvEo8u

#2

A viable solution since the glory days of flash goes a little bit like this.

  • create a textfield with your desired text and give it a 90° rotated DropShadow filter
  • create a duplicate of that textfield without the filter
  • layer a rectangle shape the size of the textfield on top, filled with a linear gradient
  • finally use the second textfield as a mask for the gradient shape

textGradient

Here’s the code:

	var tFormat:TextFormat = new TextFormat(null, 124);

	var dropShadow:DropShadowFilter = new DropShadowFilter(4, 90, 0x4e1321, 1, 8, 8, 4);

	var dropShadowTField:TextField = new TextField();
	dropShadowTField.defaultTextFormat = tFormat;
	dropShadowTField.textColor = 0xffffff;
	dropShadowTField.text = "TEST";
	dropShadowTField.width = 300;
	dropShadowTField.height = 200;
	addChild(dropShadowTField);
	dropShadowTField.filters = [dropShadow];

	var tField:TextField = new TextField();
	tField.defaultTextFormat = tFormat;
	tField.textColor = 0xffffff;
	tField.text = "TEST";
	tField.width = 300;
	tField.height = 200;
	addChild(tField);

	var gradient:Shape = new Shape();
	var colors:Array<UInt> = [0xffffff, 0xfcffab, 0xffdb91];
	var alphas:Array<Float> = [1.0, 1.0,1.0];
	var ratios:Array<Int> = [0x33, 0x99, 0xcc];
	var mat:Matrix = new Matrix();
	mat.createGradientBox(300, 200, -Math.PI / 2, 0, 0);
	gradient.graphics.beginGradientFill("linear", colors, alphas, ratios, mat);
	gradient.graphics.drawRect(0, 0, 300, 200);
	gradient.graphics.endFill();
	addChild(gradient);

	gradient.cacheAsBitmap = true;
	tField.cacheAsBitmap = true;
	gradient.mask = tField;
#3

Unfortunately, I cannot draw result to BitmapData. Doesn’t work. Seems that sprite, that has textfield as mask cannot be drawn to bitmapdata :frowning:

Need bitmapdata to create starling texture.

UPD: works for Flash target. Not for HTML5