TileSprites fixed for WebGL.

Author: photonstorm

src/Phaser.js

@@ -10,7 +10,7 @@
 */
 var Phaser = Phaser || {
 
-	VERSION: '2.4.0-RC2',
+	VERSION: '2.4.0-RC3',
 	GAMES: [],
 
     AUTO: 0,

src/gameobjects/TileSprite.js

@@ -10,9 +10,15 @@
 * 
 * TileSprites have no input handler or physics bodies by default, both need enabling in the same way as for normal Sprites.
 *
+* You shouldn't ever create a TileSprite any larger than your actual screen size. If you want to create a large repeating background
+* that scrolls across the whole map of your game, then you create a TileSprite that fits the screen size and then use the `tilePosition`
+* property to scroll the texture as the player moves. If you create a TileSprite that is thousands of pixels in size then it will 
+* consume huge amounts of memory and cause performance issues. Remember: use `tilePosition` to scroll your texture and `tileScale` to
+* adjust the scale of the texture - don't resize the sprite itself or make it larger than it needs.
+*
 * An important note about texture dimensions:
 *
-* When running under Canvas a TileSprite can use any texture size without issue. When running under WebGL the texture should be
+* When running under Canvas a TileSprite can use any texture size without issue. When running under WebGL the texture should ideally be
 * a power of two in size (i.e. 4, 8, 16, 32, 64, 128, 256, 512, etch pixels width by height). If the texture isn't a power of two
 * it will be rendered to a blank canvas that is the correct size, which means you may have 'blank' areas appearing to the right and
 * bottom of your frame. To avoid this ensure your textures are perfect powers of two.
@@ -77,7 +83,9 @@ Phaser.TileSprite = function (game, x, y, width, height, key, frame) {
     */
     this._scroll = new Phaser.Point();
 
-    PIXI.TilingSprite.call(this, PIXI.TextureCache['__default'], width, height);
+    var def = game.cache.getImage('__default', true);
+
+    PIXI.TilingSprite.call(this, new PIXI.Texture(def.base), width, height);
 
     Phaser.Component.Core.init.call(this, game, x, y, key, frame);
 

src/pixi/extras/TilingSprite.js

@@ -14,10 +14,10 @@
  */
 PIXI.TilingSprite = function(texture, width, height)
 {
-    PIXI.Sprite.call( this, texture);
+    PIXI.Sprite.call(this, texture);
 
     /**
-     * The with of the tiling sprite
+     * The width of the tiling sprite
      *
      * @property width
      * @type Number
@@ -377,6 +377,7 @@ PIXI.TilingSprite.prototype.generateTilingTexture = function(forcePowerOfTwo)
     {
         this.canvasBuffer = new PIXI.CanvasBuffer(targetWidth, targetHeight);
         this.tilingTexture = PIXI.Texture.fromCanvas(this.canvasBuffer.canvas);
+        this.tilingTexture = PIXI.Texture.fromCanvas(this.canvasBuffer.canvas);
         this.tilingTexture.isTiling = true;
         this.tilingTexture.needsUpdate = true;
     }
@@ -387,15 +388,25 @@ PIXI.TilingSprite.prototype.generateTilingTexture = function(forcePowerOfTwo)
         this.canvasBuffer.context.strokeRect(0, 0, targetWidth, targetHeight);
     }
 
+    //  If a sprite sheet we need this:
+    var w = texture.crop.width;
+    var h = texture.crop.height;
+
+    if (w !== targetWidth || h !== targetHeight)
+    {
+        w = targetWidth;
+        h = targetHeight;
+    }
+
     this.canvasBuffer.context.drawImage(texture.baseTexture.source,
                            texture.crop.x,
                            texture.crop.y,
                            texture.crop.width,
                            texture.crop.height,
                            dx,
                            dy,
-                           texture.crop.width,
-                           texture.crop.height);
+                           w,
+                           h);
 
     this.tileScaleOffset.x = frame.width / targetWidth;
     this.tileScaleOffset.y = frame.height / targetHeight;