search

Gamua / Starling-Framework

The Cross Platform Game Engine
http://www.starling-framework.org
Other
2.82k stars 821 forks source link

Gradient on TextField #1067

Open CrazyFlasher opened 4 years ago

CrazyFlasher commented 4 years ago

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

PrimaryFeather commented 4 years ago

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". :wink:

CrazyFlasher commented 4 years ago

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 commented 4 years ago

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](https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BitmapData.html#copyPixels()) to combine them by using the font BitmapData for the alphaBitmapData parameter, for example.

CrazyFlasher commented 4 years ago

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

CrazyFlasher commented 4 years ago

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

JohnBlackburne commented 4 years ago

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.