Aligning two different text/styles in a container

Phaser 3
1

Looking to attempt to have two different styles of text aligned in the container in the order they appear.
In the example below I am trying to put “$5.00” in the center of a sprite with a smaller dollar symbol but it appears to not be effected by align

Could there another way to achieve this?

var config = {
type: Phaser.AUTO,
parent: ‘phaser-example’,
width: 800,
height: 600,
scene: {
preload: preload,
create: create,
update: update
}
};

var game = new Phaser.Game(config);

function preload ()
{
this.load.image(‘cat1’, ‘assets/animations/cat1.png’);
}

function create ()
{

var cat = this.add.sprite(0, 0, ‘cat1’);
var container = this.add.container(game.config.width/2,game.config.height/2);

var text = this.make.text({
add: false,
text: ‘5.00’,
style: {
fontSize: ‘60px’,
color: ‘#000000’,
}
});

var text2 = this.make.text({
add: false,
text: ‘$’,
style: {
fontSize: ‘30px’,
color: ‘#000000’,
}
});

text.setOrigin(0.5, 0.5);
text2.setOrigin(0.5, 0.5);

container.add(cat);
container.add(text2);
container.add(text);

}

function update ()
{

}

2

I guess you have to do it manually.
Like this for example.

3

I have a plugin which can display colored text with different font size using bbcode protocol.

1 Like
4

Thanks for the options :slight_smile: I will try both out.