TileSprites are now much more tidy and can run from a frame in a texture. They can also be animated. New TileSprite.autoScroll function added.

src/animation/Animation.js

@@ -162,6 +162,12 @@ Phaser.Animation.prototype = {
         this.currentFrame = this._frameData.getFrame(this._frames[this._frameIndex]);
         this._parent.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
 
+        if (this._parent.__tilePattern)
+        {
+            this._parent.__tilePattern = false;
+            this._parent.tilingTexture = false;
+        }
+
         if (this._parent.events)
         {
             this._parent.events.onAnimationStart.dispatch(this._parent, this);
@@ -259,6 +265,12 @@ Phaser.Animation.prototype = {
                     if (this.currentFrame)
                     {
                         this._parent.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
+
+                        if (this._parent.__tilePattern)
+                        {
+                            this._parent.__tilePattern = false;
+                            this._parent.tilingTexture = false;
+                        }
                     }
                     
                     this._parent.events.onAnimationLoop.dispatch(this._parent, this);
@@ -275,6 +287,12 @@ Phaser.Animation.prototype = {
                 if (this.currentFrame)
                 {
                     this._parent.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
+
+                    if (this._parent.__tilePattern)
+                    {
+                        this._parent.__tilePattern = false;
+                        this._parent.tilingTexture = false;
+                    }
                 }
             }
 

src/animation/AnimationManager.js

@@ -135,6 +135,12 @@ Phaser.AnimationManager.prototype = {
         this.currentFrame = this.currentAnim.currentFrame;
         this.sprite.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
 
+        if (this.sprite.__tilePattern)
+        {
+            this.__tilePattern = false;
+            this.tilingTexture = false;
+        }
+
         return this._anims[name];
 
     },
@@ -253,7 +259,6 @@ Phaser.AnimationManager.prototype = {
         if (this.currentAnim && this.currentAnim.update() === true)
         {
             this.currentFrame = this.currentAnim.currentFrame;
-            this.sprite.currentFrame = this.currentFrame;
             return true;
         }
 
@@ -270,7 +275,7 @@ Phaser.AnimationManager.prototype = {
     */
     getAnimation: function (name) {
 
-        if (typeof name == 'string')
+        if (typeof name === 'string')
         {
             if (this._anims[name])
             {
@@ -289,9 +294,14 @@ Phaser.AnimationManager.prototype = {
     */
     refreshFrame: function () {
 
-        this.sprite.currentFrame = this.currentFrame;
         this.sprite.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
 
+        if (this.sprite.__tilePattern)
+        {
+            this.__tilePattern = false;
+            this.tilingTexture = false;
+        }
+
     },
 
     /**
@@ -388,8 +398,13 @@ Object.defineProperty(Phaser.AnimationManager.prototype, 'frame', {
         {
             this.currentFrame = this._frameData.getFrame(value);
             this._frameIndex = value;
-            this.sprite.currentFrame = this.currentFrame;
             this.sprite.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
+    
+            if (this.sprite.__tilePattern)
+            {
+                this.__tilePattern = false;
+                this.tilingTexture = false;
+            }
         }
 
     }
@@ -417,8 +432,13 @@ Object.defineProperty(Phaser.AnimationManager.prototype, 'frameName', {
         {
             this.currentFrame = this._frameData.getFrameByName(value);
             this._frameIndex = this.currentFrame.index;
-            this.sprite.currentFrame = this.currentFrame;
             this.sprite.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
+    
+            if (this.sprite.__tilePattern)
+            {
+                this.__tilePattern = false;
+                this.tilingTexture = false;
+            }
         }
         else
         {

src/gameobjects/GameObjectFactory.js

@@ -145,19 +145,20 @@ Phaser.GameObjectFactory.prototype = {
     * Creates a new TileSprite object.
     *
     * @method Phaser.GameObjectFactory#tileSprite
-    * @param {number} x - X position of the new tileSprite.
-    * @param {number} y - Y position of the new tileSprite.
-    * @param {number} width - the width of the tilesprite.
-    * @param {number} height - the height of the tilesprite.
-    * @param {string|Phaser.RenderTexture|PIXI.Texture} key - This is the image or texture used by the Sprite during rendering. It can be a string which is a reference to the Cache entry, or an instance of a RenderTexture or PIXI.Texture.
+    * @param {number} x - The x coordinate (in world space) to position the TileSprite at.
+    * @param {number} y - The y coordinate (in world space) to position the TileSprite at.
+    * @param {number} width - The width of the TileSprite.
+    * @param {number} height - The height of the TileSprite.
+    * @param {string|Phaser.RenderTexture|Phaser.BitmapData|PIXI.Texture} key - This is the image or texture used by the TileSprite during rendering. It can be a string which is a reference to the Cache entry, or an instance of a RenderTexture or PIXI.Texture.
+    * @param {string|number} frame - If this TileSprite is using part of a sprite sheet or texture atlas you can specify the exact frame to use by giving a string or numeric index.
     * @param {Phaser.Group} [group] - Optional Group to add the object to. If not specified it will be added to the World group.
     * @return {Phaser.TileSprite} The newly created tileSprite object.
     */
-    tileSprite: function (x, y, width, height, key, group) {
+    tileSprite: function (x, y, width, height, key, frame, group) {
 
         if (typeof group === 'undefined') { group = this.world; }
 
-        return group.add(new Phaser.TileSprite(this.game, x, y, width, height, key));
+        return group.add(new Phaser.TileSprite(this.game, x, y, width, height, key, frame));
 
     },
 

src/gameobjects/Image.js

@@ -57,7 +57,16 @@ Phaser.Image = function (game, x, y, key, frame) {
     */
     this.key = key;
 
+    /**
+    * @property {number} _frame - Internal cache var.
+    * @private
+    */
     this._frame = 0;
+
+    /**
+    * @property {string} _frameName - Internal cache var.
+    * @private
+    */
     this._frameName = '';
 
     PIXI.Sprite.call(this, PIXI.TextureCache['__default']);

src/gameobjects/TileSprite.js

@@ -10,27 +10,33 @@
 *
 * @class Phaser.TileSprite
 * @constructor
-* @param {Phaser.Game} game - Current game instance.
-* @param {number} [x=0] - X position of the new tileSprite.
-* @param {number} [y=0] - Y position of the new tileSprite.
-* @param {number} [width=256] - the width of the tilesprite.
-* @param {number} [height=256] - the height of the tilesprite.
-* @param {string|Phaser.RenderTexture|PIXI.Texture} key - This is the image or texture used by the Sprite during rendering. It can be a string which is a reference to the Cache entry, or an instance of a RenderTexture or PIXI.Texture.
+* @param {Phaser.Game} game - A reference to the currently running game.
+* @param {number} x - The x coordinate (in world space) to position the TileSprite at.
+* @param {number} y - The y coordinate (in world space) to position the TileSprite at.
+* @param {number} width - The width of the TileSprite.
+* @param {number} height - The height of the TileSprite.
+* @param {string|Phaser.RenderTexture|Phaser.BitmapData|PIXI.Texture} key - This is the image or texture used by the TileSprite during rendering. It can be a string which is a reference to the Cache entry, or an instance of a RenderTexture or PIXI.Texture.
+* @param {string|number} frame - If this TileSprite is using part of a sprite sheet or texture atlas you can specify the exact frame to use by giving a string or numeric index.
 */
-Phaser.TileSprite = function (game, x, y, width, height, key) {
+Phaser.TileSprite = function (game, x, y, width, height, key, frame) {
 
     x = x || 0;
     y = y || 0;
     width = width || 256;
     height = height || 256;
     key = key || null;
+    frame = frame || null;
 
     /**
-    * @property {PIXI.Texture} texture - The texture that the sprite renders with.
+    * @property {Phaser.Game} game - A reference to the currently running Game.
     */
-    this.texture = PIXI.TextureCache[key];
+    this.game = game;
 
-    PIXI.TilingSprite.call(this, this.texture, width, height);
+    /**
+    * @property {string} name - The user defined name given to this Sprite.
+    * @default
+    */
+    this.name = '';
 
     /**
     * @property {number} type - The const type of this object.
@@ -38,10 +44,306 @@ Phaser.TileSprite = function (game, x, y, width, height, key) {
     */
     this.type = Phaser.TILESPRITE;
 
-    this.position.x = x;
-    this.position.y = y;
+    /**
+    * @property {Phaser.Events} events - The Events you can subscribe to that are dispatched when certain things happen on this Sprite or its components.
+    */
+    this.events = new Phaser.Events(this);
+
+    /**
+    * @property {Phaser.AnimationManager} animations - This manages animations of the sprite. You can modify animations through it (see Phaser.AnimationManager)
+    */
+    this.animations = new Phaser.AnimationManager(this);
+
+    /**
+    *  @property {string|Phaser.RenderTexture|Phaser.BitmapData|PIXI.Texture} key - This is the image or texture used by the Sprite during rendering. It can be a string which is a reference to the Cache entry, or an instance of a RenderTexture, BitmapData or PIXI.Texture.
+    */
+    this.key = key;
+
+    /**
+    * @property {number} _frame - Internal cache var.
+    * @private
+    */
+    this._frame = 0;
+
+    /**
+    * @property {string} _frameName - Internal cache var.
+    * @private
+    */
+    this._frameName = '';
+
+    /**
+    * @property {Phaser.Point} _scroll - Internal cache var.
+    * @private
+    */
+    this._scroll = new Phaser.Point();
+
+    PIXI.TilingSprite.call(this, PIXI.TextureCache['__default'], width, height);
+
+    this.loadTexture(key, frame);
+
+    this.position.set(x, y);
+
+    /**
+    * @property {Phaser.Point} world - The world coordinates of this Sprite. This differs from the x/y coordinates which are relative to the Sprites container.
+    */
+    this.world = new Phaser.Point(x, y);
 
 };
 
 Phaser.TileSprite.prototype = Object.create(PIXI.TilingSprite.prototype);
 Phaser.TileSprite.prototype.constructor = Phaser.TileSprite;
+
+/**
+* Automatically called by World.preUpdate.
+*
+* @method Phaser.TileSprite#preUpdate
+* @memberof Phaser.TileSprite
+*/
+Phaser.TileSprite.prototype.preUpdate = function() {
+
+    this.world.setTo(this.game.camera.x + this.worldTransform[2], this.game.camera.y + this.worldTransform[5]);
+
+    this.animations.update();
+
+    if (this._scroll.x !== 0)
+    {
+        this.tilePosition.x += Math.floor(this._scroll.x * this.game.time.physicsElapsed);
+    }
+
+    if (this._scroll.y !== 0)
+    {
+        this.tilePosition.y += Math.floor(this._scroll.y * this.game.time.physicsElapsed);
+    }
+
+    return true;
+
+}
+
+/**
+* Internal function called by the World postUpdate cycle.
+*
+* @method Phaser.TileSprite#postUpdate
+* @memberof Phaser.TileSprite
+*/
+Phaser.TileSprite.prototype.postUpdate = function() {
+
+    if (this.fixedToCamera)
+    {
+        this.position.x = this.game.camera.view.x + this.x;
+        this.position.y = this.game.camera.view.y + this.y;
+    }
+
+}
+
+/**
+* Sets this TileSprite to automatically scroll in the given direction until stopped via TileSprite.stopScroll().
+* The scroll speed is specified in pixels per second.
+* A negative x value will scroll to the left. A positive x value will scroll to the right.
+* A negative y value will scroll up. A positive y value will scroll down.
+*
+* @method Phaser.TileSprite#autoScroll
+* @memberof Phaser.TileSprite
+*/
+Phaser.TileSprite.prototype.autoScroll = function(x, y) {
+
+    this._scroll.set(x, y);
+
+}
+
+/**
+* Stops an automatically scrolling TileSprite.
+*
+* @method Phaser.TileSprite#stopScroll
+* @memberof Phaser.TileSprite
+*/
+Phaser.TileSprite.prototype.stopScroll = function() {
+
+    this._scroll.set(0, 0);
+
+}
+
+/**
+* Changes the Texture the TileSprite is using entirely. The old texture is removed and the new one is referenced or fetched from the Cache.
+* This causes a WebGL texture update, so use sparingly or in low-intensity portions of your game.
+*
+* @method Phaser.TileSprite#loadTexture
+* @memberof Phaser.TileSprite
+* @param {string|Phaser.RenderTexture|Phaser.BitmapData|PIXI.Texture} key - This is the image or texture used by the Sprite during rendering. It can be a string which is a reference to the Cache entry, or an instance of a RenderTexture, BitmapData or PIXI.Texture.
+* @param {string|number} frame - If this Sprite is using part of a sprite sheet or texture atlas you can specify the exact frame to use by giving a string or numeric index.
+*/
+Phaser.TileSprite.prototype.loadTexture = function (key, frame) {
+
+    frame = frame || 0;
+
+    if (key instanceof Phaser.RenderTexture)
+    {
+        this.key = key.key;
+        this.setTexture(key);
+        return;
+    }
+    else if (key instanceof Phaser.BitmapData)
+    {
+        this.key = key.key;
+        this.setTexture(key.texture);
+        return;
+    }
+    else if (key instanceof PIXI.Texture)
+    {
+        this.key = key;
+        this.setTexture(key);
+        return;
+    }
+    else
+    {
+        if (key === null || typeof key === 'undefined')
+        {
+            this.key = '__default';
+            this.setTexture(PIXI.TextureCache[this.key]);
+            return;
+        }
+        else if (typeof key === 'string' && !this.game.cache.checkImageKey(key))
+        {
+            this.key = '__missing';
+            this.setTexture(PIXI.TextureCache[this.key]);
+            return;
+        }
+
+        if (this.game.cache.isSpriteSheet(key))
+        {
+            this.key = key;
+
+            // var frameData = this.game.cache.getFrameData(key);
+            this.animations.loadFrameData(this.game.cache.getFrameData(key));
+
+            if (typeof frame === 'string')
+            {
+                this.frameName = frame;
+            }
+            else
+            {
+                this.frame = frame;
+            }
+        }
+        else
+        {
+            this.key = key;
+            this.setTexture(PIXI.TextureCache[key]);
+            return;
+        }
+    }
+
+};
+
+/**
+* Destroys the TileSprite. This removes it from its parent group, destroys the event and animation handlers if present
+* and nulls its reference to game, freeing it up for garbage collection.
+* 
+* @method Phaser.TileSprite#destroy
+* @memberof Phaser.TileSprite
+*/
+Phaser.TileSprite.prototype.destroy = function() {
+
+    if (this.filters)
+    {
+        this.filters = null;
+    }
+
+    if (this.parent)
+    {
+        this.parent.remove(this);
+    }
+
+    this.animations.destroy();
+
+    this.events.destroy();
+
+    this.exists = false;
+    this.visible = false;
+
+    this.game = null;
+
+};
+
+/**
+* Play an animation based on the given key. The animation should previously have been added via sprite.animations.add()
+* If the requested animation is already playing this request will be ignored. If you need to reset an already running animation do so directly on the Animation object itself.
+* 
+* @method Phaser.TileSprite#play
+* @memberof Phaser.TileSprite
+* @param {string} name - The name of the animation to be played, e.g. "fire", "walk", "jump".
+* @param {number} [frameRate=null] - The framerate to play the animation at. The speed is given in frames per second. If not provided the previously set frameRate of the Animation is used.
+* @param {boolean} [loop=false] - Should the animation be looped after playback. If not provided the previously set loop value of the Animation is used.
+* @param {boolean} [killOnComplete=false] - If set to true when the animation completes (only happens if loop=false) the parent Sprite will be killed.
+* @return {Phaser.Animation} A reference to playing Animation instance.
+*/
+Phaser.TileSprite.prototype.play = function (name, frameRate, loop, killOnComplete) {
+
+    return this.animations.play(name, frameRate, loop, killOnComplete);
+
+};
+
+/**
+* Indicates the rotation of the Sprite, in degrees, from its original orientation. Values from 0 to 180 represent clockwise rotation; values from 0 to -180 represent counterclockwise rotation.
+* Values outside this range are added to or subtracted from 360 to obtain a value within the range. For example, the statement player.angle = 450 is the same as player.angle = 90.
+* If you wish to work in radians instead of degrees use the property Sprite.rotation instead. Working in radians is also a little faster as it doesn't have to convert the angle.
+* 
+* @name Phaser.TileSprite#angle
+* @property {number} angle - The angle of this Sprite in degrees.
+*/
+Object.defineProperty(Phaser.TileSprite.prototype, "angle", {
+
+    get: function() {
+
+        return Phaser.Math.wrapAngle(Phaser.Math.radToDeg(this.rotation));
+
+    },
+
+    set: function(value) {
+
+        this.rotation = Phaser.Math.degToRad(Phaser.Math.wrapAngle(value));
+
+    }
+
+});
+
+/**
+* @name Phaser.TileSprite#frame
+* @property {number} frame - Gets or sets the current frame index and updates the Texture Cache for display.
+*/
+Object.defineProperty(Phaser.TileSprite.prototype, "frame", {
+
+    get: function () {
+        return this.animations.frame;
+    },
+
+    set: function (value) {
+
+        if (value !== this.animations.frame)
+        {
+            this.animations.frame = value;
+        }
+
+    }
+
+});
+
+/**
+* @name Phaser.TileSprite#frameName
+* @property {string} frameName - Gets or sets the current frame name and updates the Texture Cache for display.
+*/
+Object.defineProperty(Phaser.TileSprite.prototype, "frameName", {
+
+    get: function () {
+        return this.animations.frameName;
+    },
+
+    set: function (value) {
+
+        if (value !== this.animations.frameName)
+        {
+            this.animations.frameName = value;
+        }
+
+    }
+
+});

src/pixi/Pixi.js

@@ -16,7 +16,7 @@ PIXI.WEBGL_RENDERER = 0;
 PIXI.CANVAS_RENDERER = 1;
 
 // useful for testing against if your lib is using pixi.
-PIXI.VERSION = "v1.4.4";
+PIXI.VERSION = "v1.5.0";
 
 // the various blend modes supported by pixi
 PIXI.blendModes = {

src/pixi/display/Sprite.js

@@ -466,8 +466,8 @@ PIXI.Sprite.fromFrame = function(frameId)
  * @param imageId {String} The image url of the texture
  * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id
  */
-PIXI.Sprite.fromImage = function(imageId)
+PIXI.Sprite.fromImage = function(imageId, crossorigin, scaleMode)
 {
-    var texture = PIXI.Texture.fromImage(imageId);
+    var texture = PIXI.Texture.fromImage(imageId, crossorigin, scaleMode);
     return new PIXI.Sprite(texture);
 };

src/pixi/extras/TilingSprite.js

@@ -371,8 +371,16 @@ PIXI.TilingSprite.prototype.generateTilingTexture = function(forcePowerOfTwo)
     {
         if(isFrame)
         {
-            targetWidth = frame.width;
-            targetHeight = frame.height;
+            if (texture.trim)
+            {
+                targetWidth = texture.trim.width;
+                targetHeight = texture.trim.height;
+            }
+            else
+            {
+                targetWidth = frame.width;
+                targetHeight = frame.height;
+            }
             
             newTextureRequired = true;
         }

src/pixi/primitives/Graphics.js

@@ -169,6 +169,8 @@ PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
                         fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY};
 
     this.graphicsData.push(this.currentPath);
+
+    return this;
 };
 
 /**
@@ -188,6 +190,8 @@ PIXI.Graphics.prototype.moveTo = function(x, y)
     this.currentPath.points.push(x, y);
 
     this.graphicsData.push(this.currentPath);
+
+    return this;
 };
 
 /**
@@ -202,6 +206,8 @@ PIXI.Graphics.prototype.lineTo = function(x, y)
 {
     this.currentPath.points.push(x, y);
     this.dirty = true;
+
+    return this;
 };
 
 /**
@@ -218,6 +224,8 @@ PIXI.Graphics.prototype.beginFill = function(color, alpha)
     this.filling = true;
     this.fillColor = color || 0;
     this.fillAlpha = (arguments.length < 2) ? 1 : alpha;
+
+    return this;
 };
 
 /**
@@ -230,6 +238,8 @@ PIXI.Graphics.prototype.endFill = function()
     this.filling = false;
     this.fillColor = null;
     this.fillAlpha = 1;
+
+    return this;
 };
 
 /**
@@ -250,6 +260,8 @@ PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
 
     this.graphicsData.push(this.currentPath);
     this.dirty = true;
+
+    return this;
 };
 
 /**
@@ -271,6 +283,8 @@ PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
 
     this.graphicsData.push(this.currentPath);
     this.dirty = true;
+
+    return this;
 };
 
 /**
@@ -293,6 +307,8 @@ PIXI.Graphics.prototype.drawEllipse = function( x, y, width, height)
 
     this.graphicsData.push(this.currentPath);
     this.dirty = true;
+
+    return this;
 };
 
 /**
@@ -310,6 +326,8 @@ PIXI.Graphics.prototype.clear = function()
     this.graphicsData = [];
 
     this.bounds = null; //new PIXI.Rectangle();
+
+    return this;
 };
 
 /**

src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js

@@ -273,7 +273,7 @@ PIXI.WebGLSpriteBatch.prototype.renderTilingSprite = function(tilingSprite)
      // set the textures uvs temporarily
     // TODO create a separate texture so that we can tile part of a texture
 
-    if(!tilingSprite._uvs)tilingSprite._uvs = new Float32Array(8);
+    if(!tilingSprite._uvs)tilingSprite._uvs = new PIXI.TextureUvs();
 
     var uvs = tilingSprite._uvs;
 
@@ -298,7 +298,6 @@ PIXI.WebGLSpriteBatch.prototype.renderTilingSprite = function(tilingSprite)
     uvs.x3 = 0 - offsetX;
     uvs.y3 = (1 *scaleY) - offsetY;
 
-   
     // get the tilingSprites current alpha
     var alpha = tilingSprite.worldAlpha;
     var tint = tilingSprite.tint;

src/pixi/utils/Detector.js

@@ -11,11 +11,11 @@
  * @param width=800 {Number} the width of the renderers view
  * @param height=600 {Number} the height of the renderers view
  * @param [view] {Canvas} the canvas to use as a view, optional 
- * @param [antialias=false] {Boolean} sets antialias (only applicable in webGL chrome at the moment)
  * @param [transparent=false] {Boolean} the transparency of the render view, default false
+ * @param [antialias=false] {Boolean} sets antialias (only applicable in webGL chrome at the moment)
  *
  */
-PIXI.autoDetectRenderer = function(width, height, view,antialias,transparent)
+PIXI.autoDetectRenderer = function(width, height, view, transparent, antialias)
 {
     if(!width)width = 800;
     if(!height)height = 600;

src/pixi/utils/EventTarget.js

@@ -11,7 +11,7 @@
  * Adds event emitter functionality to a class
  *
  * @class EventTarget
- * 
+ * @example
  *      function MyEmitter() {
  *          PIXI.EventTarget.call(this); //mixes in event target stuff
  *      }