flixel
flixel copied to clipboard
Support FlxButton scaling better
- Haxe version: 3.4.2
- Flixel version: 4.2.0
- OpenFL version: 3.6.1
- Lime version: 2.9.1
- Affected targets: JS
Code snippet reproducing the issue:
package;
import flixel.FlxState;
class PlayState extends FlxState
{
override public function create():Void
{
var newGameButton = new FlxButton(0, 0, "Label", function() { });
// Scale up and set font size appropriately
newGameButton.scale.x = newGameButton.scale.y = 3;
newGameButton.label.setFormat(null, 32);
newGameButton.label.width *= 3;
this.add(newGameButton);
}
}
Observed behavior:
The text is truncated, and I can only click on the original (unscaled) part of the button. I probably need a call to updateHitbox
to fix that part, right?
Expected behavior: Non-truncated text
How do I scale up a button size, including font, without having to jump through hoops like this?
Seems like a duplicate of #1812?
1812 seems like a subset of this issue. I need to also scale the text properly. And, I would wish for a one-line way to do this (but you said in 1812 that that's tricky, so I guess that's not going to happen).
Text scaling is also mentioned in #1812, but the issue description here is better, so I guess I'll close the other issue.
Not sure when I can test this, but is the text being truncated at 80 pixels or 100 pixels? If it's at 100, the issue is the label
's textfield
is not set to autosize. If it's at 80, you have to set fieldWidth
of the label
, not just width
.
Scaling the text with the button is not straightforward. You'd probably have to test and find the maximum font size where the content looks the same. Or maybe guess based off of newHeight / textHeightOfSingleLine
.
if you want to change label's text width, then you should replace this line from the initial example:
newGameButton.label.width *= 3;
to this:
newGameButton.label.fieldWidth *= 3;
Text's width
property just updates its hitbox, but fieldWidth
update internal textfield and bitmapdata which are used for text rendering