Timeline

Introduction

Chain a series of tween tasks, built-in object of phaser.

  • Author: Richard Davey

Usage

Create timeline, then chain tween tasks

  1. Create timeline
    var timeline = scene.tweens.createTimeline();
    
  2. Add tween task configuration
    timeline.add({
        targets: gameObject,
        x: 400,               // '+=100'
        ease: 'Linear',       // 'Cubic', 'Elastic', 'Bounce', 'Back'
        duration: 1000,
        repeat: 0,            // -1: infinity
        yoyo: false,
        // offset: '-=500',   // starts 500ms before previous tween ends
    })
    
    • offset : Start this tween task with a time offset.
      • A number : Absolute offsets, start this tween task after timeline start.
      • A string, '-=n' : Relative offsets, start this tween task before previous tween ends.
  3. Start tween tasks
    timeline.play();
    

Create timeline, included tween tasks

var timeline = scene.tweens.timeline({
    targets: gameObject,
    ease: 'Linear',       // 'Cubic', 'Elastic', 'Bounce', 'Back'
    duration: 1000,
    loop: 0,

    tweens: [
        {
            targets: gameObject,
            x: 400,               // '+=100'
            // ease: 'Linear',       // 'Cubic', 'Elastic', 'Bounce', 'Back'
            // duration: 1000,
            // repeat: 0,            // -1: infinity
            // yoyo: false,
            // offset: '-=500',   // starts 500ms before previous tween ends
        },
        // ...
    ]
});