Jump to content

Tweening graphic elements's width


Recommended Posts

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  :P ), so
can anyone shed some light?



Link to comment
Share on other sites

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;  },
Link to comment
Share on other sites

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...

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...