how to center the bitmap text?

[oxxxo]

I added a bitmap text as a child of a sprite but I can't position the text in its center.

[Carlos]

Have you tried setting the anchor to 0.5?

text.anchor.x = 0.5;text.anchor.y = 0.5;

[oxxxo]

 

Have you tried setting the anchor to 0.5?

text.anchor.x = 0.5;text.anchor.y = 0.5;

I tride it and it doesnt work:

 

this is how I add a bitmap to the sprite:

 

 

this.choices.addChild(this.showChoice1);

 

this.showChoice1.anchor.x = 0.5;

this.showChoice1.anchor.y = 0.5;

 

 

its says x in not define

[Carlos]

Are you sure that showChoice1 is a BitmapText object?

If it is BitmapData you first need to add it as a texture of a sprite and then position that sprite.

[oxxxo]

Are you sure that showChoice1 is a BitmapText object?

If it is BitmapData you first need to add it as a texture of a sprite and then position that sprite.

it is a bitmapText:

which I declared like this, 

 

this.showChoice1 = this.add.bitmapText(50 ,this.choice1.centerY - 10,'gamefont', '' + this.choice, 100);this.choice1.addChild(this.showChoice1);

[Carlos]

The BitmapText anchor property is not available before version 2.3, so i think maybe you are using an older Phaser version.

[oxxxo]

The BitmapText anchor property is not available before version 2.3, so i think maybe you are using an older Phaser version.

Hi , ur right Im not using the current version of Phaser.. I already downloaded the newest one and implement it.

 

However I could not still center the bitmaptext in its parent:

 

Heres the remodelling code, 

 

       

 this.choice1 = this.add.sprite(10, 750, this.drawButtons(0, 0, 160, 160, 20, "yellow" ));        this.choice1.inputEnabled = true;        this.showChoice1 = this.add.bitmapText(0 ,0,'gamefont', '' + this.choice, 105);        this.choice1.addChild(this.showChoice1);        this.showChoice1.anchor.x = 0.5        this.showChoice1.anchor.y = 0.5;

[Carlos]

Now you have to position the BitmapText x and y coordinates to half of the sprite width and height.

this.showChoice1 = this.add.bitmapText(choice1.width / 2 , choice1.height / 2,'gamefont', '' + this.choice, 105);

[MichaelD]

basically it might not work like that out of the box because the text hasn't rendered yet so the above solution will place the left-most point of the string in the center of the parent and thus making it see more right-oriented.

 

What you might want to consider is doing the following:

var text = game.add.bitmapText(0,0,"font", "Sample string", 24);text.update();text.updateText(); // call me crazy but this still helpstext.x = parent.width/2 - text.width/2;text.y = parent.height/2 - text.height/2;

[oxxxo]

Hi, I appreciate all for your help .. I had figured out the way how to center it.. thanks

[valueerror]

this is a help forum..  this also means that if you found a solution to your own problem you may want to post it to help others who find your post...

 

your problem actually is that you add the bitmap text as child to a sprite at 0,0

a normal sprite has it's anchor in the upper left corner.. positioning a sprite as child at 0,0 will also be in the upper left corner.. changing the anchor of the text will only move it relative to the upper left corner...  imho you should also change the anchor of the first sprite

[oxxxo]

this is a help forum..  this also means that if you found a solution to your own problem you may want to post it to help others who find your post...

 

your problem actually is that you add the bitmap text as child to a sprite at 0,0

a normal sprite has it's anchor in the upper left corner.. positioning a sprite as child at 0,0 will also be in the upper left corner.. changing the anchor of the text will only move it relative to the upper left corner...  imho you should also change the anchor of the first sprite

 

yah right.. here what solved my problem:

 

this.choice1 = this.add.sprite(10, 750, this.drawButtons(0, 0, 160, 160, 20, "yellow" ));        this.choice1.inputEnabled = true;        this.showChoice1 = this.add.bitmapText(0 ,0,'gamefont', '' + this.choice , 110);        this.choice1.addChild(this.showChoice1);        this.showChoice1.anchor.setTo(0.5, 0.5);        this.showChoice1.x = 78;        this.showChoice1.y = 74;

I manually set the coordinates inside the parent object then having set the anchor to 0.5 sets the bitmap text at the center what ever size it is..