javascriptsyntaxphaser-frameworkphaserjs

Phaser 3 Tween syntax breakdown for updating properties

I'm new to Javascript and Phaser and I came across the following code while working on a project in Codecademy

this.tweens.add({
  targets: obj,
  duration: 750,
  x: '-= 300',
});

I know that the tween is to make the target obj move 300px to its left, but why does the syntax x: '-= 300' work? Is this a syntax for Javascript or only for Phaser's tween?

Solution

  • This is only a Phaser tween helper syntax, javascript has string interpolation (mdn reference), but this has nothing to do with this phaser feature.

    Here you can find a nice overview over some possibilities.

    Or you can check the github repo, here the conversion is implemented and documented. I couldn't find any details in the official documentation about this feature.

    An Excerpt from the Github Repo

    ...
* If the end value is a number, it will be treated as an absolute value and the property will be tweened to it.
* A string can be provided to specify a relative end value which consists of an operation
* (`+=` to add to the current value, `-=` to subtract from the current value, `*=` to multiply the current
* value, or `/=` to divide the current value) followed by its operand.
...