FlxButton labelOffsets aren't updating the label's position.

[Itz-Miles]

• Haxe version: 4.3.3
• Flixel version: 5.9.0
• OpenFL version: 9.3.4
• Lime version: 8.1.3
• Affected targets: Windows, HTML5

---

Code snippet reproducing the issue:

		for (i in 0...4)
		{
			var menuItem:FlxButton = new FlxButton(-80, 60 + (i * 158) + (i * 7), "", function()
			{
				//trace("clicked");
			});
			menuItem.ID = i;
			menuItem.onOver.callback = function()
			{
				// curSelection = menuItem.ID;
			};

			if (ClientPrefs.data.shaders)
				menuItem.blend = SCREEN;

			menuItem.labelAlphas = [0.7, 1.0, 0.8, 0.8];
			menuItem.loadGraphic(Paths.image('menus/item', "shared"), true, 50, 18);
			menuItem.setGraphicSize(447.04, 0);
			menuItem.updateHitbox();
			menuItem.antialiasing = false;
			menuItem.label.antialiasing = false;
			menuItem.label.letterSpacing = -3;
			menuItem.label.fieldWidth = 447.04;
			menuItem.label.fieldHeight = menuItem.height;
			menuItem.label.setFormat(Paths.font('Monocraft.ttf'), 64, 0xFFFFFFFF);
			menuItem.label.text = labels[i];
			menuItem.labelOffsets[0].y = 24;
			menuItem.labelOffsets[1].y = 28;
			menuItem.labelOffsets[2].y = 32;
			menuItem.scrollFactor.set(0, 0);
			menuItem.alpha = 0;
			menuItems.set(i, menuItem);
			add(menuItem);
			FlxTween.tween(menuItem, {alpha: 1, x: 0}, 1.1, {ease: FlxEase.quintOut, startDelay: 0.4});
		}

---

Observed behavior:
The highlight offsets are applied to the first label once, and further interactions have no impact on them.

button.offsets.not.working.mp4

Expected behavior:
The buttons' labels are offset whenever their states are changed.

[Geokureli]

This isn't happening for me. Here's my test:

package states;

import flixel.FlxG;
import flixel.tweens.FlxEase;
import flixel.tweens.FlxTween;
import flixel.ui.FlxButton;

class ButtonLabelOffsettestState extends flixel.FlxState
{
	override function create()
	{
		super.create();
		
		final button1 = new FlxButton(20, 10, "Button", ()->trace("clicked button1"));
		button1.labelAlphas = [0.7, 1.0, 0.8, 0.8];
		button1.labelOffsets[0].x += 10;
		button1.labelOffsets[1].x += 15;
		button1.labelOffsets[2].x += 20;
		button1.alpha = 0;
		add(button1);
		FlxTween.tween(button1, {alpha: 1, x: 10}, 1);
		
		final y = button1.y + button1.height + 10;
		final button2 = new FlxButton(10, y, "Button", ()->trace("clicked button2"));
		button2.labelAlphas = [0.7, 1.0, 0.8, 0.8];
		button2.labelOffsets[0].x += 10;
		button2.labelOffsets[1].x += 15;
		button2.labelOffsets[2].x += 20;
		add(button2);
	}
}

And here's what I see

Screen.Recording.2024-08-13.at.4.26.21.PM.mov

Try this out and let me know if you see different behavior.

Your above test references a bunch of custom external code, So for all I know that may be the culprit for the behavior you're seeing. I always recommend making a new project that only tests the specific feature you think has a bug, rather than just sharing a snippet from your personal game project, so we know whether it's a flixel bug, or a bug with your code

Also, if you're using PsychEngine it may be shadowing classes, in which case there's nothing I can do for you and you'll need them to fix it

[Geokureli]

tried adding in all the same properties you change, in case one of those is causing the issue, still not able to reproduce it:

package states;

import flixel.FlxG;
import flixel.tweens.FlxEase;
import flixel.tweens.FlxTween;
import flixel.ui.FlxButton;

class ButtonLabelOffsetTestState extends flixel.FlxState
{
	override function create()
	{
		super.create();
		
		final button1 = new FlxButton(20, 10, "Button", ()->trace("clicked button1."));
		button1.onOver.callback = ()->trace("clicked button1");
		button1.scale.set(2, 2);
		button1.updateHitbox();
		button1.blend = SCREEN;
		button1.antialiasing = false;
		button1.label.antialiasing = false;
		button1.label.letterSpacing = -3;
		button1.label.fieldWidth = button1.width;
		button1.label.fieldHeight = button1.height;
		button1.label.setFormat('Helvetica', 16, 0xFFFFFFFF);
		button1.label.text = "_" + button1.label.text + "_";
		button1.labelAlphas = [0.7, 1.0, 0.8, 0.8];
		button1.labelOffsets[0].x += 10;
		button1.labelOffsets[1].x += 15;
		button1.labelOffsets[2].x += 20;
		button1.alpha = 0;
		add(button1);
		FlxTween.tween(button1, {alpha: 1, x: 10}, 1);
		
		final y = button1.y + button1.height + 10;
		final button2 = new FlxButton(10, y, "Button", ()->trace("clicked button2."));
		button2.onOver.callback = ()->trace("clicked button2");
		button2.scale.set(2, 2);
		button2.updateHitbox();
		button2.blend = SCREEN;
		button2.antialiasing = false;
		button2.label.antialiasing = false;
		button2.label.letterSpacing = -3;
		button2.label.fieldWidth = button2.width;
		button2.label.fieldHeight = button2.height;
		button2.label.setFormat('Helvetica', 16, 0xFFFFFFFF);
		button2.label.text = "_" + button2.label.text + "_";
		button2.labelAlphas = [0.7, 1.0, 0.8, 0.8];
		button2.labelOffsets[0].x += 10;
		button2.labelOffsets[1].x += 15;
		button2.labelOffsets[2].x += 20;
		add(button2);
	}
}

Note: you may need to switch "Helvetica" to "Arial" if you're on windows

Also Note: scrollFactor defaults to (0, 0) on all UI elements

[Itz-Miles]

Thanks Geokureli! I should probably stick to convention and do that myself when testing against the rest of my game's codebase, but your willingness to help with so little context was much appreciated. (they were a group of sprites at one point)

It turns out that the culprit behind the buttons was the defaultMoves flag being false in FlxObject. The label only gets updated when the position is updated, which is constantly happening in updateMotion() when moves is true. I didn't think to set it to true manually, as UI elements generally don't move.

This rises a new question. Wouldn't a hybrid approach where the label's position is also updated on state change be better, especially when moves is false? This sounds like a good and harmless patch. Once again, thanks for the continued support for base flixel's UI elements while haxeui takes over!
#3232