Change color of button label in `FlxUIRadioGroup`

  • 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:

    1. FlxUIRadioGroup uses an activeStyle that is a CheckStyle - problem: setting does not appear to apply.
    2. 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
        // 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?


  • 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.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);
    	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();, 3);
    			checkBox.mark.scale.set(3, 3);
    	public function updateCallback(id:String):Void {}

  • 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 🙂

Log in to reply

Looks like your connection to HaxeFlixel was lost, please wait while we try to reconnect.