About the use of Phaser3 and Tweens Animation.

Phaser 3
1

We would like to get the coordinates and angles of multiple objects from a json file and create a playback of around 30,000~50,000 animations.
Is PhaserJS(3.60) suitable for this case?
If suitable, is it correct to use Tweens?

Is it possible to implement a seek bar function with Tweens animations?
I am currently implementing the following, but the animation starts late and the object coordinates and rotation angle are wrong.

Is it also possible to rewind the Tweens animation with the seek function?

The version of PhaserJs is 3.60.

// Seek part
const scenesIndex = Object.keys(tweensArray); // The form of tweensArray is shown below
const totalTime = Math.floor((scenesIndex.length * 100) * (startSceneNumber / 100)); // startSceneNumber contains the value of what percentage to skip.
this.tweens.getTweens().forEach((tween) =>{
    tween.pause();
    tween.seek(totalTime, 16.6, true);
    tween.resume();
    tween.targets[0].x = (tween.getValue() == 0) ? -1000 : tween.getValue();
    tween.targets[0].y = (tween.getValue() == 0) ? -1000 : tween.getValue();
  });


// The animation is created as follows.
// There are n animations and n + 22 tweens.
const tweensArray = {
  1: [],
  3: [],
  5: [Tween2],
  8: [Tween2],
  10: [Tween2, Tween2],
  14: [Tween2, Tween2, Tween2],
  15: [Tween2, Tween2, Tween2, Tween2],
  16: [Tween2, Tween2, Tween2, Tween2],
  17: [Tween2, Tween2, Tween2, Tween2],
  21: [Tween2, Tween2, Tween2],
  n: [Tween2 * n],
};


/*
  Methods for creating animation.

  targetsObj  : targetsObj is a sprite object.
          this.add.sprite(-1000, -1000, 'ImgObj').setAlpha(0).setDepth(500);
  imgPos : imgPos contains x and y coordinates.
  angle       : angle is the angle of rotation.
  counter     : counter is a counter for delay.
*/
createTweensAnimation(targetsObj, imgPos, angle, counter) {
    const tween = this.tweens.add({
      targets: TargetsObj,
      x: imgPos.x,
      y: imgPos.y,
      duration: 100,
      delay: counter * 100,
      persist: true,
      onStart: function() {
        TargetsObj.setAngle(angle);
        TargetsObj.setAlpha(1);
      },
      onPause: function() {
        console.log("onPause");
        TargetsObj.setAlpha(0);
      },
      onResume: function() {
        console.log("onResume");
        TargetsObj.setAlpha(0);
      }
    })
    return tween
}
2

Phaser can run a lot of tweens at once. But I think seeking all of those at once could be a problem.

It’s possible to make one tween for several targets with different end properties and delays (see the examples). That would be easily seekable.

You can seek a tween behind its current position, but you can’t play it backwards, AFAIK.

First, get a basic tween working the way you want it, before you try any seeking.

3

Thank you for your response.
Once I was able to play the basic Tweens animation without using seek.

From here I would like to add the seek function.

I have a few questions in response to your answers.

It’s possible to make one tween for several targets with different end properties and delays (see the examples 2). That would be easily seekable.

Q1. which example would that be?
Q2: I am creating an animation in which multiple objects are moving forward according to coordinates (like a car race or a relay on land).
Q3: To begin with, is it possible to implement seek in such a tweens animation?

You can seek a tween behind its current position, but you can’t play it backwards, AFAIK.

We obviously want it to seek before its current position, but we also want it to seek backwards from its current position.
Q1. is there an example somewhere of how to do this?

4

I guess not many :smiley: but see stagger delay and delay function.

Is there one set of destination coordinates (i.e., moving in a straight line) or several (moving along a path)?

You can seek in any tween. But if you use one tween controlling multiple targets, seeking that tween will affect all of them, naturally.

See seek to point in tween. Click and the tween will seek to 1s, while it’s running.

You can also restart or yoyo a tween, but that’s different from seeking.

5

Is there one set of destination coordinates (i.e., moving in a straight line) or several (moving along a path)?
You can seek in any tween. But if you use one tween controlling multiple targets, seeking that tween will affect all of them, naturally.

{
    1st animation:{},
    2nd animation:{},
    3rd animation:{},
    4th animation:{
        object1 : {"coordinates":[x, y], 'rotation angle': 0,0}
    },
    5th animation:{
        object1 : {"coordinates":[x, y], 'rotation angle': 0,0}
    },
    6th animation:{
        object1 : {"coordinates":[x, y], 'rotation angle': 0,0}
    },
    7th animation:{
        object1 : {"coordinates":[x, y], 'rotation angle': 0,0},
        object2 : {"coordinates":[x, y], 'rotation angle': 0,0}
    }
    8th animation:{
        object1 : {"coordinates":[x, y], 'rotation angle': 0,0},
        object2 : {"coordinates":[x, y], 'rotation angle': 0,0}
    },
    n animation:{
        objectn : {"coordinates":[x, y], 'rotation angle': 0,0},
        ......
    }
}

The Json file with animation:{object to be moved:{coordinates, rotation angle}} is read as above.
There are 30,000 to 50,000 such data, and based on this, we will create a chunk of tweens like the tweensArray I wrote at the beginning, and I wonder if it is difficult to seek them because of the amount of data.

See seek to point in tween. Click and the tween will seek to 1s, while it’s running.
You can also restart or yoyo a tween, but that’s different from seeking.

Thanks for the example.
What I want to achieve is different from yoyo.
If it is difficult to go back in seek, is it difficult to play back from a few seconds before when some button is pressed, etc.?

6

You may just have to try a prototype for this. I’m just guessing that seeking thousands of tweens at once might be slow. Do you definitely want to show 30–50k sprites at once?

I may have confused you on seek(), but I wasn’t sure what you meant by “rewind”. You can seek to any time position in a tween, ahead or behind, but it happens instantaneously.

7

I think I was completely wrong about this. All that matters is how many TweenData there are, not how many tweens.

I think the seek cost is

seekAmount * tween.data.length / seekDelta