How to animate enemy with tween tasks in phaser 3

Question

I have seen animated enemies in simple games that will chase you, attack you, or perform a sort of task.

In phaser 3, how do I give a sprite multiple tasks using tweens?

For now, I have only a tween that performs a really simple task

gameState.enemy.move = this.tweens.add({
    targets: gameState.enemy,
    x: 600,
    ease: 'Linear',
    duration: 1800,
    repeat: -1,
    yoyo: true
  });

Also, what exactly is a tween? Can a sprite have multiple tweens? Can a tween help perform multiple tasks? I found this website but did now understand.. https://rexrainbow.github.io/phaser3-rex-notes/docs/site/tween/

Answer 1

A Tween is just a "function", that changes properties (only numeric) values of an object (or multiple objects), from a start value to an end value, over a specific duration. (the object doesn't even need to be a phaser sprite or image or ..., as shown in the example below)

And Yes, you can change multiple values in one tween (check example below).

Here a very simple example, with a basic Javascript object:

var config = {
    type: Phaser.AUTO,
    width: 400,
    height: 200,
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    scene: {
         create
    }
};

var game = new Phaser.Game(config);


var simpleObject = {value: -1, value2: -2}


function create ()
{

console.info('Initial value', JSON.stringify(simpleObject))

    this.tweens.add({
        targets: simpleObject,
        value: {from:0, to: 100},
        value2: {from: 10, to: 200},
        duration: 3000,
        delay: 500,
        onUpdate: _=>  console.info('On Update', JSON.stringify(simpleObject)),
        onComplete: _=> console.info('After Tween', JSON.stringify(simpleObject))
    });
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>