How to dynamically change tween properties

Phaser 3
1

Hello! I was wondering if it was possible to dynamically change the properties of a tween.

Basically, I would simply like to create a unique method which will have an object as parameter.

The object would contain data from an JSON file. The object would look like something like this :

const data = {
   target: param[0],
   property: param[1],
   value: param[2],
   ease: param[3],
   delay: param[4],
   duration: param[5],
   onComplete: param[6]
}

Then my method would look like this :

private readonly onPlayAnimation = (data: any): void => {
   this.scene.tweens.add({
      targets: data.target,
      data.property: data.value,
      ease: data.ease,
      delay: data.delay,
      duration: data.duration,
      onComplete: () => {
        Object.keys(data.onComplete).forEach(key => {
          EventDispatcher.getInstance().emit(data.onComplete[key])
        })
      }
    })
  }

The issue that I’m facing is this : data.property: data.value . Phaser does not like it even if the value of the data.propety is “alpha”. However, if I change the property by the “real” property alpha, it will work. I don’t want to create a method for every possible properties.

Is there a way toa chieve this goal? Thanks

2

:wave:

You have to use square brackets for computed property names.

{ [data.property]: data.value }

An alternative, for Phaser’s tween configs, is to use props:

{ props: data.props }

e.g.,

{ props: { x: 1, y: 2 } }
1 Like
3

Thanks a lot!