How can i set the progress of Tween in Phaser3?

Phaser 3
1

Hey：

it work like this:
https://greensock.com/beziertweens

I am trying to find the answer from the API, like: progress seek, emmm…i failed~

Thanks

2

tween.seek(progress);
See example.

3

emmmm…thank you very much~

4

I’m having a problem with this. I find that if you try to set the seek value in the create method, it will just default the tween value to 0.

I am trying to start a tween at a random point whenever the scene starts. So right after I do the this.tweens.add({}), I’m calling myTween.seek(Random float between 0 and 1). When the scene starts, the tween ignores the seek, just sets the start value to 0, and then does the tween from 0 to the submitted value.

To see this in action, go to the example linked above. Right after “document.body.appendChild(progressBar);”
add “tween.pause()”.

Now run the example, and try to use the progress bar to seek the tween. The box will jump to 0,0 and stay there.

What is the appropriate way to start a tween in the middle?

Thanks!

5

To add to this, I’ve also found the .seek method doesn’t do what I would expect if “yoyo” or “loop” is set. Please see the attached example which can be run in the sandbox.

When moving the progress bar, the first tween, which has no loops or yoyo, performs as expected.

The second tween, which has “yoyo: true”, acts like the first tween. I would expect that when I .seek(0.5) on the yoyo tween, the box would be placed on the far right, since this is the middle of the tween. Instead it is placed in the middle, just like the first tween.

The third tween, which has “loop: 1”, only moves when .seek is between 0 and 0.5, which correctly shows the tween before it loops. When set between 0.5 and 1, the box doesn’t move and stays pinned at the right side. I would expect the box to go through the full tween again for these values, because it would be during the first loop.

Thanks

Example code:
var config = {
type: Phaser.CANVAS,
width: 800,
height: 600,
backgroundColor: ‘#2d2d2d’,
parent: ‘phaser-example’,
scene: {
preload: preload,
create: create,
update: update
}
};

var tween1;
var tween2;
var tween3;
var progressBar;

var game = new Phaser.Game(config);

function preload ()
{
this.load.image(‘block’, ‘assets/sprites/block.png’);
}

function update() {}

function create ()
{
var marker1 = this.add.image(100, 100, ‘block’).setAlpha(0.3);
var image1 = this.add.image(100, 100, ‘block’);
tween1 = this.tweens.add({
targets: image1,
props: {
x: { value: 700, duration: 4000 }
}
});

var marker2 = this.add.image(100, 200, ‘block’).setAlpha(0.3);
var image2 = this.add.image(100, 200, ‘block’);
tween2 = this.tweens.add({
targets: image2,
yoyo: true,
props: {
x: { value: 700, duration: 4000 }
}
});

var marker3 = this.add.image(100, 300, ‘block’).setAlpha(0.3);
var image3 = this.add.image(100, 300, ‘block’);
tween3 = this.tweens.add({
targets: image3,
loop: 1,
props: {
x: { value: 700, duration: 4000 }
}
});

progressBar = document.createElement(‘input’);
progressBar.type = ‘range’;
progressBar.min = ‘0’;
progressBar.max = ‘100’;
progressBar.step = ‘.001’;
progressBar.value = ‘50’;
document.body.appendChild(progressBar);

progressBar.addEventListener(‘input’, function (e) {

tween1.pause();
tween1.seek(e.target.value / 100);
tween2.pause();
tween2.seek(e.target.value / 100);
tween3.pause();
tween3.seek(e.target.value / 100);

});
}