Gradiant on textfield

DreamZap

I won't be able to get back to my computer for a few days but I'm writing my GDD out on paper and I was wondering if it was possible to apply a gradient to textfield's by assigning different color values to vertices like a quad? Can I already accomplish this with starling or do I have to roll my own workaround by converting my textfield's to textures and rendering them as quads or some other method?

JohnBlackburne

There are a couple of ways you could approach this. First just take the output of a Textfield, draw it to a RenderTexture, then tint that by drawing it in a Quad and colouring the vertices.

The alternative would be to manipulate the Textfield’s internal Mesh data. The only problem is the data is handled in two ways, depending on the sort of TextField, i.e. whether its using TrueType or a bitmap font. So depending which you are doing you could add code to add a gradient to the appropriate compositor, by e.g. manipulating the quads that get added to its MeshBatch.

mistergreen

Distance text field can do a bunch of text effects but I don't see gradient fill for it in Starling for some reason.

JohnBlackburne

Distance text field works off the gradient around each letter. So it can do blur, outline and glow effects as they are based on the geometry of the letters. But a gradient applied across letters would have to be done a different way.

mistergreen

Ah, the gradient was done with a texture & shader and applied to the Distance field text.

DreamZap

Wait, I can do an outline without a filter?

JohnBlackburne

Yes, see the manual:

https://manual.starling-framework.org/en/#_distance_field_rendering

And the documentation for the style for the particular methods:

https://doc.starling-framework.org/current/starling/styles/DistanceFieldStyle.html

edit: also a very recent thread discussed distance field fonts in some detail:

https://forum.starling-framework.org/d/21873-how-do-starling-textfields-work-in-general

DreamZap

Very helpful, thank you

zayoume2002

I have layout parent of quad and textfield
I have color corrected the quad using gradientTexture
But how can I adjust the color gradian of the textfield?

var _layoutTouch:LayoutGroup = new LayoutGroup();
_layoutTouch.width = _layoutTab.width;
_layoutTouch.height = _layoutTab.height;
_layoutTouch.alignPivot();
_layoutTouch.x = _layoutTouch.width * 0.5;
_layoutTouch.y = _layoutTouch.height * 0.5;
_layoutTouch.name = idx.toString();
layoutTab.addChild(layoutTouch);

		
		var gradientTexture:Texture = createGradientTexture(200, 50, [0xFF0000, 0xFFFF00], [1, 1], [0, 255]);
		
		// Tạo quad sử dụng gradient texture
		var quad:Quad = new Quad(200, 150, 0xFFFFFF);
		quad.texture = gradientTexture;
		_layoutTouch.addChild(quad);
		
		
		var _labelTitle:Label = new Label();
		Localize.fixFontLocalizeLabel(_labelTitle, this._txtTitleFormatEn, this._txtTitleFormatKm, this._txtTitleFormatMy);
		_labelTitle.width = 194;
		_labelTitle.height = 100;
		_labelTitle.blendMode = true;
		_labelTitle.wordWrap = true;
		_labelTitle.name = "labelTitle";
		_labelTitle.text = (data.Title).toUpperCase();
		_labelTitle.validate();
		_labelTitle.alignPivot();
		_labelTitle.x = _layoutTouch.width * 0.5; 
		_labelTitle.y = 97 - _labelTitle.height * 0.5 + 18; 
		_layoutTouch.addChild(_labelTitle);