Tweening graphic elements's width

[grumpygamer]

Hey guys, a bit at a loss here,

went through the forums' search with no relveant result (read all 6 pages) and googled for a bit.

 

I have created some stat bars like so:

var statBar = game.add.graphics(0,0);    statBar.beginFill(0xffffff);    statBar.drawRect(0, 0, 100, 3);    statBar.endFill();

if now I change it's width:

statBar.width = 200;

or tween it:

tw = game.add.tween(statBar).to({width : 200}, 500, easingX).start();

it just gets ENORMOUSLY long and not 200px that I was expecting.

 

Also reading the guide (https://phaser.io/docs/2.2.2/Phaser.Graphics.htm) it says - about width:
 

 

 

The width of the displayObjectContainer, setting this will actually modify the scale to achieve the value set

 

So either it's not working properly, or I am not understanding what's going on (most likely   ), so
can anyone shed some light?

 

Thanks

[lukaMis]

This is how i am doing it an it works fine. (I am tweeting from max with to 0 but it should not matter.)

createFireBar: function () {    this.fireBar = this.game.add.graphics(0, 0);    this.fireBar.lineStyle(0);    this.fireBar.beginFill(0xFFFFFF);    this.fireBar.drawRect(0, this.game.height - this.fireBarHeight, this.game.width, this.fireBarHeight);    this.fireBar.endFill();  },  startFireBarTween: function () {    this.fireBarTween = this.game.add.tween(this.fireBar).to( { width: 0 }, this.PLAYER_FIRE_MAX_WAIT, 'Linear', true );  },  resetFireBar: function () {    this.fireBar.width = this.game.width;  },

[grumpygamer]

Hmm could you just try it the other way round?

If it's tweening the scale it should only work to zero so checking would be a great idea.

I'll set up a Fiddle to prove what I'm saying.

[lukaMis]

There is no reason for it not to work in opposite direction. I just need it to tween from full size to zero as I am using it as a graphical representation of time left for an action that user can make.

[XekeDeath]

Graphics objects behave differently, probably because you can draw whatever where ever you want...

You can have that rectangle at (0,0), another at (100, 245) and a circle at (3,3), all on the one graphics object...

 

My assumption is that regardless of what  you draw, the graphics width is considered 1, so tweening the width to 200 would tween the scale.x to 200 instead.

Tweening to 0 works because it is going from 1 to 0.

 

Two options are clear the graphics object every frame and redraw the rectangle based on a separate tweened variable, or create a sprite from the graphics object and use that instead...