Container With Sprite + Text - Centering Text

[jpperlm]

I'm struggling to center my text inside a container. I'm not sure how to best do this programmatically. 

Here I have a sprite circle radius 12.5. 

let sprite    = p.add.sprite(0,0,'circle')
 let label     = p.add.text(-12.5,-12.5,letters,{
            fontFamily:'Arial',
            color:'#000000',
            align:'center',
          }).setFontSize(18);

var container = p.add.container(rand_x, 50,[sprite,label]).setSize(25, 25);
 

I understand I can play with the position to make this work however it won't work for all shapes and amounts of letters. I'm not understanding the text boundaries logic. Can i set the canvas which the text is on to have a specific size such that the 'align' actually does something?

[jamespierce]

Try label.setOrigin(0.5);

[jpperlm]

Awesome! It's still slightly off but so much better. Thanks!

[jamespierce]

@jpperlm yay glad it improved  I also have to slightly change the x/y coords of text depending on which container I want to put it inside.

[samme]

align positions the lines relative to each other. If there's only one line of text, there's nothing to align.

[GreenCloversGuy]

Sorry to revive a sorted issue, but I have to ask, why is the origin of text different to the origin of other game objects? Are there any other game objects with origins other then (0.5, 0.5)?

And wouldn't it make sense to make reference to this in the API? I know the API is still being worked on, but I nearly went crazy trying to get my text to align properly because I didn't realise that the origin was (0, 0) and not the default 0.5. Is this an issue I should raise on github?

https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Text.html#originX__anchor

[jamespierce]

15 hours ago, GreenCloversGuy said:

Are there any other game objects with origins other then (0.5, 0.5)?

The graphics object also has origin at 0,0. Moreover, graphics objects cannot have a different origin than 0,0.

Sorry for sidetracking a bit but this is related info about graphics objects, especially if you are dealing with origins:

• When you add a graphics object to your scene, make sure you set the x,y coordinates. Else it will default to 0,0 and you might be confused why a graphics object in the center of your screen has its coords set to 0,0. Link to doc: https://photonstorm.github.io/phaser3-docs/global.html#GraphicsOptions
• If you want to detect input on a graphics object, you have to use a geometry object to manually set the input area. Link to doc: https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Graphics.html#setInteractive__anchor

15 hours ago, GreenCloversGuy said:

https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Text.html#originX__anchor

You're right, the doc says it defaults to 0.5. I guess this needs to be updated in the doc. I think there is a place to submit change requests to the doc somewhere but I couldn't find it myself right now.