#

API Docs for: 1.4.0
Show: Inherited Protected Private Deprecated

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

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

    PIXI.blendModes = {};
    PIXI.blendModes.NORMAL      = 0;
    PIXI.blendModes.ADD         = 1;
    PIXI.blendModes.MULTIPLY    = 2;
    PIXI.blendModes.SCREEN      = 3;

    /**
     * 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
     * @type String
     */
    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 textures origin is the top left
         * Setting than anchor to 0.5,0.5 means the textures origin is centered
         * Setting the anchor to 1,1 would mean the textures origin points will be the bottom right
         *
         * @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 acheive 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 acheive 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;
        this.updateFrame = true;
    };

    /**
     * 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;
    };

    PIXI.Sprite.prototype.getBounds = function()
    {

        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 = this.worldTransform;

        var a = worldTransform[0];
        var b = worldTransform[3];
        var c = worldTransform[1];
        var d = worldTransform[4];
        var tx = worldTransform[2];
        var ty = worldTransform[5];

        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 refferance so that if this function gets called again in the render cycle we do not have to recacalculate
        this._currentBounds = bounds;

        return bounds;
    };

    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 === false || 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;

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

            if(this._filters)
            {
                spriteBatch.flush();
                renderSession.filterManager.pushFilter(this._filterBlock);
            }

            // 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._filters)renderSession.filterManager.popFilter();
            if(this._mask)renderSession.maskManager.popMask(renderSession);

            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
    };

    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._mask)
        {
            renderSession.maskManager.pushMask(this._mask, renderSession.context);
        }

        var frame = this.texture.frame;
        var context = renderSession.context;
        var texture = this.texture;

        //ignore null sources
        if(frame && frame.width && frame.height && texture.baseTexture.source)
        {
            context.globalAlpha = this.worldAlpha;

            var transform = this.worldTransform;

            // alow for trimming

            context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]);

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

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

            if(this.tint !== 0xFFFFFF)
            {
                if(this.cachedTint !== this.tint)
                {
                    // no point tinting an image that has not loaded yet!
                    if(!texture.baseTexture.hasLoaded)return;

                    this.cachedTint = this.tint;

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

                }

                context.drawImage(this.tintedTexture,
                                   0,
                                   0,
                                   frame.width,
                                   frame.height,
                                   (this.anchor.x) * -frame.width,
                                   (this.anchor.y) * -frame.height,
                                   frame.width,
                                   frame.height);
            }
            else
            {

                if(texture.trimmed)
                {
                    var trim =  texture.trim;

                    context.drawImage(this.texture.baseTexture.source,
                                   frame.x,
                                   frame.y,
                                   frame.width,
                                   frame.height,
                                   trim.x - this.anchor.x * trim.realWidth,
                                   trim.y - this.anchor.y * trim.realHeight,
                                   frame.width,
                                   frame.height);
                }
                else
                {

                    context.drawImage(this.texture.baseTexture.source,
                                   frame.x,
                                   frame.y,
                                   frame.width,
                                   frame.height,
                                   (this.anchor.x) * -frame.width,
                                   (this.anchor.y) * -frame.height,
                                   frame.width,
                                   frame.height);
                }

            }
        }

        // OVERWRITE
        for(var i=0,j=this.children.length; i<j; i++)
        {
            var child = this.children[i];
            child._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)
    {
        var texture = PIXI.Texture.fromImage(imageId);
        return new PIXI.Sprite(texture);
    };