Problem creating bars

[NeoGenesisRevo]

down votefavorite

I've tried a few things but nothing solid enough to post. I'm trying to create a few bars (think mana and hp) that all grow at the same time but at different rates. Then when one has reach it's full size they would all stop and await some sort of signal. After that it would reset back to zero and start again with all the other bars resuming their progress. Below I have something unexpected. When the width grows the sprite shoots off to the right, but if the sprite is created outside the speedBar, the tween works just fine. Any ideas?

'

    bmd = game.add.bitmapData(10,10);
    bmd.ctx.beginPath();
    bmd.ctx.rect(0,0,128,128);
    bmd.ctx.fillStyle = '#ff0000';
    bmd.ctx.fill();

    speedBars = game.add.group();

    // use the bitmap data as the texture for the sprite
    speedBars.create(200, 200, bmd);
    game.add.tween(speedBars).to( { width: 125 }, 1000, Phaser.Easing.Linear.None, true, 0, -1, false);

Here it is working correctly:

//just change the last 3 lines 

sprite = game.add.sprite(200, 200, bmd);
    speedBars.add(sprite);
    game.add.tween(sprite).to( { width: 125 }, 1000, Phaser.Easing.Linear.None, true, 0, -1, false);

I still need an idea on how to pause all the bars wait and then restart one and resume.

[Taggrin]

I am not entirely sure you can tween the width of a group (I recall having it some sort of global "position", but I am not sure so don't count me on that!). In the 2nd part you are using a tween on only one item in the group. A solution I can quickly come up with is to loop through your group and tween every child like this:

//Create group
speedBars = game.add.group();

//Create two instances of bars as example
speedBars.create(200, 200, bmd);
speedBars.create(200, 300, bmd);

//Loop through all children within the group
for (var i = 0; i < speedBars.children.length; i++) {
   //Add tween to each child
   game.add.tween(speedBars.children[i]).to( { width: 125 }, 1000, Phaser.Easing.Linear.None, true, 0, -1, false);
}

 

As for pausing tweens, this example might be able to help you out: http://phaser.io/examples/v2/tweens/pause-tween

An other option is to work with scales. If the scale is 0 to 100, 0 means an empty bar, 100 means a full size bar. This system makes it in my opinion easier to switch the value (and pause by interrupting loops) at any time you like to any value. However the downside is that you have to make your own loops to let it fill up over time and to make it restart once needed.

//In update function
statusbar.scale.x = (currentValue / maxValue);

 

[drhayes]

You can tween the width of the group, but it will scale all the children. You'll end up with children with their own widths * the scale factor of their parent group = actual pixel width. Probably not what you want.