Change color of button label in `FlxUIRadioGroup`

mjedmonds

Hi, the default color of the button label text is white for FlxUIRadioGroup. I would like to change it to black. I don't see any obvious way of doing this. Any ideas how this can be accomplished? I see a few things that hint towards a possible solution:

FlxUIRadioGroup uses an activeStyle that is a CheckStyle - problem: setting does not appear to apply.
Each radio is a FlxUICheckBox that contains a FlxUIButton - problem: changes to the button don't persist after you hover or click on the button.

Here are my attempts with code:

var radio = new FlxUIRadioGroup(x, y, ids, labels);
// using point 1 above, try to modify the radio's activeStyle directly
radio.activeStyle.font.format.color = FlxColor.BLACK;
var checkStyle = new CheckStyle(null, Globals.getRegularFontDef(), "left", FlxColor.BLACK);
for (checkBox in radio.getRadios())
{
    // using point 1, attempt 2, using defined CheckStyle
    checkStyle.applyToCheck(checkBox);
    // using point 2, attempt 1, directly setting the button's label format works at first, but this format is overridden 
    //  when the mouse hovers or clicks on a button    
    checkBox.button.label.setFormat(Globals.fontFamily, Globals.fontSize, FlxColor.BLACK, "left")
}

Any ideas or example of how you can change the font color of a radio?

Thanks!

mjedmonds

For anyone stumbling upon this, I found a workaround that's a bit dirty but works. I had to create an updateRadioColor function that is called in your FlxState's update() call (so the radio group has to be re-colored every update...seems a bit inefficient and unnecessary but I couldn't find another way).

Anyways, here's the class that uses setFormat to adjust the text and some magic numbers based on my font size (36). You'll need to adjust it a bit for your use case.

package client;

import client.Common.Globals;
import flixel.FlxG;
import flixel.FlxSprite;
import flixel.addons.ui.FlxUIRadioGroup;
import flixel.addons.ui.StrNameLabel;
import flixel.group.FlxSpriteGroup;
import flixel.util.FlxColor;
import js.lib.webassembly.Global;

class RadioGroup extends FlxUIRadioGroup
{
	public static inline var defaultWidth:Int = 400;
	public static inline var defaultHeight:Int = 75;
	public static inline var defaultLabelWidth:Int = 350;
	public static inline var defaultYSpace:Int = 50;

	public function new(x:Int, y:Int, ids:Array<String>, labels:Array<String>, ?width:Int = defaultWidth, ?height:Int = defaultHeight,
			?labelWidth:Int = defaultLabelWidth, ?ySpace:Int = defaultYSpace)
	{
		super(x, y, ids, labels, updateCallback, ySpace, width, height, labelWidth);

		updateRadioColor();
	}

	public function updateRadioColor()
	{
		for (checkBox in getRadios())
		{
			// magic numbers to place the text properly. If the font size changes, these will need to be adjusted
			checkBox.button.label.x = checkBox.x + 20;
			checkBox.button.label.y = checkBox.y - 17.5;
			checkBox.button.label.setFormat(Globals.fontFamily, Globals.fontSize, FlxColor.BLACK, "left");
			checkBox.button.scale.set(1, 2);
			checkBox.button.offset.set(-50, -15);
			checkBox.button.updateHitbox();
			checkBox.box.scale.set(3, 3);
			checkBox.mark.scale.set(3, 3);
		}
	}

	public function updateCallback(id:String):Void {}
}

RichardBray

Glad you figured it out. I haven't used Flixel UI before so I asked around in the Discord channel. Looks like you reached it before the people on there 🙂