How to properly scale down text along a point in the center

[hellspawn_bg]

Hi guys, I want to add a tween in my game that scales down a text along a point in the center. It should look something like this:

 

 

I can achieve this easily with images by setting up achor to (0.5, 0.5), but to my knowledge, bitmaptext does not support anchor. So my question is how can achieve the same functionality with text?

[MichaelD]

Same question here. Can someone answer this? pivot doesn't seem to do the trick

[alex_h]

Unless Phaser modifies this Pixi feature (which I doubt) then pivot should work, just remember that pivot is measured in pixels, so set it to text.width * 0.5 and text.height * 0.5

[MichaelD]

Still not perfect because the text starts more to the left before the scale. But the end result after the scale is correct.

[alex_h]

When you modify the pivot you need to adjust the x & y by the same amounts in order for the display object to be rendered in the same location.

eg if you set pivot.x to 200 you need to add 200 to position.x otherwise the object will be rendered 200px to the left of where it was previously.

[MichaelD]

I have the following:

var waveCount = game.add.bitmapText(game.world.centerX, game.world.centerY - 10, 'mageGreen', text, 42);waveCount.updateText();    waveCount.x = game.world.centerX;    waveCount.y = game.world.centerY - 50;        waveCount.pivot.x = waveCount.width * 0.5;    waveCount.pivot.y = waveCount.height * 0.5;    var tween = tweenProperty(waveCount, "size", {        fontSize: 84    }, 800, 0, Phaser.Easing.Back.Out);

This has the text aligned in the center of the screen (correctly), but when the tween ends the text is no longer centered, but rather moved towards the right.

 

So what should I do in this situation? Since the initial text is centered correctly but after the increament it is mis-aligned, basically I want to scale it from the center.

[alex_h]

Oh, you are tweening the font size, not the scale - that's not going to work the same. You would need to re-apply the pivot values on tween update for that to work, since the width of the textfield is being changed too.

[MichaelD]

Yes using scale worked.

 

For reference I did the following:

waveCount.x = game.world.centerX;    waveCount.y = game.world.centerY - 50;        waveCount.pivot.x = waveCount.width * 0.5;    waveCount.pivot.y = waveCount.height * 0.5;    var tween = tweenProperty(waveCount.scale, "size", {        /*fontSize: 84*/        x: 2,        y: 2    }, 800, 0, Phaser.Easing.Back.Out);

Thanks alex for your help and for baring with me!

[alex_h]

No problem, glad it's working for you now!