Tweens have a new event: onLoop.

Tweens - Example showing how to use the tween events, onStart, onLoop and onComplete.
Lots of documentation fixes in the Tween class.
Tweens fire an onLoop event if they are set to repeat. onComplete is now only fired for the final repeat (or never if the repeat is infinite)
Tween.onStart is now called when the tween starts AFTER the delay value, if given (thanks stevenbouma)
This commit is contained in:
photonstorm 2013-12-18 13:01:45 +00:00
parent b2c680811b
commit f991f9cee8
6 changed files with 159 additions and 51 deletions

View file

@ -58,6 +58,7 @@ New features:
* Added Device.trident and Device.tridentVersion for testing IE11. * Added Device.trident and Device.tridentVersion for testing IE11.
* Added Device.silk for detecting a Kindle Fire and updated desktop OS check to exclude Kindles (thanks LuckieLordie) * Added Device.silk for detecting a Kindle Fire and updated desktop OS check to exclude Kindles (thanks LuckieLordie)
* TilemapLayers now have debug and debugAlpha values, this turns on the drawing of the collision edges (very handy for debugging, as the name implies!) * TilemapLayers now have debug and debugAlpha values, this turns on the drawing of the collision edges (very handy for debugging, as the name implies!)
* Tweens have a new event: onLoop.
New Examples: New Examples:
@ -69,6 +70,8 @@ New Examples:
* Physics - Snake (use the keyboard to control the snake like creature) by Patrick OReilly and Richard Davey. * Physics - Snake (use the keyboard to control the snake like creature) by Patrick OReilly and Richard Davey.
* Added touch joystick example showing how to use the clay.io virtual game controller (thanks gabehollombe) * Added touch joystick example showing how to use the clay.io virtual game controller (thanks gabehollombe)
* Games - Matching Pairs by Patrick OReilly. * Games - Matching Pairs by Patrick OReilly.
* Tweens - Example showing how to use the tween events, onStart, onLoop and onComplete.
Updates: Updates:
@ -86,6 +89,8 @@ Updates:
* Group.countLiving and countDead used to return -1 if the Group was empty, but now return 0. * Group.countLiving and countDead used to return -1 if the Group was empty, but now return 0.
* Text can now be fixedToCamera, updated world/fixed to camera example to show this. * Text can now be fixedToCamera, updated world/fixed to camera example to show this.
* ArcadePhysics.overlap and collide now recognise TileSprites in the collision checks. * ArcadePhysics.overlap and collide now recognise TileSprites in the collision checks.
* Lots of documentation fixes in the Tween class.
* Tweens fire an onLoop event if they are set to repeat. onComplete is now only fired for the final repeat (or never if the repeat is infinite)
Bug Fixes: Bug Fixes:
@ -98,6 +103,7 @@ Bug Fixes:
* Switch Camera.setBoundsToWorld to match world.bounds instead of world (thanks cocoademon) * Switch Camera.setBoundsToWorld to match world.bounds instead of world (thanks cocoademon)
* Fixed an issue where passing null as the Group parent wouldn't set it to game.world as it should have (thanks tito100) * Fixed an issue where passing null as the Group parent wouldn't set it to game.world as it should have (thanks tito100)
* Fixed Pixi bug (#425) incorrect width property for multi-line BitmapText (thanks jcd-as) * Fixed Pixi bug (#425) incorrect width property for multi-line BitmapText (thanks jcd-as)
* Tween.onStart is now called when the tween starts AFTER the delay value, if given (thanks stevenbouma)
You can view the Change Log for all previous versions at https://github.com/photonstorm/phaser/changelog.md You can view the Change Log for all previous versions at https://github.com/photonstorm/phaser/changelog.md

View file

@ -740,6 +740,10 @@
"file": "pause+tween.js", "file": "pause+tween.js",
"title": "pause tween" "title": "pause tween"
}, },
{
"file": "tween+loop+event.js",
"title": "tween loop event"
},
{ {
"file": "tween+several+properties.js", "file": "tween+several+properties.js",
"title": "tween several properties" "title": "tween several properties"

View file

@ -0,0 +1,63 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render });
function preload() {
game.load.spritesheet('balls', 'assets/sprites/balls.png', 17, 17);
}
var ball;
var tween;
var bounces = 10;
function create() {
ball = game.add.sprite(400, 0, 'balls', 0);
tween = game.add.tween(ball).to( { y: game.world.height - ball.height }, 1500, Phaser.Easing.Bounce.Out, true, 2500, 10);
// There is a 2.5 second delay at the start, then it calls this function
tween.onStart.add(onStart, this);
// This tween will loop 10 times, calling this function every time it loops
tween.onLoop.add(onLoop, this);
// When it completes it will call this function
tween.onComplete.add(onComplete, this);
}
function onStart() {
// Turn off the delay, so it loops seamlessly from here on
tween.delay(0);
}
function onLoop() {
bounces--;
if (ball.frame === 5)
{
ball.frame = 0;
}
else
{
ball.frame++;
}
}
function onComplete() {
tween = game.add.tween(ball).to( { x: 800 - ball.width }, 2000, Phaser.Easing.Exponential.Out, true);
}
function render() {
game.debug.renderText('Bounces: ' + bounces, 32, 32);
}

View file

@ -942,7 +942,6 @@ Phaser.Loader.prototype = {
return; return;
} }
var file = this._fileList[index]; var file = this._fileList[index];
file.loaded = true; file.loaded = true;

View file

@ -89,8 +89,42 @@ Phaser.Tilemap.prototype = {
addTilesets: function (tilesets) { addTilesets: function (tilesets) {
// { "TiledKey": "TilesetKey" }
// parse the tilesets array and set-up gid mappings // parse the tilesets array and set-up gid mappings
// "tilesets":[
// {
// "firstgid":1,
// "image":"SuperMarioBros-World1-1_bank.png",
// "imageheight":64,
// "imagewidth":176,
// "margin":0,
// "name":"SuperMarioBros-World1-1_bank.png",
// "properties":
// {
// },
// "spacing":0,
// "tileheight":16,
// "tilewidth":16
// }],
//this.layers = this.game.cache.getTilemapData(key).layers;
var mapTilesets = this.game.cache.getTilemapData(this.key).tilesets;
for (var tileset in tilesets)
{
for (var i = 0; i < mapTilesets.length; i++)
{
if (mapTilesets[i].name === tilesets[tileset])
{
}
}
}
}, },

View file

@ -28,119 +28,119 @@ Phaser.Tween = function (object, game) {
this.game = game; this.game = game;
/** /**
* @property {object} _manager - Description. * @property {Phaser.TweenManager} _manager - Reference to the TweenManager.
* @private * @private
*/ */
this._manager = this.game.tweens; this._manager = this.game.tweens;
/** /**
* @property {object} _valuesStart - Description. * @property {object} _valuesStart - Private value object.
* @private * @private
*/ */
this._valuesStart = {}; this._valuesStart = {};
/** /**
* @property {object} _valuesEnd - Description. * @property {object} _valuesEnd - Private value object.
* @private * @private
*/ */
this._valuesEnd = {}; this._valuesEnd = {};
/** /**
* @property {object} _valuesStartRepeat - Description. * @property {object} _valuesStartRepeat - Private value object.
* @private * @private
*/ */
this._valuesStartRepeat = {}; this._valuesStartRepeat = {};
/** /**
* @property {number} _duration - Description. * @property {number} _duration - Private duration counter.
* @private * @private
* @default * @default
*/ */
this._duration = 1000; this._duration = 1000;
/** /**
* @property {number} _repeat - Description. * @property {number} _repeat - Private repeat counter.
* @private * @private
* @default * @default
*/ */
this._repeat = 0; this._repeat = 0;
/** /**
* @property {boolean} _yoyo - Description. * @property {boolean} _yoyo - Private yoyo flag.
* @private * @private
* @default * @default
*/ */
this._yoyo = false; this._yoyo = false;
/** /**
* @property {boolean} _reversed - Description. * @property {boolean} _reversed - Private reversed flag.
* @private * @private
* @default * @default
*/ */
this._reversed = false; this._reversed = false;
/** /**
* @property {number} _delayTime - Description. * @property {number} _delayTime - Private delay counter.
* @private * @private
* @default * @default
*/ */
this._delayTime = 0; this._delayTime = 0;
/** /**
* @property {Description} _startTime - Description. * @property {number} _startTime - Private start time counter.
* @private * @private
* @default null * @default null
*/ */
this._startTime = null; this._startTime = null;
/** /**
* @property {Description} _easingFunction - Description. * @property {function} _easingFunction - The easing function used for the tween.
* @private * @private
*/ */
this._easingFunction = Phaser.Easing.Linear.None; this._easingFunction = Phaser.Easing.Linear.None;
/** /**
* @property {Description} _interpolationFunction - Description. * @property {function} _interpolationFunction - The interpolation function used for the tween.
* @private * @private
*/ */
this._interpolationFunction = Phaser.Math.linearInterpolation; this._interpolationFunction = Phaser.Math.linearInterpolation;
/** /**
* @property {Description} _chainedTweens - Description. * @property {array} _chainedTweens - A private array of chained tweens.
* @private * @private
*/ */
this._chainedTweens = []; this._chainedTweens = [];
/** /**
* @property {Description} _onStartCallback - Description. * @property {function} _onStartCallback - An onStart callback.
* @private * @private
* @default * @default
*/ */
this._onStartCallback = null; this._onStartCallback = null;
/** /**
* @property {boolean} _onStartCallbackFired - Description. * @property {boolean} _onStartCallbackFired - Private onStart flag.
* @private * @private
* @default * @default
*/ */
this._onStartCallbackFired = false; this._onStartCallbackFired = false;
/** /**
* @property {Description} _onUpdateCallback - Description. * @property {function} _onUpdateCallback - An onUpdate callback.
* @private * @private
* @default null * @default null
*/ */
this._onUpdateCallback = null; this._onUpdateCallback = null;
/** /**
* @property {Description} _onCompleteCallback - Description. * @property {function} _onCompleteCallback - An onComplete callback.
* @private * @private
* @default null * @default null
*/ */
this._onCompleteCallback = null; this._onCompleteCallback = null;
/** /**
* @property {number} _pausedTime - Description. * @property {number} _pausedTime - Private pause timer.
* @private * @private
* @default * @default
*/ */
@ -153,22 +153,28 @@ Phaser.Tween = function (object, game) {
this.pendingDelete = false; this.pendingDelete = false;
// Set all starting values present on the target object // Set all starting values present on the target object
for ( var field in object ) { for (var field in object)
{
this._valuesStart[field] = parseFloat(object[field], 10); this._valuesStart[field] = parseFloat(object[field], 10);
} }
/** /**
* @property {Phaser.Signal} onStart - Description. * @property {Phaser.Signal} onStart - The onStart event is fired when the Tween begins.
*/ */
this.onStart = new Phaser.Signal(); this.onStart = new Phaser.Signal();
/** /**
* @property {Phaser.Signal} onComplete - Description. * @property {Phaser.Signal} onLoop - The onLoop event is fired if the Tween loops.
*/
this.onLoop = new Phaser.Signal();
/**
* @property {Phaser.Signal} onComplete - The onComplete event is fired when the Tween completes. Does not fire if the Tween is set to loop.
*/ */
this.onComplete = new Phaser.Signal(); this.onComplete = new Phaser.Signal();
/** /**
* @property {boolean} isRunning - Description. * @property {boolean} isRunning - If the tween is running this is set to true, otherwise false. Tweens that are in a delayed state, waiting to start, are considered as being running.
* @default * @default
*/ */
this.isRunning = false; this.isRunning = false;
@ -182,13 +188,13 @@ Phaser.Tween.prototype = {
* *
* @method Phaser.Tween#to * @method Phaser.Tween#to
* @param {object} properties - Properties you want to tween. * @param {object} properties - Properties you want to tween.
* @param {number} duration - Duration of this tween. * @param {number} [duration=1000] - Duration of this tween in ms.
* @param {function} ease - Easing function. * @param {function} [ease=null] - Easing function. If not set it will default to Phaser.Easing.Linear.None.
* @param {boolean} autoStart - Whether this tween will start automatically or not. * @param {boolean} [autoStart=false] - Whether this tween will start automatically or not.
* @param {number} delay - Delay before this tween will start, defaults to 0 (no delay). * @param {number} [delay=0] - Delay before this tween will start, defaults to 0 (no delay). Value given is in ms.
* @param {boolean} repeat - Should the tween automatically restart once complete? (ignores any chained tweens). * @param {boolean} [repeat=0] - Should the tween automatically restart once complete? (ignores any chained tweens).
* @param {Phaser.Tween} yoyo - Description. * @param {boolean} [yoyo=false] - A tween that yoyos will reverse itself when it completes.
* @return {Phaser.Tween} Itself. * @return {Phaser.Tween} This Tween object.
*/ */
to: function ( properties, duration, ease, autoStart, delay, repeat, yoyo ) { to: function ( properties, duration, ease, autoStart, delay, repeat, yoyo ) {
@ -200,6 +206,7 @@ Phaser.Tween.prototype = {
yoyo = yoyo || false; yoyo = yoyo || false;
var self; var self;
if (this._parent) if (this._parent)
{ {
self = this._manager.create(this._object); self = this._manager.create(this._object);
@ -251,8 +258,6 @@ Phaser.Tween.prototype = {
this._manager.add(this); this._manager.add(this);
this.onStart.dispatch(this._object);
this.isRunning = true; this.isRunning = true;
this._onStartCallbackFired = false; this._onStartCallbackFired = false;
@ -485,30 +490,28 @@ Phaser.Tween.prototype = {
return false; return false;
} }
if (this._paused || time < this._startTime) { if (this._paused || time < this._startTime)
{
return true; return true;
} }
var property; var property;
if ( time < this._startTime ) { if (time < this._startTime)
{
return true; return true;
} }
if ( this._onStartCallbackFired === false ) { if (this._onStartCallbackFired === false)
{
if ( this._onStartCallback !== null ) { this.onStart.dispatch(this._object);
if (this._onStartCallback !== null )
{
this._onStartCallback.call( this._object ); this._onStartCallback.call( this._object );
} }
this._onStartCallbackFired = true; this._onStartCallbackFired = true;
} }
var elapsed = ( time - this._startTime ) / this._duration; var elapsed = ( time - this._startTime ) / this._duration;
@ -558,27 +561,26 @@ Phaser.Tween.prototype = {
// reassign starting values, restart by making startTime = now // reassign starting values, restart by making startTime = now
for ( property in this._valuesStartRepeat ) { for ( property in this._valuesStartRepeat ) {
if ( typeof( this._valuesEnd[ property ] ) === "string" ) { if ( typeof( this._valuesEnd[ property ] ) === "string" )
{
this._valuesStartRepeat[ property ] = this._valuesStartRepeat[ property ] + parseFloat(this._valuesEnd[ property ], 10); this._valuesStartRepeat[ property ] = this._valuesStartRepeat[ property ] + parseFloat(this._valuesEnd[ property ], 10);
} }
if (this._yoyo) { if (this._yoyo)
{
var tmp = this._valuesStartRepeat[ property ]; var tmp = this._valuesStartRepeat[ property ];
this._valuesStartRepeat[ property ] = this._valuesEnd[ property ]; this._valuesStartRepeat[ property ] = this._valuesEnd[ property ];
this._valuesEnd[ property ] = tmp; this._valuesEnd[ property ] = tmp;
this._reversed = !this._reversed; this._reversed = !this._reversed;
} }
this._valuesStart[ property ] = this._valuesStartRepeat[ property ]; this._valuesStart[ property ] = this._valuesStartRepeat[ property ];
} }
this._startTime = time + this._delayTime; this._startTime = time + this._delayTime;
this.onComplete.dispatch(this._object); this.onLoop.dispatch(this._object);
if ( this._onCompleteCallback !== null ) {
this._onCompleteCallback.call( this._object );
}
return true; return true;