Set a text inside a circle in phaser 3-CodePudding

I'm creating my first phaser 3 game. I'm trying to create a container in the shape of a circle with a text inside it. here is my current code:

this.circle = this.add.circle(0, 0, gameOptions.wheelRadius / 3, 0xa60e1a);
var textConfig = {fontSize:'20px', color:'white', fontFamily: 'Arial'};
this.Text = this.add.text(0, 0, "میخوای بچرخونی؟", textConfig);
this.myBtn = this.add.container(gameConfig.width / 2, gameConfig.height / 2, [this.circle, this.Text]);
this.myBtn.setSize(this.circle.width, this.circle.height);

but the text doesn't set inside the circle properly and half of the text is out of circle. to be clear, I want the circle to be like a button with an inner text. I'll appreciate any help. Thanks

CodePudding user response：

The easy solution would be to use the function Phaser.Display.Align.In.Center(...);
Here the link to the documentation, and here is a link to some good example

Here your code slightly modified:

document.body.style = 'margin:0;';

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 183,
    scene: {
        create
    },
    banner: false
}; 

function create () {
    this.circle = this.add.circle(0, 0, 50, 0xa60e1a);
    var textConfig = {fontSize:'20px', color:'white', fontFamily: 'Arial'};
    this.Text = this.add.text(0, 0, "test text", textConfig);
    this.myBtn = this.add.container(config.width / 2, config.height / 2, [this.circle, this.Text]);
    Phaser.Display.Align.In.Center( this.Text, this.circle );
}

new Phaser.Game(config);

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>