Phaser.Timer is now feature complete and fully documented. You can create Phaser.TimerEvents on a Timer and lots of new examples have been provided.

examples/_site/examples.json

@@ -350,6 +350,10 @@
       "file": "group+transform.js",
       "title": "group transform"
     },
+    {
+      "file": "nested+groups.js",
+      "title": "nested groups"
+    },
     {
       "file": "recyling.js",
       "title": "recyling"
@@ -797,6 +801,28 @@
       "title": "swap tiles"
     }
   ],
+  "time": [
+    {
+      "file": "basic+looped+event.js",
+      "title": "basic looped event"
+    },
+    {
+      "file": "basic+repeat+event.js",
+      "title": "basic repeat event"
+    },
+    {
+      "file": "basic+timed+event.js",
+      "title": "basic timed event"
+    },
+    {
+      "file": "remove+event.js",
+      "title": "remove event"
+    },
+    {
+      "file": "timed+slideshow.js",
+      "title": "timed slideshow"
+    }
+  ],
   "tweens": [
     {
       "file": "bounce.js",

examples/_site/view_full.html

@@ -118,6 +118,7 @@
 
         <script src="../src/time/Time.js"></script>
         <script src="../src/time/Timer.js"></script>
+        <script src="../src/time/TimerEvent.js"></script>
 
         <script src="../src/animation/AnimationManager.js"></script>
         <script src="../src/animation/Animation.js"></script>

examples/_site/view_lite.html

@@ -118,6 +118,7 @@
 
         <script src="../src/time/Time.js"></script>
         <script src="../src/time/Timer.js"></script>
+        <script src="../src/time/TimerEvent.js"></script>
 
         <script src="../src/animation/AnimationManager.js"></script>
         <script src="../src/animation/Animation.js"></script>

examples/time/basic looped event.js

@@ -0,0 +1,43 @@
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render });
+
+function preload() {
+
+    game.load.image('ball', 'assets/sprites/pangball.png');
+
+}
+
+var counter = 0;
+var text = 0;
+
+function create() {
+
+    game.stage.backgroundColor = '#6688ee';
+
+    text = game.add.text(game.world.centerX, game.world.centerY, 'Counter: 0', { font: "64px Arial", fill: "#ffffff", align: "center" });
+    text.anchor.setTo(0.5, 0.5);
+
+    //  Here we'll create a basic looped event.
+    //  A looped event is like a repeat event but with no limit, it will literally repeat itself forever, or until
+
+    //  The first parameter is how long to wait before the event fires. In this case 1 second (you could pass in 1000 as the value as well.)
+    //  The next two parameters are the function to call ('updateCounter') and the context under which that will happen.
+
+    game.time.events.loop(Phaser.Timer.SECOND, updateCounter, this);
+
+}
+
+function updateCounter() {
+
+    counter++;
+
+    text.content = 'Counter: ' + counter;
+
+}
+
+function render() {
+
+    game.debug.renderText("Time until event: " + game.time.events.duration.toFixed(0), 32, 32);
+    game.debug.renderText("Next tick: " + game.time.events.next.toFixed(0), 32, 64);
+
+}

examples/time/basic repeat event.js

@@ -0,0 +1,47 @@
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render });
+
+function preload() {
+
+    game.load.image('ball', 'assets/sprites/pangball.png');
+
+}
+
+function create() {
+
+    game.stage.backgroundColor = '#6688ee';
+
+    //  Here we'll create a basic repeating event.
+
+    //  The way a repeating event works is that it is placed into the queue once, 
+    //  and when it runs its 'repeatCounter' is reduced by 1 and it's moved back into the queue again.
+    //  To this end the queue will only ever have 1 event actually in it.
+
+    //  The first parameter is how long to wait before the event fires. In this case 2 seconds (you could pass in 2000 as the value as well.)
+    //  The second parameter is how many times the event will run in total. Here we'll run it 10 times.
+    //  The next two parameters are the function to call ('createBall') and the context under which that will happen.
+
+    //  Once the event has been called 10 times it will never be called again.
+
+    game.time.events.repeat(Phaser.Timer.SECOND * 2, 10, createBall, this);
+
+}
+
+function createBall() {
+
+    //  A bouncey ball sprite just to visually see what's going on.
+
+    var ball = game.add.sprite(game.world.randomX, 0, 'ball');
+
+    ball.body.gravity.y = 200;
+    ball.body.bounce.y = 0.5;
+    ball.body.collideWorldBounds = true;
+
+}
+
+function render() {
+
+    game.debug.renderText("Time until event: " + game.time.events.duration.toFixed(0), 32, 32);
+    game.debug.renderText("Next tick: " + game.time.events.next.toFixed(0), 32, 64);
+
+}

examples/time/basic timed event.js

@@ -0,0 +1,37 @@
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render });
+
+function preload() {
+
+    game.load.image('bisley', 'assets/pics/alex-bisleys_horsy_5.png');
+
+}
+
+var picture;
+
+function create() {
+
+    game.stage.backgroundColor = '#6688ee';
+
+    picture = game.add.sprite(game.world.centerX, game.world.centerY, 'bisley');
+    picture.anchor.setTo(0.5, 0.5);
+
+    //  Here we'll create a basic timed event. This is a one-off event, it won't repeat or loop:
+    //  The first parameter is how long to wait before the event fires. In this case 4 seconds (you could pass in 4000 as the value as well.)
+    //  The next parameter is the function to call ('fadePicture') and finally the context under which that will happen.
+
+    game.time.events.add(Phaser.Timer.SECOND * 4, fadePicture, this);
+
+}
+
+function fadePicture() {
+
+    game.add.tween(picture).to( { alpha: 0 }, 2000, Phaser.Easing.Linear.None, true);
+
+}
+
+function render() {
+
+    game.debug.renderText("Time until event: " + game.time.events.duration, 32, 32);
+
+}

examples/time/remove event.js

@@ -0,0 +1,55 @@
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { create: create, render: render });
+
+var counters = [];
+var text = [];
+var timerEvents = [];
+var i = 9;
+
+function create() {
+
+    game.stage.backgroundColor = '#6688ee';
+
+    for (var i = 0; i < 10; i++)
+    {
+        counters[i] = 0;
+        text[i] = game.add.text(game.world.centerX, 80 + (40 * i), 'Counter ' + i + ' = 0', { font: "32px Arial", fill: "#ffffff", align: "center" });
+        text[i].anchor.setTo(0.5, 0);
+
+        //  Here we create our timer events. They will be set to loop at a random value between 250ms and 1000ms
+        timerEvents[i] = game.time.events.loop(game.rnd.integerInRange(250, 1000), updateCounter, this, i);
+    }
+
+    //  Click to remove
+    game.input.onDown.add(removeCounter, this);
+
+}
+
+function updateCounter(idx) {
+
+    counters[idx]++;
+
+    text[idx].content = 'Counter ' + idx + ' = ' + counters[idx];
+
+}
+
+function removeCounter() {
+
+    if (i >= 0)
+    {
+        //  Removes the timer, starting with the top one and working down
+        game.time.events.remove(timerEvents[i]);
+
+        //  Just updates the text
+        text[i].style.fill = '#3344aa';
+        text[i].content = 'Counter ' + i + ' removed';
+        i--;
+    }
+
+}
+
+function render() {
+
+    game.debug.renderText("Queued events: " + game.time.events.length + ' - click to remove', 32, 32);
+
+}

examples/time/timed slideshow.js

@@ -0,0 +1,94 @@
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render });
+
+function preload() {
+
+    game.load.image('picture1', 'assets/pics/cougar_sanity_train.png');
+    game.load.image('picture2', 'assets/pics/cougar-face_of_nature.png');
+    game.load.image('picture3', 'assets/pics/destop-rewarding.png');
+    game.load.image('picture4', 'assets/pics/destop-unknown.png');
+    game.load.image('picture5', 'assets/pics/questar.png');
+    game.load.image('picture6', 'assets/pics/seven_seas_andromeda_fairfax.png');
+    game.load.image('picture7', 'assets/pics/slayer-sorry_im_the_beast.png');
+
+}
+
+var pictureA;
+var pictureB;
+var timer;
+var current = 3;
+
+function create() {
+
+    game.stage.backgroundColor = '#000';
+
+    pictureA = game.add.sprite(game.world.centerX, game.world.centerY, 'picture1');
+    pictureA.anchor.setTo(0.5, 0.5);
+    pictureA.scale.setTo(2, 2);
+
+    pictureB = game.add.sprite(game.world.centerX, game.world.centerY, 'picture2');
+    pictureB.anchor.setTo(0.5, 0.5);
+    pictureB.scale.setTo(2, 2);
+    pictureB.alpha = 0;
+
+    //  Create our Timer
+    timer = game.time.create(false);
+
+    //  Set a TimerEvent to occur after 3 seconds
+    timer.add(3000, fadePictures, this);
+
+    //  Start the timer running - this is important!
+    //  It won't start automatically, allowing you to hook it to button events and the like.
+    timer.start();
+
+}
+
+function fadePictures() {
+
+    //  Cross-fade the two pictures
+    var tween;
+
+    if (pictureA.alpha === 1)
+    {
+        tween = game.add.tween(pictureA).to( { alpha: 0 }, 2000, Phaser.Easing.Linear.None, true);
+        game.add.tween(pictureB).to( { alpha: 1 }, 2000, Phaser.Easing.Linear.None, true);
+    }
+    else
+    {
+        game.add.tween(pictureA).to( { alpha: 1 }, 2000, Phaser.Easing.Linear.None, true);
+        tween = game.add.tween(pictureB).to( { alpha: 0 }, 2000, Phaser.Easing.Linear.None, true);
+    }
+
+    //  When the cross-fade is complete we swap the image being shown by the now hidden picture
+    tween.onComplete.add(changePicture, this);
+
+}
+
+function changePicture() {
+
+    if (pictureA.alpha === 0)
+    {
+        pictureA.loadTexture('picture' + current);
+    }
+    else
+    {
+        pictureB.loadTexture('picture' + current);
+    }
+
+    current++;
+
+    if (current > 7)
+    {
+        current = 1;
+    }
+
+    //  And set a new TimerEvent to occur after 3 seconds
+    timer.add(3000, fadePictures, this);
+
+}
+
+function render() {
+
+    game.debug.renderText("Time until event: " + timer.duration.toFixed(0), 10, 20);
+
+}

examples/wip/timer simple.js

@@ -14,6 +14,8 @@ function create() {
 
     game.stage.backgroundColor = '#007236';
 
+
+
     //  Every second we will call the addSprite function. This will happen 10 times and then stop.
     //  The final parameter is the one that will be sent to the addSprite function and in this case is the sprite key.
     game.time.repeatEvent(Phaser.Timer.SECOND, 10, addSprite, this, 'mushroom');