How to refer to the centre of an object instead of its top left? (JS/CSS/Phaser)

I’m making a scene on Phaser, and came across this issue:

gameState.easyButton = this.add.text(100, 500, ‘Easy’, { fill: ‘#4D39E0’, fontSize: ‘20px’ });
gameState.normalButton = this.add.text(225, 500, ‘Normal’, { fill: ‘#4D39E0’, fontSize: ‘20px’ });
gameState.hardButton = this.add.text(350, 500, ‘Hard’, { fill: ‘#4D39E0’, fontSize: ‘20px’ });

The width of my page is 450, so to spread out these three buttons, I positioned their x-value at 100, 225, and 350 respectively. But this seems to position them by their top-left corner, not their centre, so they’re all too much to the right. (e.g. the first button’s top left is at 100, not its centre, so its centre is at about 130.) How do I make it such that I’m referring to their centres when I key in their coordinates?

You could look into .setOrigin(). I’d link the documentation, but I find their official documentation quite frustrating, while their examples section is fantastic. Here’s a link to unofficial documentation though: Game object origin

It could be as easy as

gameState.easyButton = this.add.text(100, 500, 'Easy', { fill: '#4D39E0', fontSize: '20px' }).setOrigin(0.5);

if I’m understanding what you’re after

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.