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 {}
}

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
    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!

I discovered the answer shortly after posting this, but for anyone that stumbles upon this, the issue was in how I was loading the map. I needed to change:

var tileLayer:TiledTileLayer = cast layer;
var tilemap:FlxTilemap = new FlxTilemap();
tilemap.loadMapFromArray(tileLayer.tileArray, width, height, ...);

to

var tileLayer:TiledTileLayer = cast layer;
var tilemap:FlxTilemap = new FlxTilemap();
tilemap.loadMapFromArray(tileLayer.tileArray, tileLayer.width, tileLayer.height,  ...);

The original version was using width from the TiledMap, which is the full map width. The second version uses this layer's width. Simple fix!

Hi,

I am trying to have a background layer that spans the full size of the map with partial maps that don't span the full length of the map. In the Tiled editor, my tmx file shows correctly (the grey squares with pink border should be on the lefthand side of the map):

But in my HaxeFlixel game, the map is rendered as (ignore pause button and button at the bottom):

My map file is defines the layers as:

Background, full-width layer (notice 40 column width):

 <layer id="1" name="Background" width="40" height="20">
  <properties>
   <property name="nocollide" value="true"/>
   <property name="tileset" value="level"/>
  </properties>
  <data encoding="csv">
<!-- 40 column data -->
</data>

Foreground, partial-width layer (notice 20-column width):

 <layer id="2" name="Foreground" width="20" height="20">
  <properties>
   <property name="nocollide" value="true"/>
   <property name="tileset" value="level"/>
  </properties>
  <data encoding="csv">
<!-- 20 column  data -->
</data>

It's pretty clear what is happening: HaxeFlixel is rendering the 20-column foreground layer as if it were 40 columns (this cuts the layer in half, as shown in the second screenshot above).

Is it possible for HaxeFlixel to render the foreground as being a 20-column layer instead of a 40-column layer? If so, how can this be done?

Thanks!