Gradient on TextField

[CrazyFlasher]

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

[PrimaryFeather]

Hmm ... Starling uses the Flash API to draw TrueType text, so to make this possible, one would first need to figure out how this can be done with Flash.

The Graphics class unfortunately doesn't support drawing of text – that would be the natural place to look for the options for line thickness, gradients, etc. So you'd have to use the TextField and draw that to a BitmapData object (what Starling does internally), but this doesn't support color gradients.

Well ... you might be able to get to the gradient via masking (in Flash, not Starling), and then apply the drop shadow and outline as filters. But in the end, you'd always have to upload that to the GPU.

So, I think the short answer is probably "no". 😉

[CrazyFlasher]

Well I can apply shadows, outline and other stuff. But stuck with gradients.
May be this can help: https://forum.starling-framework.org/d/21087-contribution-mesh-gradient-fill/10

[JohnBlackburne]

I wrote that mesh gradient fill routine. Unfortunately there’s no straightforward way to use it with text, My code works with a Mesh object, and text in Starling does not use Meshes in a way that is useful (it draws a line of text as a Quad, which is a Mesh, but applying a gradient fill to that will just give you a shaded rectangle).

If I had to do this I would probably do it in the classic Flash API. As Daniel notes the Graphics API has gradients, but it is separate from the BitmapData API which Starling uses for drawing text. But there are various ways to combine them. Draw a gradient filled rectangle in one BitmapData, draw your text in another, then use BitmapData.copyPixels to combine them by using the font BitmapData for the alphaBitmapData parameter, for example.

[CrazyFlasher]

Thanks. I'll try to do that way and post results soon

[CrazyFlasher]

Another way recommended by openfl communuty
https://community.openfl.org/t/gradient-fill-for-textfield-with-truetype-font/12300/2

[JohnBlackburne]

I don’t know how that is implemented in OpenFL, but in Starling a mask has only one bit per pixel – it is either on or off. So you get jagged edges which tends to look horrible with text.