Skip to content

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'
    easeParams:

    duration: 1000,
    delay: 0,
    loop: 0,
    hold: 0,
    repeat: 0,
    loopDelay: 0,
    completeDelay: 0,
    yoyo: false,

    paused: false,
    useFrames: false,
    flipX: false,
    flipY: false,


    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
        },
        // ...
    ],


    callbackScope: timeline,

    onStart: function () {},
    onStartScope: 
    onStartParams: [],

    onUpdate: function () {},
    onUpdateScope:
    onUpdateParams: [],

    onLoop: function () {},
    onLoopScope:
    onLoopParams: [],

    onYoyo: function () {},
    onYoyoScope:
    onYoyoParams: [],

    onComplete: function () {},
    onCompleteScope:
    onCompleteParams: [],

    totalDuration: 0,

});