/// /** * Phaser - Tween * * Based heavily on tween.js by sole (https://github.com/sole/tween.js) converted to TypeScript and integrated into Phaser */ module Phaser { export class Tween { /** * Tween constructor * Create a new Tween. * * @param object {object} Target object will be affected by this tween. * @param game {Phaser.Game} Current game instance. */ constructor(object, game: Phaser.Game) { this._object = object; this.game = game; this._manager = this.game.tweens; this._interpolationFunction = this.game.math.linearInterpolation; this._easingFunction = Phaser.Easing.Linear.None; this._chainedTweens = []; this.onStart = new Phaser.Signal; this.onUpdate = new Phaser.Signal; this.onComplete = new Phaser.Signal; } /** * Local reference to Game. */ public game: Phaser.Game; /** * Manager of this tween. * @type {Phaser.TweenManager} */ private _manager: Phaser.TweenManager; /** * Reference to the target object. * @type {object} */ private _object = null; private _pausedTime: number = 0; /** * Start values container. * @type {object} */ private _valuesStart = {}; /** * End values container. * @type {object} */ private _valuesEnd = {}; /** * How long this tween will perform. * @type {number} */ private _duration: number = 1000; private _delayTime: number = 0; private _startTime: number = null; // Temp vars to avoid gc spikes private _tempElapsed: number; private _tempValue; /** * Will this tween automatically restart when it completes? * @type {bool} */ private _loop: bool = false; /** * A yoyo tween is one that plays once fully, then reverses back to the original tween values before completing. * @type {bool} */ private _yoyo: bool = false; private _yoyoCount: number = 0; /** * Easing function which actually updating this tween. * @type {function} */ private _easingFunction; private _interpolationFunction; /** * Contains chained tweens. * @type {Tweens[]} */ private _chainedTweens = []; /** * Signal to be dispatched when this tween start. * @type {Phaser.Signal} */ public onStart: Phaser.Signal; /** * Signal to be dispatched when this tween updating. * @type {Phaser.Signal} */ public onUpdate: Phaser.Signal; /** * Signal to be dispatched when this tween completed. * @type {Phaser.Signal} */ public onComplete: Phaser.Signal; /** * Configure the Tween * @param properties {object} Propertis you want to tween. * @param [duration] {number} duration of this tween. * @param [ease] {any} Easing function. * @param [autoStart] {bool} Whether this tween will start automatically or not. * @param [delay] {number} delay before this tween will start, defaults to 0 (no delay) * @param [loop] {bool} Should the tween automatically restart once complete? (ignores any chained tweens) * @return {Tween} Itself. */ public to(properties, duration: number = 1000, ease: any = null, autoStart: bool = false, delay: number = 0, loop: bool = false, yoyo: bool = false): Phaser.Tween { this._duration = duration; // If properties isn't an object this will fail, sanity check it here somehow? this._valuesEnd = properties; if (ease !== null) { this._easingFunction = ease; } if (delay > 0) { this._delayTime = delay; } this._loop = loop; this._yoyo = yoyo; this._yoyoCount = 0; if (autoStart === true) { return this.start(); } else { return this; } } public loop(value: bool): Phaser.Tween { this._loop = value; return this; } public yoyo(value: bool): Phaser.Tween { this._yoyo = value; this._yoyoCount = 0; return this; } public isRunning: bool = false; /** * Start to tween. */ public start(looped: bool = false): Phaser.Tween { if (this.game === null || this._object === null) { return; } if (looped == false) { this._manager.add(this); this.onStart.dispatch(this._object); } this._startTime = this.game.time.now + this._delayTime; this.isRunning = true; for (var property in this._valuesEnd) { // This prevents the interpolation of null values or of non-existing properties if (this._object[property] === null || !(property in this._object)) { throw Error('Phaser.Tween interpolation of null value of non-existing property'); continue; } // check if an Array was provided as property value if (this._valuesEnd[property] instanceof Array) { if (this._valuesEnd[property].length === 0) { continue; } // create a local copy of the Array with the start value at the front this._valuesEnd[property] = [this._object[property]].concat(this._valuesEnd[property]); } if (looped == false) { this._valuesStart[property] = this._object[property]; } } return this; } public reverse() { var tempObj = {}; for (var property in this._valuesStart) { tempObj[property] = this._valuesStart[property]; this._valuesStart[property] = this._valuesEnd[property]; this._valuesEnd[property] = tempObj[property]; } this._yoyoCount++; return this.start(true); } public reset(): Phaser.Tween { // Reset the properties back to what they were before for (var property in this._valuesStart) { this._object[property] = this._valuesStart[property]; } return this.start(true); } public clear(): Phaser.Tween { this._chainedTweens = []; this.onStart.removeAll(); this.onUpdate.removeAll(); this.onComplete.removeAll(); return this; } /** * Stop tweening. */ public stop(): Phaser.Tween { if (this._manager !== null) { this._manager.remove(this); } this.isRunning = false; this.onComplete.dispose(); return this; } public set parent(value: Phaser.Game) { this.game = value; this._manager = this.game.tweens; } public set delay(amount: number) { this._delayTime = amount; } public get delay(): number { return this._delayTime; } public set easing(easing) { this._easingFunction = easing; } public get easing() { return this._easingFunction; } public set interpolation(interpolation) { this._interpolationFunction = interpolation; } public get interpolation() { return this._interpolationFunction; } /** * Add another chained tween, which will start automatically when the one before it completes. * @param tween {Phaser.Tween} Tween object you want to chain with this. * @return {Phaser.Tween} Itselfe. */ public chain(tween: Phaser.Tween): Phaser.Tween { this._chainedTweens.push(tween); return this; } public pause() { this._paused = true; } public resume() { this._paused = false; this._startTime += this.game.time.pauseDuration; } private _paused: bool; /** * Update tweening. * @param time {number} Current time from game clock. * @return {bool} Return false if this completed and no need to update, otherwise return true. */ public update(time: number) { if (this._paused || time < this._startTime) { return true; } this._tempElapsed = (time - this._startTime) / this._duration; this._tempElapsed = this._tempElapsed > 1 ? 1 : this._tempElapsed; this._tempValue = this._easingFunction(this._tempElapsed); for (var property in this._valuesStart) { // Add checks for object, array, numeric up front if (this._valuesEnd[property] instanceof Array) { this._object[property] = this._interpolationFunction(this._valuesEnd[property], this._tempValue); } else { this._object[property] = this._valuesStart[property] + (this._valuesEnd[property] - this._valuesStart[property]) * this._tempValue; } } this.onUpdate.dispatch(this._object, this._tempValue); if (this._tempElapsed == 1) { // Yoyo? if (this._yoyo) { if (this._yoyoCount == 0) { // Reverse the tween this.reverse(); return true; } else { // We've yoyo'd once already, quit? if (this._loop == false) { this.onComplete.dispatch(this._object); for (var i = 0; i < this._chainedTweens.length; i++) { this._chainedTweens[i].start(); } return false; } else { // YoYo and Loop are both on this._yoyoCount = 0; this.reverse(); return true; } } } // Loop? if (this._loop) { this._yoyoCount = 0; this.reset(); return true; } else { this.onComplete.dispatch(this._object); for (var i = 0; i < this._chainedTweens.length; i++) { this._chainedTweens[i].start(); } if (this._chainedTweens.length == 0) { this.isRunning = false; } return false; } } return true; } } }