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:02:01 +00:00
parent b2c680811b
commit f991f9cee8
6 changed files with 159 additions and 51 deletions
+4
View File
@@ -740,6 +740,10 @@
"file": "pause+tween.js",
"title": "pause tween"
},
{
"file": "tween+loop+event.js",
"title": "tween loop event"
},
{
"file": "tween+several+properties.js",
"title": "tween several properties"
+63
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);
}