#

API Docs for: 1.6.0
Show: Inherited Protected Private Deprecated

# File: src/pixi/display/Sprite.js

    /**
     * @author Mat Groves http://matgroves.com/ @Doormat23
     */

    /**
     * The Sprite object is the base for all textured objects that are rendered to the screen
     *
     * @class Sprite
     * @extends DisplayObjectContainer
     * @constructor
     * @param texture {Texture} The texture for this sprite
     *
     * A sprite can be created directly from an image like this :
     * var sprite = new PIXI.Sprite.fromImage('assets/image.png');
     * yourStage.addChild(sprite);
     * then obviously don't forget to add it to the stage you have already created
     */
    PIXI.Sprite = function(texture)
    {
        PIXI.DisplayObjectContainer.call( this );

        /**
         * The anchor sets the origin point of the texture.
         * The default is 0,0 this means the texture's origin is the top left
         * Setting than anchor to 0.5,0.5 means the textures origin is centred
         * Setting the anchor to 1,1 would mean the textures origin points will be the bottom right corner
         *
         * @property anchor
         * @type Point
         */
        this.anchor = new PIXI.Point();

        /**
         * The texture that the sprite is using
         *
         * @property texture
         * @type Texture
         */
        this.texture = texture;

        /**
         * The width of the sprite (this is initially set by the texture)
         *
         * @property _width
         * @type Number
         * @private
         */
        this._width = 0;

        /**
         * The height of the sprite (this is initially set by the texture)
         *
         * @property _height
         * @type Number
         * @private
         */
        this._height = 0;

        /**
         * The tint applied to the sprite. This is a hex value
         *
         * @property tint
         * @type Number
         * @default 0xFFFFFF
         */
        this.tint = 0xFFFFFF;// * Math.random();

        /**
         * The blend mode to be applied to the sprite
         *
         * @property blendMode
         * @type Number
         * @default PIXI.blendModes.NORMAL;
         */
        this.blendMode = PIXI.blendModes.NORMAL;

        if(texture.baseTexture.hasLoaded)
        {
            this.onTextureUpdate();
        }
        else
        {
            this.onTextureUpdateBind = this.onTextureUpdate.bind(this);
            this.texture.addEventListener( 'update', this.onTextureUpdateBind );
        }

        this.renderable = true;
    };

    // constructor
    PIXI.Sprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
    PIXI.Sprite.prototype.constructor = PIXI.Sprite;

    /**
     * The width of the sprite, setting this will actually modify the scale to achieve the value set
     *
     * @property width
     * @type Number
     */
    Object.defineProperty(PIXI.Sprite.prototype, 'width', {
        get: function() {
            return this.scale.x * this.texture.frame.width;
        },
        set: function(value) {
            this.scale.x = value / this.texture.frame.width;
            this._width = value;
        }
    });

    /**
     * The height of the sprite, setting this will actually modify the scale to achieve the value set
     *
     * @property height
     * @type Number
     */
    Object.defineProperty(PIXI.Sprite.prototype, 'height', {
        get: function() {
            return  this.scale.y * this.texture.frame.height;
        },
        set: function(value) {
            this.scale.y = value / this.texture.frame.height;
            this._height = value;
        }
    });

    /**
     * Sets the texture of the sprite
     *
     * @method setTexture
     * @param texture {Texture} The PIXI texture that is displayed by the sprite
     */
    PIXI.Sprite.prototype.setTexture = function(texture)
    {
        // stop current texture;
        if(this.texture.baseTexture !== texture.baseTexture)
        {
            this.textureChange = true;
            this.texture = texture;
        }
        else
        {
            this.texture = texture;
        }

        this.cachedTint = 0xFFFFFF;
    };

    /**
     * When the texture is updated, this event will fire to update the scale and frame
     *
     * @method onTextureUpdate
     * @param event
     * @private
     */
    PIXI.Sprite.prototype.onTextureUpdate = function()
    {
        // so if _width is 0 then width was not set..
        if(this._width)this.scale.x = this._width / this.texture.frame.width;
        if(this._height)this.scale.y = this._height / this.texture.frame.height;

        //this.updateFrame = true;
    };

    /**
    * Returns the framing rectangle of the sprite as a PIXI.Rectangle object
    *
    * @method getBounds
    * @param matrix {Matrix} the transformation matrix of the sprite
    * @return {Rectangle} the framing rectangle
    */
    PIXI.Sprite.prototype.getBounds = function(matrix)
    {

        var width = this.texture.frame.width;
        var height = this.texture.frame.height;

        var w0 = width * (1-this.anchor.x);
        var w1 = width * -this.anchor.x;

        var h0 = height * (1-this.anchor.y);
        var h1 = height * -this.anchor.y;

        var worldTransform = matrix || this.worldTransform ;

        var a = worldTransform.a;
        var b = worldTransform.c;
        var c = worldTransform.b;
        var d = worldTransform.d;
        var tx = worldTransform.tx;
        var ty = worldTransform.ty;

        var x1 = a * w1 + c * h1 + tx;
        var y1 = d * h1 + b * w1 + ty;

        var x2 = a * w0 + c * h1 + tx;
        var y2 = d * h1 + b * w0 + ty;

        var x3 = a * w0 + c * h0 + tx;
        var y3 = d * h0 + b * w0 + ty;

        var x4 =  a * w1 + c * h0 + tx;
        var y4 =  d * h0 + b * w1 + ty;

        var maxX = -Infinity;
        var maxY = -Infinity;

        var minX = Infinity;
        var minY = Infinity;

        minX = x1 < minX ? x1 : minX;
        minX = x2 < minX ? x2 : minX;
        minX = x3 < minX ? x3 : minX;
        minX = x4 < minX ? x4 : minX;

        minY = y1 < minY ? y1 : minY;
        minY = y2 < minY ? y2 : minY;
        minY = y3 < minY ? y3 : minY;
        minY = y4 < minY ? y4 : minY;

        maxX = x1 > maxX ? x1 : maxX;
        maxX = x2 > maxX ? x2 : maxX;
        maxX = x3 > maxX ? x3 : maxX;
        maxX = x4 > maxX ? x4 : maxX;

        maxY = y1 > maxY ? y1 : maxY;
        maxY = y2 > maxY ? y2 : maxY;
        maxY = y3 > maxY ? y3 : maxY;
        maxY = y4 > maxY ? y4 : maxY;

        var bounds = this._bounds;

        bounds.x = minX;
        bounds.width = maxX - minX;

        bounds.y = minY;
        bounds.height = maxY - minY;

        // store a reference so that if this function gets called again in the render cycle we do not have to recalculate
        this._currentBounds = bounds;

        return bounds;
    };

    /**
    * Renders the object using the WebGL renderer
    *
    * @method _renderWebGL
    * @param renderSession {RenderSession}
    * @private
    */
    PIXI.Sprite.prototype._renderWebGL = function(renderSession)
    {
        // if the sprite is not visible or the alpha is 0 then no need to render this element
        if(!this.visible || this.alpha <= 0)return;

        var i,j;

        // do a quick check to see if this element has a mask or a filter.
        if(this._mask || this._filters)
        {
            var spriteBatch =  renderSession.spriteBatch;

            // push filter first as we need to ensure the stencil buffer is correct for any masking
            if(this._filters)
            {
                spriteBatch.flush();
                renderSession.filterManager.pushFilter(this._filterBlock);
            }

            if(this._mask)
            {
                spriteBatch.stop();
                renderSession.maskManager.pushMask(this.mask, renderSession);
                spriteBatch.start();
            }

            // add this sprite to the batch
            spriteBatch.render(this);

            // now loop through the children and make sure they get rendered
            for(i=0,j=this.children.length; i<j; i++)
            {
                this.children[i]._renderWebGL(renderSession);
            }

            // time to stop the sprite batch as either a mask element or a filter draw will happen next
            spriteBatch.stop();

            if(this._mask)renderSession.maskManager.popMask(this._mask, renderSession);
            if(this._filters)renderSession.filterManager.popFilter();

            spriteBatch.start();
        }
        else
        {
            renderSession.spriteBatch.render(this);

            // simple render children!
            for(i=0,j=this.children.length; i<j; i++)
            {
                this.children[i]._renderWebGL(renderSession);
            }
        }

        //TODO check culling
    };

    /**
    * Renders the object using the Canvas renderer
    *
    * @method _renderCanvas
    * @param renderSession {RenderSession}
    * @private
    */
    PIXI.Sprite.prototype._renderCanvas = function(renderSession)
    {
        // If the sprite is not visible or the alpha is 0 then no need to render this element
        if (this.visible === false || this.alpha === 0) return;

        if (this.blendMode !== renderSession.currentBlendMode)
        {
            renderSession.currentBlendMode = this.blendMode;
            renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode];
        }

        if (this._mask)
        {
            renderSession.maskManager.pushMask(this._mask, renderSession.context);
        }

        //  Ignore null sources
        if (this.texture.valid)
        {
            renderSession.context.globalAlpha = this.worldAlpha;

            //  Allow for pixel rounding
            if (renderSession.roundPixels)
            {
                renderSession.context.setTransform(
                    this.worldTransform.a,
                    this.worldTransform.c,
                    this.worldTransform.b,
                    this.worldTransform.d,
                    this.worldTransform.tx | 0,
                    this.worldTransform.ty | 0);
            }
            else
            {
                renderSession.context.setTransform(
                    this.worldTransform.a,
                    this.worldTransform.c,
                    this.worldTransform.b,
                    this.worldTransform.d,
                    this.worldTransform.tx,
                    this.worldTransform.ty);
            }

            //  If smoothingEnabled is supported and we need to change the smoothing property for this texture
            if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode)
            {
                renderSession.scaleMode = this.texture.baseTexture.scaleMode;
                renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR);
            }

            //  If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions
            var dx = (this.texture.trim) ? this.texture.trim.x - this.anchor.x * this.texture.trim.width : this.anchor.x * -this.texture.frame.width;
            var dy = (this.texture.trim) ? this.texture.trim.y - this.anchor.y * this.texture.trim.height : this.anchor.y * -this.texture.frame.height;

            if (this.tint !== 0xFFFFFF)
            {
                if (this.cachedTint !== this.tint)
                {
                    this.cachedTint = this.tint;

                    //  TODO clean up caching - how to clean up the caches?
                    this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint);
                }

                renderSession.context.drawImage(
                                    this.tintedTexture,
                                    0,
                                    0,
                                    this.texture.crop.width,
                                    this.texture.crop.height,
                                    dx,
                                    dy,
                                    this.texture.crop.width,
                                    this.texture.crop.height);
            }
            else
            {
                renderSession.context.drawImage(
                                    this.texture.baseTexture.source,
                                    this.texture.crop.x,
                                    this.texture.crop.y,
                                    this.texture.crop.width,
                                    this.texture.crop.height,
                                    dx,
                                    dy,
                                    this.texture.crop.width,
                                    this.texture.crop.height);
            }
        }

        // OVERWRITE
        for (var i = 0, j = this.children.length; i < j; i++)
        {
            this.children[i]._renderCanvas(renderSession);
        }

        if (this._mask)
        {
            renderSession.maskManager.popMask(renderSession.context);
        }
    };

    // some helper functions..

    /**
     *
     * Helper function that creates a sprite that will contain a texture from the TextureCache based on the frameId
     * The frame ids are created when a Texture packer file has been loaded
     *
     * @method fromFrame
     * @static
     * @param frameId {String} The frame Id of the texture in the cache
     * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId
     */
    PIXI.Sprite.fromFrame = function(frameId)
    {
        var texture = PIXI.TextureCache[frameId];
        if(!texture) throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this);
        return new PIXI.Sprite(texture);
    };

    /**
     *
     * Helper function that creates a sprite that will contain a texture based on an image url
     * If the image is not in the texture cache it will be loaded
     *
     * @method fromImage
     * @static
     * @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, crossorigin, scaleMode)
    {
        var texture = PIXI.Texture.fromImage(imageId, crossorigin, scaleMode);
        return new PIXI.Sprite(texture);
    };