Tween.generateData(frameRate) allows you to generate tween data into an array, which can then be used however you wish (see new examples)

Added new Retro Font examples.

README.md

@@ -139,6 +139,8 @@ New features:
 * You can now create blank Tilemaps and then populate them with data later.
 * A single Animation object now has 3 new events: onStart, onLoop and onComplete.
 * Animation.loopCount holds the number of times the animation has looped since it last started.
+* Tween.generateData(frameRate) allows you to generate tween data into an array, which can then be used however you wish (see new examples)
+
 
 Updates:
 

examples/text/littera.js

@@ -0,0 +1,14 @@
+
+var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });
+
+function preload() {
+
+    game.load.bitmapFont('shortStack', 'assets/fonts/bitmapFonts/shortStack.png', 'assets/fonts/bitmapFonts/shortStack.fnt');
+
+}
+
+function create() {
+
+    game.add.bitmapText(32, 32, 'shortStack', 'This font was generated using the\nfree Littera web site\n\nhttp://kvazars.com/littera/', 32);
+
+}

examples/text/retro font 1.js

@@ -0,0 +1,30 @@
+
+var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
+
+function preload() {
+
+    game.load.image('knightHawks', 'assets/fonts/retroFonts/KNIGHT3.png');
+
+}
+
+var font;
+
+function create() {
+
+    font = game.add.retroFont('knightHawks', 31, 25, Phaser.RetroFont.TEXT_SET6, 10, 1, 1);
+    font.text = 'phaser was here';
+
+    for (var c = 0; c < 19; c++)
+    {
+        var i = game.add.image(game.world.centerX, c * 32, font);
+        i.tint = Math.random() * 0xFFFFFF;
+        i.anchor.set(0.5, 1);
+    }
+
+}
+
+function update() {
+
+	font.text = "phaser x: " + game.input.x + " y: " + game.input.y;
+
+}

examples/text/retro font 2.js

@@ -0,0 +1,47 @@
+
+var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
+
+function preload() {
+
+    game.load.image('goldFont', 'assets/fonts/retroFonts/gold_font.png');
+    game.load.image('bluePink', 'assets/fonts/retroFonts/bluepink_font.png');
+    game.load.image('forgotten', 'assets/pics/forgotten_worlds.png');
+
+}
+
+var font1;
+var font2;
+var image1;
+var image2;
+
+function create() {
+
+    font1 = game.add.retroFont('goldFont', 16, 16, "!     :() ,?." + Phaser.RetroFont.TEXT_SET10, 20, 0, 0);
+    font1.text = "phaser brings you retro style bitmap fonts";
+
+    image1 = game.add.image(game.world.centerX, 48, font1);
+    image1.anchor.set(0.5);
+
+    font2 = game.add.retroFont('bluePink', 32, 32, Phaser.RetroFont.TEXT_SET2, 10);
+    font2.setText("phaser 2\nin the house", true, 0, 8, Phaser.RetroFont.ALIGN_CENTER);
+
+    image2 = game.add.image(game.world.centerX, 220, font2);
+    image2.anchor.set(0.5);
+
+    game.add.image(0, game.height - 274, 'forgotten');
+
+    game.time.events.loop(Phaser.Timer.SECOND * 2, change, this);
+
+}
+
+function change() {
+
+    image2.tint = Math.random() * 0xFFFFFF;
+
+}
+
+function update() {
+
+	image2.rotation += (2 * game.time.physicsElapsed);
+
+}

examples/tweens/generate data.js

@@ -0,0 +1,88 @@
+
+var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
+
+function preload() {
+
+    game.load.image('wasp', 'assets/sprites/wasp.png');
+    game.load.image('sky', 'assets/skies/cavern1.png');
+
+}
+
+var bugs;
+var index = 0;
+var data;
+var pos = [];
+
+function create() {
+
+    game.add.image(0, 0, 'sky');
+
+    // image = game.add.image(0, 0, 'wasp');
+
+    //  We don't want it to actually run, so we use game.make.tween instead of game.add.tween
+
+    var tweenData = { x: 0, y: 0 };
+
+    //  Here we'll tween the values held in the tweenData object to x: 500, y: 300
+    tween = game.make.tween(tweenData).to( { x: 100, y: 400 }, 2000, Phaser.Easing.Sinusoidal.InOut);
+
+    //  Set the tween to yoyo so it loops smoothly
+    tween.yoyo(true);
+
+    //  We have 3 interpolation methods available: linearInterpolation (the default), bezierInterpolation and catmullRomInterpolation.
+
+    // tween.interpolation(game.math.bezierInterpolation);
+    tween.interpolation(game.math.catmullRomInterpolation);
+
+    //  Generates the tween data at a rate of 60 frames per second.
+    //  This is useful if you've got a lot of objects all using the same tween, just at different coordinates.
+    //  It saves having to calculate the same tween across the properties of all objects involved in the motion.
+    //  Instead you can pre-calculate it in advance and trade that in for a bit of memory to store it in an array.
+    data = tween.generateData(60);
+
+    //  Now create some sprites to shown the tween data in action
+    bugs = game.add.group();
+
+    pos.push(new Phaser.Point(32, 0));
+    pos.push(new Phaser.Point(300, 100));
+    pos.push(new Phaser.Point(600, 70));
+
+    bugs.create(pos[0].x, pos[0].y, 'wasp');
+    bugs.create(pos[1].x, pos[1].y, 'wasp');
+    bugs.create(pos[2].x, pos[2].y, 'wasp');
+
+}
+
+function update() {
+
+    //  A simple data playback.
+
+    //  Each element of the array contains an object that includes whatever properties were tweened
+    //  In this case the x and y properties
+
+    //  Because the tween data is pre-generated we can apply it however we want:
+    //  Directly, by adding to the coordinates
+    bugs.getAt(0).x = pos[0].x + data[index].x;
+    bugs.getAt(0).y = pos[0].y + data[index].y;
+
+    //  Half one of the values
+    bugs.getAt(1).x = pos[1].x + (data[index].x / 2);
+    bugs.getAt(1).y = pos[1].y + data[index].y;
+
+    //  Inverse one of the values
+    bugs.getAt(2).x = pos[2].x - data[index].x;
+    bugs.getAt(2).y = pos[2].y + data[index].y;
+
+    //  You can do all kinds of effects by modifying the tween data,
+    //  without having loads of active tweens running.
+
+    //  This just advances the tween data index
+    //  It's crude and doesn't take target device speed into account at all, but works as an example
+    index++;
+
+    if (index === data.length)
+    {
+        index = 0;
+    }
+
+}

examples/wip/bitmaptext littera.js

@@ -1,5 +1,5 @@
 
-var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
+var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });
 
 function preload() {
 
@@ -7,14 +7,8 @@ function preload() {
 
 }
 
-var text;
-
 function create() {
 
-    text = game.add.bitmapText(100, 100, 'shortStack', 'Bitmap Fonts\nfrom Littera', 64);
-
-}
-
-function update() {
+    game.add.bitmapText(32, 32, 'shortStack', 'This font was generated using the\nfree Littera web site\n\nhttp://kvazars.com/littera/', 32);
 
 }

examples/wip/bitmaptext1.js

@@ -3,8 +3,8 @@ var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: p
 
 function preload() {
 
-    game.load.bitmapFont('desyrel', 'assets/fonts/bitmapFonts/desyrel.png', 'assets/fonts/desyrel.xml', null, 0, -32);
-    game.load.bitmapFont('carrier', 'assets/fonts/bitmapFonts/carrier_command.png', 'assets/fonts/carrier_command.xml', null, 0, 24);
+    game.load.bitmapFont('desyrel', 'assets/fonts/bitmapFonts/desyrel.png', 'assets/fonts/bitmapFonts/desyrel.xml', null, 0, -32);
+    game.load.bitmapFont('carrier', 'assets/fonts/bitmapFonts/carrier_command.png', 'assets/fonts/bitmapFonts/carrier_command.xml', null, 0, 24);
 
 }
 

examples/wip/bitmaptext2.js

@@ -5,34 +5,43 @@ function preload() {
 
     game.load.image('goldFont', 'assets/fonts/retroFonts/gold_font.png');
     game.load.image('bluePink', 'assets/fonts/retroFonts/bluepink_font.png');
+    game.load.image('forgotten', 'assets/pics/forgotten_worlds.png');
 
 }
 
 var font1;
 var font2;
+var image1;
+var image2;
 
 function create() {
 
-    font1 = game.add.bitmapFont(game.world.centerX, 96, 'goldFont', 16, 16, "!     :() ,?." + Phaser.BitmapFont.TEXT_SET10, 20, 0, 0);
+    font1 = game.add.retroFont('goldFont', 16, 16, "!     :() ,?." + Phaser.RetroFont.TEXT_SET10, 20, 0, 0);
     font1.text = "phaser brings you retro style bitmap fonts";
-    font1.anchor.set(0.5);
 
-    font2 = game.add.bitmapFont(game.world.centerX, 300, 'bluePink', 32, 32, Phaser.BitmapFont.TEXT_SET2, 10);
-    font2.setText("phaser is\nrocking :)", true, 0, 8, Phaser.BitmapFont.ALIGN_CENTER);
-    font2.anchor.set(0.5);
+    image1 = game.add.image(game.world.centerX, 48, font1);
+    image1.anchor.set(0.5);
 
-    game.input.onDown.add(change, this);
+    font2 = game.add.retroFont('bluePink', 32, 32, Phaser.RetroFont.TEXT_SET2, 10);
+    font2.setText("phaser 2\nin the house", true, 0, 8, Phaser.RetroFont.ALIGN_CENTER);
+
+    image2 = game.add.image(game.world.centerX, 220, font2);
+    image2.anchor.set(0.5);
+
+    game.add.image(0, game.height - 274, 'forgotten');
+
+    game.time.events.loop(Phaser.Timer.SECOND * 2, change, this);
 
 }
 
 function change() {
 
-    font2.tint = Math.random() * 0xFFFFFF;
+    image2.tint = Math.random() * 0xFFFFFF;
 
 }
 
 function update() {
 
-	font2.rotation += 0.03;
+	image2.rotation += (2 * game.time.physicsElapsed);
 
 }

examples/wip/bitmaptext3.js

@@ -1,5 +1,4 @@
 
-// var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update });
 var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
 
 function preload() {
@@ -9,11 +8,10 @@ function preload() {
 }
 
 var font;
-var i;
 
 function create() {
 
-    font = game.add.bitmapFont('knightHawks', 31, 25, Phaser.BitmapFont.TEXT_SET6, 10, 1, 1);
+    font = game.add.retroFont('knightHawks', 31, 25, Phaser.RetroFont.TEXT_SET6, 10, 1, 1);
     font.text = 'phaser was here';
 
     for (var c = 0; c < 19; c++)

examples/wip/retro font effect.js

@@ -0,0 +1,47 @@
+
+var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
+
+function preload() {
+
+    game.load.image('knightHawks', 'assets/fonts/retroFonts/KNIGHT3.png');
+
+}
+
+var font;
+
+function create() {
+
+    font = game.add.retroFont('knightHawks', 31, 25, Phaser.RetroFont.TEXT_SET6, 10, 1, 1);
+    font.text = 'phaser v2';
+
+    var i;
+    var tween;
+
+    for (var c = 0; c < 20; c++)
+    {
+        // var i = game.add.image(game.world.centerX, c * 32, font);
+        var i = game.add.image(game.world.centerX + (c * 10), 32, font);
+        // i.tint = Math.random() * 0xFFFFFF;
+        i.anchor.set(0.5, 1);
+
+        game.world.sendToBack(i);
+
+        // tween = game.add.tween(i).to( { y: 500 }, 2000, Phaser.Easing.Quadratic.InOut, true, i * 100, 1000, true);
+
+            // to: function (properties, duration, ease, autoStart, delay, repeat, yoyo) {
+
+        tween = game.add.tween(i).to( { y: 500 }, 2000, Phaser.Easing.Sinusoidal.InOut);
+        tween.delay(c * 10);
+        tween.yoyo(true);
+        tween.repeat(Number.MAX_SAFE_INTEGER);
+        tween.interpolation(game.math.bezierInterpolation);
+        tween.start();
+    }
+
+}
+
+function update() {
+
+	// font.text = "phaser x: " + game.input.x + " y: " + game.input.y;
+
+}

examples/wip/tween generate 2.js

@@ -0,0 +1,88 @@
+
+var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
+
+function preload() {
+
+    game.load.image('wasp', 'assets/sprites/wasp.png');
+    game.load.image('sky', 'assets/skies/cavern1.png');
+
+}
+
+var bugs;
+var index = 0;
+var data;
+var pos = [];
+
+function create() {
+
+    game.add.image(0, 0, 'sky');
+
+    // image = game.add.image(0, 0, 'wasp');
+
+    //  We don't want it to actually run, so we use game.make.tween instead of game.add.tween
+
+    var tweenData = { x: 0, y: 0 };
+
+    //  Here we'll tween the values held in the tweenData object to x: 500, y: 300
+    tween = game.make.tween(tweenData).to( { x: 100, y: 400 }, 2000, Phaser.Easing.Sinusoidal.InOut);
+
+    //  Set the tween to yoyo so it loops smoothly
+    tween.yoyo(true);
+
+    //  We have 3 interpolation methods available: linearInterpolation (the default), bezierInterpolation and catmullRomInterpolation.
+
+    // tween.interpolation(game.math.bezierInterpolation);
+    tween.interpolation(game.math.catmullRomInterpolation);
+
+    //  Generates the tween data at a rate of 60 frames per second.
+    //  This is useful if you've got a lot of objects all using the same tween, just at different coordinates.
+    //  It saves having to calculate the same tween across the properties of all objects involved in the motion.
+    //  Instead you can pre-calculate it in advance and trade that in for a bit of memory to store it in an array.
+    data = tween.generateData(60);
+
+    //  Now create some sprites to shown the tween data in action
+    bugs = game.add.group();
+
+    pos.push(new Phaser.Point(32, 0));
+    pos.push(new Phaser.Point(300, 100));
+    pos.push(new Phaser.Point(600, 70));
+
+    bugs.create(pos[0].x, pos[0].y, 'wasp');
+    bugs.create(pos[1].x, pos[1].y, 'wasp');
+    bugs.create(pos[2].x, pos[2].y, 'wasp');
+
+}
+
+function update() {
+
+    //  A simple data playback.
+
+    //  Each element of the array contains an object that includes whatever properties were tweened
+    //  In this case the x and y properties
+
+    //  Because the tween data is pre-generated we can apply it however we want:
+    //  Directly, by adding to the coordinates
+    bugs.getAt(0).x = pos[0].x + data[index].x;
+    bugs.getAt(0).y = pos[0].y + data[index].y;
+
+    //  Half one of the values
+    bugs.getAt(1).x = pos[1].x + (data[index].x / 2);
+    bugs.getAt(1).y = pos[1].y + data[index].y;
+
+    //  Inverse one of the values
+    bugs.getAt(2).x = pos[2].x - data[index].x;
+    bugs.getAt(2).y = pos[2].y + data[index].y;
+
+    //  You can do all kinds of effects by modifying the tween data,
+    //  without having loads of active tweens running.
+
+    //  This just advances the tween data index
+    //  It's crude and doesn't take target device speed into account at all, but works as an example
+    index++;
+
+    if (index === data.length)
+    {
+        index = 0;
+    }
+
+}

examples/wip/tween generate.js

@@ -0,0 +1,77 @@
+
+var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
+
+function preload() {
+
+    game.load.image('wasp', 'assets/sprites/wasp.png');
+    game.load.image('sky', 'assets/skies/sky5.png');
+
+}
+
+var bugs;
+var index = 0;
+var data;
+
+function create() {
+
+    game.add.image(0, 0, 'sky');
+
+    // image = game.add.image(0, 0, 'wasp');
+
+    //  We don't want it to actually run, so we use game.make.tween instead of game.add.tween
+
+    var tweenData = { x: 0, y: 0 };
+
+    //  Here we'll tween the values held in the tweenData object to x: 500, y: 300
+    tween = game.make.tween(tweenData).to( { x: 100, y: 500 }, 2000, Phaser.Easing.Sinusoidal.InOut);
+
+    //  Set the tween to yoyo so it loops smoothly
+    tween.yoyo(true);
+
+    //  We have 3 interpolation methods available: linearInterpolation (the default), bezierInterpolation and catmullRomInterpolation.
+
+    // tween.interpolation(game.math.bezierInterpolation);
+    tween.interpolation(game.math.catmullRomInterpolation);
+
+    //  Generates the tween data at a rate of 60 frames per second.
+    //  This is useful if you've got a lot of objects all using the same tween, just at different coordinates.
+    //  It saves having to calculate the same tween across the properties of all objects involved in the motion.
+    //  Instead you can pre-calculate it in advance and trade that in for a bit of memory to store it in an array.
+    data = tween.generateData(60);
+
+    //  Now create some sprites to shown the tween data in action
+    bugs = game.add.group();
+
+    bugs.create(100, 0, 'wasp');
+    bugs.create(300, 100, 'wasp');
+    bugs.create(600, 30, 'wasp');
+
+}
+
+function update() {
+
+    //  A simple data playback.
+
+    //  Each element of the array contains an object that includes whatever properties were tweened
+    //  In this case the x and y properties
+
+    bugs.getAt(0).x = data[index].x;
+    bugs.getAt(0).y += data[index].y;
+
+    bugs.getAt(1).x += data[index].x;
+    bugs.getAt(1).y += data[index].y;
+
+    bugs.getAt(2).x += data[index].x;
+    bugs.getAt(2).y += data[index].y;
+
+
+    // image.x = data[index].x;
+    // image.y = data[index].y;
+    index++;
+
+    if (index === data.length)
+    {
+        index = 0;
+    }
+
+}

src/core/Group.js

@@ -372,11 +372,11 @@ Phaser.Group.prototype.bringToTop = function (child) {
 /**
 * Sends the given child to the bottom of this Group so it renders below all other children.
 *
-* @method Phaser.Group#sendToBottom
+* @method Phaser.Group#sendToBack
 * @param {*} child - The child to send to the bottom of this Group.
 * @return {*} The child that was moved.
 */
-Phaser.Group.prototype.sendToBottom = function (child) {
+Phaser.Group.prototype.sendToBack = function (child) {
 
     if (child.parent === this && this.getIndex(child) > 0)
     {
@@ -436,6 +436,28 @@ Phaser.Group.prototype.moveDown = function (child) {
 
 }
 
+/**
+* Positions the child found at the given index within this Group to the given x and y coordinates.
+*
+* @method Phaser.Group#xy
+* @param {number} index - The index of the child in the Group to set the position of.
+* @param {number} x - The new x position of the child.
+* @param {number} y - The new y position of the child.
+*/
+Phaser.Group.prototype.xy = function (index, x, y) {
+
+    if (index < 0 || index > this.children.length)
+    {
+        return -1;
+    }
+    else
+    {
+        this.getChildAt(index).x = x;
+        this.getChildAt(index).y = y;
+    }
+
+}
+
 /**
 * Get the index position of the given child in this Group.
 *

src/gameobjects/GameObjectCreator.js

@@ -66,11 +66,11 @@ Phaser.GameObjectCreator.prototype = {
     *
     * @method Phaser.GameObjectCreator#tween
     * @param {object} obj - Object the tween will be run on.
-    * @return {Phaser.Tween} Description.
+    * @return {Phaser.Tween} The Tween object.
     */
     tween: function (obj) {
 
-        return this.game.tweens.create(obj);
+        return new Phaser.Tween(obj, this.game);
 
     },
 

src/tween/Tween.js

@@ -303,6 +303,106 @@ Phaser.Tween.prototype = {
 
     },
 
+    /**
+    * This will generate an array populated with the tweened object values from start to end.
+    * It works by running the tween simulation at the given frame rate based on the values set-up in Tween.to and similar functions.
+    * It ignores delay and repeat counts and any chained tweens. Just one play through of tween data is returned, including yoyo if set.
+    *
+    * @method Phaser.Tween#generateData
+    * @param {number} [frameRate=60] - The speed in frames per second that the data should be generated at. The higher the value, the larger the array it creates.
+    * @return {array} An array of tweened values.
+    */
+    generateData: function (frameRate) {
+
+        if (this.game === null || this._object === null)
+        {
+            return null;
+        }
+
+        this._startTime = 0;
+
+        for (var property in this._valuesEnd)
+        {
+            // Check if an Array was provided as property value
+            if (Array.isArray(this._valuesEnd[property]))
+            {
+                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]);
+            }
+
+            this._valuesStart[property] = this._object[property];
+
+            if (!Array.isArray(this._valuesStart[property]))
+            {
+                this._valuesStart[property] *= 1.0; // Ensures we're using numbers, not strings
+            }
+
+            this._valuesStartRepeat[property] = this._valuesStart[property] || 0;
+        }
+
+        //  Simulate the tween. We will run for frameRate * (this._duration / 1000) (ms)
+        var time = 0;
+        var total = frameRate * (this._duration / 1000);
+        var tick = this._duration / total;
+
+        var output = [];
+
+        while (total--)
+        {
+            var property;
+
+            var elapsed = (time - this._startTime) / this._duration;
+            elapsed = elapsed > 1 ? 1 : elapsed;
+
+            var value = this._easingFunction(elapsed);
+            var blob = {};
+
+            for (property in this._valuesEnd)
+            {
+                var start = this._valuesStart[property] || 0;
+                var end = this._valuesEnd[property];
+
+                if (end instanceof Array)
+                {
+                    blob[property] = this._interpolationFunction(end, value);
+                }
+                else
+                {
+                    // Parses relative end values with start as base (e.g.: +10, -3)
+                    if (typeof(end) === 'string')
+                    {
+                        end = start + parseFloat(end, 10);
+                    }
+
+                    // protect against non numeric properties.
+                    if (typeof(end) === 'number')
+                    {
+                        blob[property] = start + ( end - start ) * value;
+                    }
+                }
+            }
+
+            output.push(blob);
+
+            time += tick;
+        }
+
+        if (this._yoyo)
+        {
+            var reversed = output.slice();
+            reversed.reverse();
+            output = output.concat(reversed);
+        }
+
+        return output;
+
+    },
+
     /**
     * Stops the tween if running and removes it from the TweenManager. If there are any onComplete callbacks or events they are not dispatched.
     *