FlxText always shrinks its "graphic object" height

[T1mL3arn]

No matter how I try I cannot set desired height for FlxText, its height shrinks to the real text height . After some time digging I found the culprit (see FlxText.hx#710):

var newHeight:Int = Math.ceil(textField.textHeight) + VERTICAL_GUTTER;
...
// which later becomes field's and render frame's height
height = newHeight;
frameHeight = newHeight;

/**
  The height of the text in pixels.
**/
public var textHeight(get, never):Float;

I believe instead of textField.textHeight there should be textField.height, though maybe there was a reason to not use height prop.

[Geokureli]

I'm not sure what your goal is, or what you're suggesting

[T1mL3arn]

Well, let me explain it in more details with screenshots.

I can set width and height for openfl textfield so the field gets fixed size.

openfl textfield code [CLICK TO EXPAND]

var text = new TextField();
text.text = 'Lorem ipsum foo bar sit amet!';
var format = text.defaultTextFormat;
format.font = 'Arial';
format.size = 18;
format.color = 0x111111;
format.align = LEFT;
format.leftMargin = 25;
format.rightMargin = 25;
text.setTextFormat(format);
text.selectable = false;
text.autoSize = NONE;
text.wordWrap = true;
text.background = true;
text.backgroundColor = 0xEEEEEE;
text.textColor = 0x111111;
text.width = stage.stageWidth * 0.8;
text.height = stage.stageHeight * 0.3;
trace(text.height);
text.x = stage.stageWidth * 0.5 - text.width * 0.5;
text.y = stage.stageHeight - text.height * 1.1;

addChild(text);

But I cannot do this the same way with FlxText, because it uses textHeight instead of height to update its final height

flixel textfield code [CLICK TO EXPAND]

var text = new FlxText();
text.text = 'Lorem ipsum foo bar sit amet!';
var format = text.textField.defaultTextFormat;
format.size = 18;
format.color = 0x111111;
format.align = LEFT;
format.leftMargin = 25;
format.rightMargin = 25;
text.textField.defaultTextFormat = format;
text.textField.setTextFormat(format);
@:privateAccess text._defaultFormat = format;
@:privateAccess text.updateDefaultFormat();
text.autoSize = false;
text.wordWrap = true;
text.textField.background = true;
text.textField.backgroundColor = 0xEEEEEE;
// text.textColor = 0x111111;
var w = Flixel.width * 0.8;
var h = Flixel.height * 0.25;
trace('h', h);
text.width = text.textField.width = w;
text.height = text.textField.height = h;
trace('field height', text.textField.height);
text.x = Flixel.width * 0.5 - text.width * 0.5;
text.y = Flixel.height - h * 1.1;
trace('field height', text.textField.height);

Flixel text field always shrinks its height to match given text, it is not possible to create a fixed-size FlxText. Possible workarounds for the given example: use background sprite or just openfl textfield.

Possible fixes:

• use textfield.height instead of textfield.textHeight in regenGraphic() but I believe it is a breaking change
• introduce new prop like "autoHeight" to allow disabling auto height

[Geokureli]

a sprite's width and height refer to the size their collision box, not some kind of graphical width or height. sprite's collision size can be set to whatever the dev decides for collision reasons but it's not meant to used internally to represent graphic size. We are actively working to make this distinction more clear, such as with HaxeFlixel/flixel-docs#258 and #2667.

So we absolutely should not use textfield.height in regenGraphic

[T1mL3arn]

Let me clarify this a little more: the issues is about not being able to set fixed size to openfl textfield itself (i.e. openfl textfield here is a graphic object). Flixel boldly assumes that no one needs this and gives no control on such behavior.

[Geokureli]

I think i just need a more concrete example of what you're trying to do but cannot

[T1mL3arn]

The example is above. I want to be able to set fixed size for FlxText as I can do it with plain TextField. Background color helps to see that FlxText instance shrinks its height. Trying to put it as design: I want an infobox which preserves its size no matter what text it has. If it is 10x10 pixels and I set its text as "hello world" it remains 10x10. If later I set its text to "lorem ipsum dolor sit amet" it still should be 10x10 pixels.

Current implementation of autosizing does not allow this (it came from flash version of flixel). Without breaking change it could be fixed in this ways:

1. new bool prop autoHeight to disable auto sizing for height.
2. new prop fieldHeight to set fixed height for internal textField, similar to fieldWidth

Any of these fixes would make regenGraphic() to use height instead of textHeight (only if a user explicitly wants it). I did the fix as autoHeight but I like the second way more. I will update my fixes and do PR.

Also there is a question about FlxText.autoSize. Why was it made to affect only width? Why cannot it be the same as openfl autoSize? Though changing it would be a breaking change, so it is best to left it as another issue.

[Geokureli]

I see, I didn't notice you're example above had a dropdown code example, I've never seen this feature of github. I also see that I was mistaking myText.height with mytext.textField.height. this all make sense, I'll play around with TextField and FlxText and see the inconsistencies first hand before making a decision

[T1mL3arn]

I'll play around with TextField and FlxText and see the inconsistencies

I did some tests (they are small and does not cover all possible prop combinations, textfields are complex and tricky 😓 ) and I would say the main problem is FlxText autosizing approach. It is easy for a user but takes away some control of textfield. I made FlxText to be not so smart about autosizing, e.g. fieldWidth/fieldHeight are just plain getters/setters for underlying textfield.width/height and they don't touch autoSize prop. It worked quite well except it is a breaking change, now the user must set auto sizing explicitly.