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.

Author: photonstorm

Gruntfile.js

@@ -99,6 +99,7 @@ module.exports = function (grunt) {
         'src/tween/Easing.js',
         'src/time/Time.js',
         'src/time/Timer.js',
+        'src/time/TimerEvent.js',
         'src/animation/AnimationManager.js',
         'src/animation/Animation.js',
         'src/animation/Frame.js',

README.md

@@ -59,6 +59,7 @@ Significant API changes:
 
 New features:
 
+* 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.
 * Gamepad API support has been added with lots of new examples (thanks Karl Macklin)
 * Phaser.Game constructor can now be passed a single object containing all of your game settings + Stage settings. Useful for advanced configurations.
 * The width/height given to Phaser.Game can now be percentages, i.e. "100%" will set the width to the maximum window innerWidth.
@@ -102,6 +103,7 @@ New Examples:
 * Particles - Rain by Jens Anders Bakke.
 * Particles - Snow by Jens Anders Bakke.
 * Groups - Nested Groups - showing how to embed one Group into another Group.
+* Time - Lots of new examples showing how to use the Phaser.Timer class.
 
 
 Updates:
@@ -132,7 +134,7 @@ Updates:
 * Button.clearFrames method has been added.
 * Device.quirksMode is a boolean that informs you if the page is in strict (false) or quirks (true) mode.
 * Canvas.getOffset now runs a strict/quirks check and uses document.documentElement when calculating scrollTop and scrollLeft to avoid Chrome console warnings.
-* The Time class now has three new methods: addEvent, repeatEvent and loopEvent. See the new Timer examples to show how to use them.
+* The Time class now has its own Phaser.Timer which you can access through game.time.events. See the new Timer examples to show how to use them.
 
 
 Bug Fixes:

build/config.php

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

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);
+
+}