Tweening Width value while maintaining 0.5 Origin

Phaser 3
1

I want to tween a Rectangle’s Width to 0, while respecting its 0.5 Origin value.

My expectation is that it should shrink horizontally towards its center, without the need to manually change the x value.

This sandbox demonstrates what I want. Look at the White bar, compared to the others. I achieved the desired effect with the Red and Cyan bars by changing the x value as a function of the current width during the tween’s progress. (One by tweening the x as well if the x is static, one by doing it in the onUpdate if the x is dynamic.

But is this correct or a hack?

2

Tween the displayWidth or scaleX properties.

1 Like
3

Thanks for the reply, but I found out that calling setSize() in an onUpdate is the best solution.

this.tween0 = this.tweens.add({
              targets: this.bar0,
              props: {width: 0},
              duration: this.duration,
              ease: 'Linear',
              repeat: -1,
              callbackScope: this.bar0,
              onUpdate: function (tween, target, key, current, previous, param) {
	        		this.setSize(this.width, this.height);
              }
          });

This way any stroke I have on the shape does not get distorted. displayWidth and scaleX both shrink the stroke, which is not the desired look I want for a “Time Remaining” bar.