Fixed an issue in Text. Fixed the background color issue with Canvas games. Updated the Examples viewer so the side-by-side focuses the iframe now. Added new "Extend Group" example.

Author: photonstorm

build/phaser.js

@@ -250,6 +250,10 @@
       "file": "display+order.js",
       "title": "display order"
     },
+    {
+      "file": "extending+a+group.js",
+      "title": "extending a group"
+    },
     {
       "file": "for+each.js",
       "title": "for each"

build/phaser.min.js

@@ -36,6 +36,9 @@ $(document).ready(function(){
 		var height = $(window).height() - 270;
 		$("#panel").css('height', height + 'px');
 
+		//	iFrame focus
+		$('a').click(function(e) { $('#viewer').focus(); });
+
 	})
 
 	.fail(function() {

examples/_site/examples.json

@@ -0,0 +1,49 @@
+window.onload = function() {
+
+    //  Here is a custom group
+    //  It will automatically create 30 sprites of the given image when created.
+
+    MonsterGroup = function (game, image, action) {
+
+        Phaser.Group.call(this, game);
+
+        for (var i = 0; i < 30; i++)
+        {
+            var sprite = this.create(game.world.randomX, game.world.randomY, image);
+
+            if (action == 'bounce')
+            {
+                game.add.tween(sprite).to({ y: sprite.y - 100 }, 2000, Phaser.Easing.Elastic.Out, true, 0, 1000, true);
+            }
+            else if (action == 'slide')
+            {
+                game.add.tween(sprite).to({ x: sprite.x + 200 }, 4000, Phaser.Easing.Elastic.Out, true, 0, 1000, true);
+            }
+
+        }
+
+    };
+
+    MonsterGroup.prototype = Object.create(Phaser.Group.prototype);
+    MonsterGroup.prototype.constructor = MonsterGroup;
+
+    var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create });
+
+    var customGroup1;
+    var customGroup2;
+
+    function preload() {
+
+        game.load.image('ufo', 'assets/sprites/ufo.png');
+        game.load.image('baddie', 'assets/sprites/space-baddie.png');
+        
+    }
+
+    function create() {
+
+        customGroup1 = new MonsterGroup(game, 'ufo', 'bounce');
+        customGroup2 = new MonsterGroup(game, 'baddie', 'slide');
+
+    }
+
+}();

examples/_site/js/phaser-sideview.js

@@ -12,7 +12,7 @@
     <div class="header">
         <div class="box100 no-padding">
             <div class="phaser-version">
-                <span>Phaser Version: 1.1.2</span>
+                <span>Phaser Version: 1.1.3</span>
                 <a id="upgrade" href="https://github.com/photonstorm/phaser" class="version-button">New version: </a>
             </div>
         </div>

examples/groups/extending a group.js

@@ -19,7 +19,7 @@
         </div>
         <div id="footer">
             <p id="total">Total examples: </p>
-            <p>Phaser version: 1.1.2</p>
+            <p>Phaser version: 1.1.3</p>
             <p><a href="index.html">Switch to Full View</a></p>
         </div>
 

examples/index.html

@@ -21,12 +21,9 @@ PIXI.CanvasRenderer.prototype.render = function(stage)
 
     PIXI.visibleCount++;
     stage.updateTransform();
-    
-    // update the background color
-    // if(this.view.style.backgroundColor!=stage.backgroundColorString && !this.transparent)this.view.style.backgroundColor = stage.backgroundColorString;
 
     this.context.setTransform(1, 0, 0, 1, 0, 0);
-    // this.context.clearRect(0, 0, this.width, this.height)
+    this.context.clearRect(0, 0, this.width, this.height)
     this.renderDisplayObject(stage);
 
     //  Remove frame updates

examples/sideview.html

@@ -98,6 +98,8 @@ Phaser.Stage.prototype = {
         Phaser.Canvas.setUserSelect(this.canvas, 'none');
         Phaser.Canvas.setTouchAction(this.canvas, 'none');
 
+        this.backgroundColor = '#000';
+
         document.addEventListener('visibilitychange', this._onChange, false);
         document.addEventListener('webkitvisibilitychange', this._onChange, false);
         document.addEventListener('pagehide', this._onChange, false);
@@ -165,19 +167,23 @@ Object.defineProperty(Phaser.Stage.prototype, "backgroundColor", {
 
         this._backgroundColor = color;
 
-        if (this.game.renderType == Phaser.CANVAS)
-        {
-            //  Set it directly, this allows us to use rgb alpha values in Canvas mode.
-            this._stage.backgroundColorString = color;
-        }
-        else
+        if (this.game.transparent === false)
         {
-            if (typeof color === 'string')
+            if (this.game.renderType == Phaser.CANVAS)
             {
-                color = Phaser.Color.hexToRGB(color);
+                //  Set it directly, this allows us to use rgb alpha values in Canvas mode.
+                this.game.canvas.style.backgroundColor = color;
+            }
+            else
+            {
+                if (typeof color === 'string')
+                {
+                    color = Phaser.Color.hexToRGB(color);
+                }
+
+                this._stage.setBackgroundColor(color);
             }
 
-            this._stage.setBackgroundColor(color);
         }
 
     }

src/PixiPatch.js

@@ -202,10 +202,10 @@ Object.defineProperty(Phaser.Text.prototype, 'angle', {
 
 /**
 * The x coordinate of this object in world space.
-* @name Phaser.BitmapText#x
+* @name Phaser.Text#x
 * @property {number} x - The x coordinate of this object in world space.
 */
-Object.defineProperty(Phaser.BitmapText.prototype, 'x', {
+Object.defineProperty(Phaser.Text.prototype, 'x', {
 
     get: function() {
         return this.position.x;
@@ -219,10 +219,10 @@ Object.defineProperty(Phaser.BitmapText.prototype, 'x', {
 
 /**
 * The y coordinate of this object in world space.
-* @name Phaser.BitmapText#y
+* @name Phaser.Text#y
 * @property {number} y - The y coordinate of this object in world space.
 */
-Object.defineProperty(Phaser.BitmapText.prototype, 'y', {
+Object.defineProperty(Phaser.Text.prototype, 'y', {
 
     get: function() {
         return this.position.y;