var BaseTexture = require('./BaseTexture'), VideoBaseTexture = require('./VideoBaseTexture'), TextureUvs = require('./TextureUvs'), eventTarget = require('../utils/eventTarget'), math = require('../math'), utils = require('../utils'); /** * A texture stores the information that represents an image or part of an image. It cannot be added * to the display list directly. Instead use it as the texture for a Sprite. If no frame is provided then the whole image is used. * * @class * @mixes eventTarget * @namespace PIXI * @param baseTexture {BaseTexture} The base texture source to create the texture from * @param [frame] {Rectangle} The rectangle frame of the texture to show * @param [crop] {Rectangle} The area of original texture * @param [trim] {Rectangle} Trimmed texture rectangle */ function Texture(baseTexture, frame, crop, trim) { /** * Does this Texture have any frame data assigned to it? * * @member {boolean} */ this.noFrame = false; if (!frame) { this.noFrame = true; frame = new math.Rectangle(0, 0, 1, 1); } if (baseTexture instanceof Texture) { baseTexture = baseTexture.baseTexture; } /** * The base texture that this texture uses. * * @member {BaseTexture} */ this.baseTexture = baseTexture; /** * The frame specifies the region of the base texture that this texture uses * * @member {Rectangle} * @private */ this._frame = frame; /** * The texture trim data. * * @member {Rectangle} */ this.trim = trim; /** * This will let the renderer know if the texture is valid. If it's not then it cannot be rendered. * * @member {boolean} */ this.valid = false; /** * This will let a renderer know that a texture has been updated (used mainly for webGL uv updates) * * @member {boolean} */ this.requiresUpdate = false; /** * The WebGL UV data cache. * * @member {object} * @private */ this._uvs = null; /** * The width of the Texture in pixels. * * @member {number} */ this.width = 0; /** * The height of the Texture in pixels. * * @member {number} */ this.height = 0; /** * This is the area of the BaseTexture image to actually copy to the Canvas / WebGL when rendering, * irrespective of the actual frame size or placement (which can be influenced by trimmed texture atlases) * * @member {Rectangle} */ this.crop = crop || new math.Rectangle(0, 0, 1, 1); if (baseTexture.hasLoaded) { if (this.noFrame) { frame = new math.Rectangle(0, 0, baseTexture.width, baseTexture.height); } this.frame = frame; } else { baseTexture.addEventListener('loaded', this.onBaseTextureLoaded.bind(this)); } } Texture.prototype.constructor = Texture; module.exports = Texture; eventTarget.mixin(Texture.prototype); Object.defineProperties(Texture.prototype, { needsUpdate: { get: function () { return this.baseTexture.needsUpdate; }, set: function (val) { this.baseTexture.needsUpdate = val; } }, frame: { get: function () { return this._frame; }, set: function (frame) { this._frame = frame; this.noFrame = false; this.width = frame.width; this.height = frame.height; this.crop.x = frame.x; this.crop.y = frame.y; this.crop.width = frame.width; this.crop.height = frame.height; if (!this.trim && (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height)) { throw new Error('Texture Error: frame does not fit inside the base Texture dimensions ' + this); } this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; if (this.trim) { this.width = this.trim.width; this.height = this.trim.height; this._frame.width = this.trim.width; this._frame.height = this.trim.height; } if (this.valid) { this._updateUvs(); } } } }); /** * Called when the base texture is loaded * * @private */ Texture.prototype.onBaseTextureLoaded = function () { var baseTexture = this.baseTexture; baseTexture.removeEventListener('loaded', this.onLoaded); // TODO this code looks confusing.. boo to abusing getters and setterss! if (this.noFrame) { this.frame = new math.Rectangle(0, 0, baseTexture.width, baseTexture.height); } else { this.frame = this._frame; } this.dispatchEvent( { type: 'update', content: this } ); }; /** * Destroys this texture * * @param destroyBase {boolean} Whether to destroy the base texture as well */ Texture.prototype.destroy = function (destroyBase) { if (destroyBase) { this.baseTexture.destroy(); } this.valid = false; }; /** * Updates the internal WebGL UV cache. * * @private */ Texture.prototype._updateUvs = function () { if (!this._uvs) { this._uvs = new TextureUvs(); } var frame = this.crop; var tw = this.baseTexture.width; var th = this.baseTexture.height; this._uvs.x0 = frame.x / tw; this._uvs.y0 = frame.y / th; this._uvs.x1 = (frame.x + frame.width) / tw; this._uvs.y1 = frame.y / th; this._uvs.x2 = (frame.x + frame.width) / tw; this._uvs.y2 = (frame.y + frame.height) / th; this._uvs.x3 = frame.x / tw; this._uvs.y3 = (frame.y + frame.height) / th; }; /** * Helper function that creates a Texture object from the given image url. * If the image is not in the texture cache it will be created and loaded. * * @static * @param imageUrl {string} The image url of the texture * @param crossorigin {boolean} Whether requests should be treated as crossorigin * @param scaleMode {number} See {{#crossLink "PIXI/scaleModes:property"}}scaleModes{{/crossLink}} for possible values * @return Texture */ Texture.fromImage = function (imageUrl, crossorigin, scaleMode) { var texture = utils.TextureCache[imageUrl]; if (!texture) { texture = new Texture(BaseTexture.fromImage(imageUrl, crossorigin, scaleMode)); utils.TextureCache[imageUrl] = texture; } return texture; }; /** * Helper function that creates a new Texture based on the given canvas element. * * @static * @param canvas {Canvas} The canvas element source of the texture * @param scaleMode {number} See {{#crossLink "PIXI/scaleModes:property"}}scaleModes{{/crossLink}} for possible values * @return {Texture} */ Texture.fromCanvas = function (canvas, scaleMode) { return new Texture(BaseTexture.fromCanvas(canvas, scaleMode)); }; /** * Helper function that creates a new Texture based on the given video element. * * @static * @param video {HTMLVideoElement} * @param scaleMode {number} See {{#crossLink "PIXI/scaleModes:property"}}scaleModes{{/crossLink}} for possible values * @return {Texture} A Texture */ Texture.fromVideo = function (video, scaleMode) { return new Texture(VideoBaseTexture.baseTextureFromVideo(video, scaleMode)); }; /** * Adds a texture to the global utils.TextureCache. This cache is shared across the whole PIXI object. * * @static * @param texture {Texture} The Texture to add to the cache. * @param id {string} The id that the texture will be stored against. */ Texture.addTextureToCache = function (texture, id) { utils.TextureCache[id] = texture; }; /** * Remove a texture from the global utils.TextureCache. * * @static * @param id {string} The id of the texture to be removed * @return {Texture} The texture that was removed */ Texture.removeTextureFromCache = function (id) { var texture = utils.TextureCache[id]; delete utils.TextureCache[id]; delete utils.BaseTextureCache[id]; return texture; }; Texture.emptyTexture = new Texture(new BaseTexture());