Trouble with aligning ex.Text with ex.Actor properly

[RyanGrieb]

Hi,
Currently I have a Button class that extends Actor, and a text component inside the button class like so:

class Button extends ex.Actor {

constructor(...) { 
...
this.text = new ex.Text({...})
}

public onInitialize() {
this.graphics.show(this.defaultSprite)
this.graphics.show(this.text)
}

}

What steps should I take to align the text component properly inside my actor? I don't see anything in the docs that would allow me to change the Text location relative to the Actor.

This is what it looks like currently:

[eonarheim]

Hi @RyanGrieb thanks for opening a discussion!

I can think of a couple things you can try to re-position the text graphic.

• ex.Text draws from the bottom left of the text glyphs by default on the ex.BaseAlign.Alphabetic, try setting it to ex.BaseAlgin.Top?

this.text.font.baseAlign = ex.BaseAlign.Top;

• Try specifying a graphics offset when you call show() to shift the graphics down

this.graphics.show(this.text, {
  offset: ex.vec(0, this.text.localbounds.height) 
});

[RyanGrieb]

Setting text.font.baseAlign = ex.BaseAlign.Top worked. Thank you!