diff --git a/src/textures/BaseTexture.js b/src/textures/BaseTexture.js index 0145849..bd9ebad 100644 --- a/src/textures/BaseTexture.js +++ b/src/textures/BaseTexture.js @@ -1,62 +1,52 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +BaseTextureCache = {}; -PIXI.BaseTextureCache = {}; - -PIXI.BaseTextureCacheIdGenerator = 0; +BaseTextureCacheIdGenerator = 0; /** * A texture stores the information that represents an image. All textures have a base texture. * - * @class BaseTexture - * @uses EventTarget - * @constructor - * @param source {String} the source object (image or canvas) - * @param scaleMode {Number} See {{#crossLink "PIXI/scaleModes:property"}}PIXI.scaleModes{{/crossLink}} for possible values + * @class + * @mixes EventTarget + * @namespace PIXI + * @param source {string} the source object (image or canvas) + * @param scaleMode {number} See {{#crossLink "PIXI/scaleModes:property"}}scaleModes{{/crossLink}} for possible values */ -PIXI.BaseTexture = function(source, scaleMode) -{ +function BaseTexture(source, scaleMode) { /** - * The Resolution of the texture. + * The Resolution of the texture. * - * @property resolution - * @type Number + * @member {number} */ this.resolution = 1; - + /** - * [read-only] The width of the base texture set when the image has loaded + * The width of the base texture set when the image has loaded * - * @property width - * @type Number + * @member {number} * @readOnly */ this.width = 100; /** - * [read-only] The height of the base texture set when the image has loaded + * The height of the base texture set when the image has loaded * - * @property height - * @type Number + * @member {number} * @readOnly */ this.height = 100; /** * The scale mode to apply when scaling this texture - * - * @property scaleMode - * @type {Number} - * @default PIXI.scaleModes.LINEAR + * + * @member {{number}} + * @default scaleModes.LINEAR */ - this.scaleMode = scaleMode || PIXI.scaleModes.DEFAULT; + this.scaleMode = scaleMode || scaleModes.DEFAULT; /** - * [read-only] Set to true once the base texture has loaded + * Set to true once the base texture has loaded * - * @property hasLoaded - * @type Boolean + * @member {boolean} * @readOnly */ this.hasLoaded = false; @@ -64,18 +54,16 @@ /** * The image source that is used to create the texture. * - * @property source - * @type Image + * @member {Image} */ this.source = source; - this._UID = PIXI._UID++; + this._UID = _UID++; /** * Controls if RGB channels should be pre-multiplied by Alpha (WebGL only) * - * @property premultipliedAlpha - * @type Boolean + * @member {boolean} * @default true */ this.premultipliedAlpha = true; @@ -83,8 +71,7 @@ // used for webGL /** - * @property _glTextures - * @type Array + * @member {Array} * @private */ this._glTextures = []; @@ -93,9 +80,8 @@ * * Set this to true if a mipmap of this texture needs to be generated. This value needs to be set before the texture is used * Also the texture must be a power of two size to work - * - * @property mipmap - * @type {Boolean} + * + * @member {{boolean}} */ this.mipmap = false; @@ -103,26 +89,25 @@ // TODO - this needs to be addressed /** - * @property _dirty - * @type Array + * @member {Array} * @private */ this._dirty = [true, true, true, true]; - if(!source)return; + if (!source) { + return; + } - if((this.source.complete || this.source.getContext) && this.source.width && this.source.height) - { + if ((this.source.complete || this.source.getContext) && this.source.width && this.source.height) { this.hasLoaded = true; this.width = this.source.naturalWidth || this.source.width; this.height = this.source.naturalHeight || this.source.height; this.dirty(); } - else - { + else { var scope = this; - this.source.onload = function() { + this.source.onload = function () { scope.hasLoaded = true; scope.width = scope.source.naturalWidth || scope.source.width; @@ -134,47 +119,41 @@ scope.dispatchEvent( { type: 'loaded', content: scope } ); }; - this.source.onerror = function() { + this.source.onerror = function () { scope.dispatchEvent( { type: 'error', content: scope } ); }; } /** - * @property imageUrl - * @type String + * @member {string} */ this.imageUrl = null; /** - * @property _powerOf2 - * @type Boolean + * @member {boolean} * @private */ this._powerOf2 = false; +} -}; +BaseTexture.prototype.constructor = BaseTexture; +module.exports = BaseTexture; -PIXI.BaseTexture.prototype.constructor = PIXI.BaseTexture; - -PIXI.EventTarget.mixin(PIXI.BaseTexture.prototype); +EventTarget.mixin(BaseTexture.prototype); /** * Destroys this base texture * - * @method destroy */ -PIXI.BaseTexture.prototype.destroy = function() -{ - if(this.imageUrl) - { - delete PIXI.BaseTextureCache[this.imageUrl]; - delete PIXI.TextureCache[this.imageUrl]; +BaseTexture.prototype.destroy = function () { + if (this.imageUrl) { + delete BaseTextureCache[this.imageUrl]; + delete TextureCache[this.imageUrl]; this.imageUrl = null; if (!navigator.isCocoonJS) this.source.src = ''; } - else if (this.source && this.source._pixiId) - { - delete PIXI.BaseTextureCache[this.source._pixiId]; + else if (this.source && this.source._pixiId) { + delete BaseTextureCache[this.source._pixiId]; } this.source = null; @@ -184,11 +163,9 @@ /** * Changes the source image of the texture * - * @method updateSourceImage - * @param newSrc {String} the path of the image + * @param newSrc {string} the path of the image */ -PIXI.BaseTexture.prototype.updateSourceImage = function(newSrc) -{ +BaseTexture.prototype.updateSourceImage = function (newSrc) { this.hasLoaded = false; this.source.src = null; this.source.src = newSrc; @@ -197,12 +174,9 @@ /** * Sets all glTextures to be dirty. * - * @method dirty */ -PIXI.BaseTexture.prototype.dirty = function() -{ - for (var i = 0; i < this._glTextures.length; i++) - { +BaseTexture.prototype.dirty = function () { + for (var i = 0; i < this._glTextures.length; i++) { this._dirty[i] = true; } }; @@ -211,23 +185,19 @@ * Removes the base texture from the GPU, useful for managing resources on the GPU. * Atexture is still 100% usable and will simply be reuploaded if there is a sprite on screen that is using it. * - * @method unloadFromGPU */ -PIXI.BaseTexture.prototype.unloadFromGPU = function() -{ +BaseTexture.prototype.unloadFromGPU = function () { this.dirty(); // delete the webGL textures if any. - for (var i = this._glTextures.length - 1; i >= 0; i--) - { + for (var i = this._glTextures.length - 1; i >= 0; i--) { var glTexture = this._glTextures[i]; - var gl = PIXI.glContexts[i]; + var gl = glContexts[i]; - if(gl && glTexture) - { + if (gl && glTexture) { gl.deleteTexture(glTexture); } - + } this._glTextures.length = 0; @@ -240,36 +210,31 @@ * If the image is not in the base texture cache it will be created and loaded. * * @static - * @method fromImage - * @param imageUrl {String} The image url of the texture - * @param crossorigin {Boolean} - * @param scaleMode {Number} See {{#crossLink "PIXI/scaleModes:property"}}PIXI.scaleModes{{/crossLink}} for possible values + * @param imageUrl {string} The image url of the texture + * @param crossorigin {boolean} + * @param scaleMode {number} See {{#crossLink "PIXI/scaleModes:property"}}scaleModes{{/crossLink}} for possible values * @return BaseTexture */ -PIXI.BaseTexture.fromImage = function(imageUrl, crossorigin, scaleMode) -{ - var baseTexture = PIXI.BaseTextureCache[imageUrl]; +BaseTexture.fromImage = function (imageUrl, crossorigin, scaleMode) { + var baseTexture = BaseTextureCache[imageUrl]; - if(crossorigin === undefined && imageUrl.indexOf('data:') === -1) crossorigin = true; + if (crossorigin === undefined && imageUrl.indexOf('data:') === -1) crossorigin = true; - if(!baseTexture) - { + if (!baseTexture) { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 var image = new Image();//document.createElement('img'); - if (crossorigin) - { + if (crossorigin) { image.crossOrigin = ''; } image.src = imageUrl; - baseTexture = new PIXI.BaseTexture(image, scaleMode); + baseTexture = new BaseTexture(image, scaleMode); baseTexture.imageUrl = imageUrl; - PIXI.BaseTextureCache[imageUrl] = baseTexture; + BaseTextureCache[imageUrl] = baseTexture; // if there is an @2x at the end of the url we are going to assume its a highres image - if( imageUrl.indexOf(PIXI.RETINA_PREFIX + '.') !== -1) - { + if ( imageUrl.indexOf(RETINA_PREFIX + '.') !== -1) { baseTexture.resolution = 2; } } @@ -281,24 +246,20 @@ * Helper function that creates a base texture from the given canvas element. * * @static - * @method fromCanvas * @param canvas {Canvas} The canvas element source of the texture - * @param scaleMode {Number} See {{#crossLink "PIXI/scaleModes:property"}}PIXI.scaleModes{{/crossLink}} for possible values + * @param scaleMode {number} See {{#crossLink "PIXI/scaleModes:property"}}scaleModes{{/crossLink}} for possible values * @return BaseTexture */ -PIXI.BaseTexture.fromCanvas = function(canvas, scaleMode) -{ - if(!canvas._pixiId) - { - canvas._pixiId = 'canvas_' + PIXI.TextureCacheIdGenerator++; +BaseTexture.fromCanvas = function (canvas, scaleMode) { + if (!canvas._pixiId) { + canvas._pixiId = 'canvas_' + TextureCacheIdGenerator++; } - var baseTexture = PIXI.BaseTextureCache[canvas._pixiId]; + var baseTexture = BaseTextureCache[canvas._pixiId]; - if(!baseTexture) - { - baseTexture = new PIXI.BaseTexture(canvas, scaleMode); - PIXI.BaseTextureCache[canvas._pixiId] = baseTexture; + if (!baseTexture) { + baseTexture = new BaseTexture(canvas, scaleMode); + BaseTextureCache[canvas._pixiId] = baseTexture; } return baseTexture; diff --git a/src/textures/BaseTexture.js b/src/textures/BaseTexture.js index 0145849..bd9ebad 100644 --- a/src/textures/BaseTexture.js +++ b/src/textures/BaseTexture.js @@ -1,62 +1,52 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +BaseTextureCache = {}; -PIXI.BaseTextureCache = {}; - -PIXI.BaseTextureCacheIdGenerator = 0; +BaseTextureCacheIdGenerator = 0; /** * A texture stores the information that represents an image. All textures have a base texture. * - * @class BaseTexture - * @uses EventTarget - * @constructor - * @param source {String} the source object (image or canvas) - * @param scaleMode {Number} See {{#crossLink "PIXI/scaleModes:property"}}PIXI.scaleModes{{/crossLink}} for possible values + * @class + * @mixes EventTarget + * @namespace PIXI + * @param source {string} the source object (image or canvas) + * @param scaleMode {number} See {{#crossLink "PIXI/scaleModes:property"}}scaleModes{{/crossLink}} for possible values */ -PIXI.BaseTexture = function(source, scaleMode) -{ +function BaseTexture(source, scaleMode) { /** - * The Resolution of the texture. + * The Resolution of the texture. * - * @property resolution - * @type Number + * @member {number} */ this.resolution = 1; - + /** - * [read-only] The width of the base texture set when the image has loaded + * The width of the base texture set when the image has loaded * - * @property width - * @type Number + * @member {number} * @readOnly */ this.width = 100; /** - * [read-only] The height of the base texture set when the image has loaded + * The height of the base texture set when the image has loaded * - * @property height - * @type Number + * @member {number} * @readOnly */ this.height = 100; /** * The scale mode to apply when scaling this texture - * - * @property scaleMode - * @type {Number} - * @default PIXI.scaleModes.LINEAR + * + * @member {{number}} + * @default scaleModes.LINEAR */ - this.scaleMode = scaleMode || PIXI.scaleModes.DEFAULT; + this.scaleMode = scaleMode || scaleModes.DEFAULT; /** - * [read-only] Set to true once the base texture has loaded + * Set to true once the base texture has loaded * - * @property hasLoaded - * @type Boolean + * @member {boolean} * @readOnly */ this.hasLoaded = false; @@ -64,18 +54,16 @@ /** * The image source that is used to create the texture. * - * @property source - * @type Image + * @member {Image} */ this.source = source; - this._UID = PIXI._UID++; + this._UID = _UID++; /** * Controls if RGB channels should be pre-multiplied by Alpha (WebGL only) * - * @property premultipliedAlpha - * @type Boolean + * @member {boolean} * @default true */ this.premultipliedAlpha = true; @@ -83,8 +71,7 @@ // used for webGL /** - * @property _glTextures - * @type Array + * @member {Array} * @private */ this._glTextures = []; @@ -93,9 +80,8 @@ * * Set this to true if a mipmap of this texture needs to be generated. This value needs to be set before the texture is used * Also the texture must be a power of two size to work - * - * @property mipmap - * @type {Boolean} + * + * @member {{boolean}} */ this.mipmap = false; @@ -103,26 +89,25 @@ // TODO - this needs to be addressed /** - * @property _dirty - * @type Array + * @member {Array} * @private */ this._dirty = [true, true, true, true]; - if(!source)return; + if (!source) { + return; + } - if((this.source.complete || this.source.getContext) && this.source.width && this.source.height) - { + if ((this.source.complete || this.source.getContext) && this.source.width && this.source.height) { this.hasLoaded = true; this.width = this.source.naturalWidth || this.source.width; this.height = this.source.naturalHeight || this.source.height; this.dirty(); } - else - { + else { var scope = this; - this.source.onload = function() { + this.source.onload = function () { scope.hasLoaded = true; scope.width = scope.source.naturalWidth || scope.source.width; @@ -134,47 +119,41 @@ scope.dispatchEvent( { type: 'loaded', content: scope } ); }; - this.source.onerror = function() { + this.source.onerror = function () { scope.dispatchEvent( { type: 'error', content: scope } ); }; } /** - * @property imageUrl - * @type String + * @member {string} */ this.imageUrl = null; /** - * @property _powerOf2 - * @type Boolean + * @member {boolean} * @private */ this._powerOf2 = false; +} -}; +BaseTexture.prototype.constructor = BaseTexture; +module.exports = BaseTexture; -PIXI.BaseTexture.prototype.constructor = PIXI.BaseTexture; - -PIXI.EventTarget.mixin(PIXI.BaseTexture.prototype); +EventTarget.mixin(BaseTexture.prototype); /** * Destroys this base texture * - * @method destroy */ -PIXI.BaseTexture.prototype.destroy = function() -{ - if(this.imageUrl) - { - delete PIXI.BaseTextureCache[this.imageUrl]; - delete PIXI.TextureCache[this.imageUrl]; +BaseTexture.prototype.destroy = function () { + if (this.imageUrl) { + delete BaseTextureCache[this.imageUrl]; + delete TextureCache[this.imageUrl]; this.imageUrl = null; if (!navigator.isCocoonJS) this.source.src = ''; } - else if (this.source && this.source._pixiId) - { - delete PIXI.BaseTextureCache[this.source._pixiId]; + else if (this.source && this.source._pixiId) { + delete BaseTextureCache[this.source._pixiId]; } this.source = null; @@ -184,11 +163,9 @@ /** * Changes the source image of the texture * - * @method updateSourceImage - * @param newSrc {String} the path of the image + * @param newSrc {string} the path of the image */ -PIXI.BaseTexture.prototype.updateSourceImage = function(newSrc) -{ +BaseTexture.prototype.updateSourceImage = function (newSrc) { this.hasLoaded = false; this.source.src = null; this.source.src = newSrc; @@ -197,12 +174,9 @@ /** * Sets all glTextures to be dirty. * - * @method dirty */ -PIXI.BaseTexture.prototype.dirty = function() -{ - for (var i = 0; i < this._glTextures.length; i++) - { +BaseTexture.prototype.dirty = function () { + for (var i = 0; i < this._glTextures.length; i++) { this._dirty[i] = true; } }; @@ -211,23 +185,19 @@ * Removes the base texture from the GPU, useful for managing resources on the GPU. * Atexture is still 100% usable and will simply be reuploaded if there is a sprite on screen that is using it. * - * @method unloadFromGPU */ -PIXI.BaseTexture.prototype.unloadFromGPU = function() -{ +BaseTexture.prototype.unloadFromGPU = function () { this.dirty(); // delete the webGL textures if any. - for (var i = this._glTextures.length - 1; i >= 0; i--) - { + for (var i = this._glTextures.length - 1; i >= 0; i--) { var glTexture = this._glTextures[i]; - var gl = PIXI.glContexts[i]; + var gl = glContexts[i]; - if(gl && glTexture) - { + if (gl && glTexture) { gl.deleteTexture(glTexture); } - + } this._glTextures.length = 0; @@ -240,36 +210,31 @@ * If the image is not in the base texture cache it will be created and loaded. * * @static - * @method fromImage - * @param imageUrl {String} The image url of the texture - * @param crossorigin {Boolean} - * @param scaleMode {Number} See {{#crossLink "PIXI/scaleModes:property"}}PIXI.scaleModes{{/crossLink}} for possible values + * @param imageUrl {string} The image url of the texture + * @param crossorigin {boolean} + * @param scaleMode {number} See {{#crossLink "PIXI/scaleModes:property"}}scaleModes{{/crossLink}} for possible values * @return BaseTexture */ -PIXI.BaseTexture.fromImage = function(imageUrl, crossorigin, scaleMode) -{ - var baseTexture = PIXI.BaseTextureCache[imageUrl]; +BaseTexture.fromImage = function (imageUrl, crossorigin, scaleMode) { + var baseTexture = BaseTextureCache[imageUrl]; - if(crossorigin === undefined && imageUrl.indexOf('data:') === -1) crossorigin = true; + if (crossorigin === undefined && imageUrl.indexOf('data:') === -1) crossorigin = true; - if(!baseTexture) - { + if (!baseTexture) { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 var image = new Image();//document.createElement('img'); - if (crossorigin) - { + if (crossorigin) { image.crossOrigin = ''; } image.src = imageUrl; - baseTexture = new PIXI.BaseTexture(image, scaleMode); + baseTexture = new BaseTexture(image, scaleMode); baseTexture.imageUrl = imageUrl; - PIXI.BaseTextureCache[imageUrl] = baseTexture; + BaseTextureCache[imageUrl] = baseTexture; // if there is an @2x at the end of the url we are going to assume its a highres image - if( imageUrl.indexOf(PIXI.RETINA_PREFIX + '.') !== -1) - { + if ( imageUrl.indexOf(RETINA_PREFIX + '.') !== -1) { baseTexture.resolution = 2; } } @@ -281,24 +246,20 @@ * Helper function that creates a base texture from the given canvas element. * * @static - * @method fromCanvas * @param canvas {Canvas} The canvas element source of the texture - * @param scaleMode {Number} See {{#crossLink "PIXI/scaleModes:property"}}PIXI.scaleModes{{/crossLink}} for possible values + * @param scaleMode {number} See {{#crossLink "PIXI/scaleModes:property"}}scaleModes{{/crossLink}} for possible values * @return BaseTexture */ -PIXI.BaseTexture.fromCanvas = function(canvas, scaleMode) -{ - if(!canvas._pixiId) - { - canvas._pixiId = 'canvas_' + PIXI.TextureCacheIdGenerator++; +BaseTexture.fromCanvas = function (canvas, scaleMode) { + if (!canvas._pixiId) { + canvas._pixiId = 'canvas_' + TextureCacheIdGenerator++; } - var baseTexture = PIXI.BaseTextureCache[canvas._pixiId]; + var baseTexture = BaseTextureCache[canvas._pixiId]; - if(!baseTexture) - { - baseTexture = new PIXI.BaseTexture(canvas, scaleMode); - PIXI.BaseTextureCache[canvas._pixiId] = baseTexture; + if (!baseTexture) { + baseTexture = new BaseTexture(canvas, scaleMode); + BaseTextureCache[canvas._pixiId] = baseTexture; } return baseTexture; diff --git a/src/textures/RenderTexture.js b/src/textures/RenderTexture.js index 37dd7c8..61a238c 100644 --- a/src/textures/RenderTexture.js +++ b/src/textures/RenderTexture.js @@ -1,13 +1,11 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. * - * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded otherwise black rectangles will be drawn instead. + * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded + * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. The position + * and rotation of the given Display Objects is ignored. For example: * * var renderTexture = new PIXI.RenderTexture(800, 600); * var sprite = PIXI.Sprite.fromImage("spinObj_01.png"); @@ -17,133 +15,122 @@ * sprite.anchor.y = 0.5; * renderTexture.render(sprite); * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual position a DisplayObjectContainer should be used: + * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual + * position a DisplayObjectContainer should be used: * - * var doc = new PIXI.DisplayObjectContainer(); + * var doc = new DisplayObjectContainer(); * doc.addChild(sprite); * renderTexture.render(doc); // Renders to center of renderTexture * - * @class RenderTexture + * @class * @extends Texture - * @constructor - * @param width {Number} The width of the render texture - * @param height {Number} The height of the render texture + * @namespace PIXI + * @param width {number} The width of the render texture + * @param height {number} The height of the render texture * @param renderer {CanvasRenderer|WebGLRenderer} The renderer used for this RenderTexture - * @param scaleMode {Number} See {{#crossLink "PIXI/scaleModes:property"}}PIXI.scaleModes{{/crossLink}} for possible values - * @param resolution {Number} The resolution of the texture being generated + * @param scaleMode {number} See {@link scaleModes} for possible values + * @param resolution {number} The resolution of the texture being generated */ -PIXI.RenderTexture = function(width, height, renderer, scaleMode, resolution) -{ +function RenderTexture(width, height, renderer, scaleMode, resolution) { /** * The with of the render texture * - * @property width - * @type Number + * @member {number} */ this.width = width || 100; /** * The height of the render texture * - * @property height - * @type Number + * @member {number} */ this.height = height || 100; /** * The Resolution of the texture. * - * @property resolution - * @type Number + * @member {number} */ this.resolution = resolution || 1; /** * The framing rectangle of the render texture * - * @property frame - * @type Rectangle + * @member {Rectangle} */ - this.frame = new PIXI.Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); + this.frame = new Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); /** * 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) * - * @property crop - * @type Rectangle + * @member {Rectangle} */ - this.crop = new PIXI.Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); + this.crop = new Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); /** * The base texture object that this texture uses * - * @property baseTexture - * @type BaseTexture + * @member {BaseTexture} */ - this.baseTexture = new PIXI.BaseTexture(); + this.baseTexture = new BaseTexture(); this.baseTexture.width = this.width * this.resolution; this.baseTexture.height = this.height * this.resolution; this.baseTexture._glTextures = []; this.baseTexture.resolution = this.resolution; - this.baseTexture.scaleMode = scaleMode || PIXI.scaleModes.DEFAULT; + this.baseTexture.scaleMode = scaleMode || scaleModes.DEFAULT; this.baseTexture.hasLoaded = true; - PIXI.Texture.call(this, + Texture.call(this, this.baseTexture, - new PIXI.Rectangle(0, 0, this.width, this.height) + new Rectangle(0, 0, this.width, this.height) ); /** * The renderer this RenderTexture uses. A RenderTexture can only belong to one renderer at the moment if its webGL. * - * @property renderer - * @type CanvasRenderer|WebGLRenderer + * @member {CanvasRenderer|WebGLRenderer} */ - this.renderer = renderer || PIXI.defaultRenderer; + this.renderer = renderer || defaultRenderer; - if(this.renderer.type === PIXI.WEBGL_RENDERER) - { + if (this.renderer.type === WEBGL_RENDERER) { var gl = this.renderer.gl; this.baseTexture._dirty[gl.id] = false; - this.textureBuffer = new PIXI.FilterTexture(gl, this.width * this.resolution, this.height * this.resolution, this.baseTexture.scaleMode); + this.textureBuffer = new FilterTexture(gl, this.width * this.resolution, this.height * this.resolution, this.baseTexture.scaleMode); this.baseTexture._glTextures[gl.id] = this.textureBuffer.texture; this.render = this.renderWebGL; - this.projection = new PIXI.Point(this.width*0.5, -this.height*0.5); + this.projection = new Point(this.width*0.5, -this.height*0.5); } - else - { + else { this.render = this.renderCanvas; - this.textureBuffer = new PIXI.CanvasBuffer(this.width* this.resolution, this.height* this.resolution); + this.textureBuffer = new CanvasBuffer(this.width* this.resolution, this.height* this.resolution); this.baseTexture.source = this.textureBuffer.canvas; } /** - * @property valid - * @type Boolean + * @member {boolean} */ this.valid = true; this._updateUvs(); -}; +} -PIXI.RenderTexture.prototype = Object.create(PIXI.Texture.prototype); -PIXI.RenderTexture.prototype.constructor = PIXI.RenderTexture; +RenderTexture.prototype = Object.create(Texture.prototype); +RenderTexture.prototype.constructor = RenderTexture; +module.exports = RenderTexture; /** * Resizes the RenderTexture. * - * @method resize - * @param width {Number} The width to resize to. - * @param height {Number} The height to resize to. - * @param updateBase {Boolean} Should the baseTexture.width and height values be resized as well? + * @param width {number} The width to resize to. + * @param height {number} The height to resize to. + * @param updateBase {boolean} Should the baseTexture.width and height values be resized as well? */ -PIXI.RenderTexture.prototype.resize = function(width, height, updateBase) -{ +RenderTexture.prototype.resize = function (width, height, updateBase) { if (width === this.width && height === this.height)return; this.valid = (width > 0 && height > 0); @@ -151,19 +138,17 @@ this.width = this.frame.width = this.crop.width = width; this.height = this.frame.height = this.crop.height = height; - if (updateBase) - { + if (updateBase) { this.baseTexture.width = this.width; this.baseTexture.height = this.height; } - if (this.renderer.type === PIXI.WEBGL_RENDERER) - { + if (this.renderer.type === WEBGL_RENDERER) { this.projection.x = this.width / 2; this.projection.y = -this.height / 2; } - if(!this.valid)return; + if (!this.valid)return; this.textureBuffer.resize(this.width * this.resolution, this.height * this.resolution); }; @@ -171,14 +156,11 @@ /** * Clears the RenderTexture. * - * @method clear */ -PIXI.RenderTexture.prototype.clear = function() -{ - if(!this.valid)return; +RenderTexture.prototype.clear = function () { + if (!this.valid)return; - if (this.renderer.type === PIXI.WEBGL_RENDERER) - { + if (this.renderer.type === WEBGL_RENDERER) { this.renderer.gl.bindFramebuffer(this.renderer.gl.FRAMEBUFFER, this.textureBuffer.frameBuffer); } @@ -188,35 +170,32 @@ /** * This function will draw the display object to the texture. * - * @method renderWebGL * @param displayObject {DisplayObject} The display object to render this texture on * @param [matrix] {Matrix} Optional matrix to apply to the display object before rendering. - * @param [clear] {Boolean} If true the texture will be cleared before the displayObject is drawn + * @param [clear] {boolean} If true the texture will be cleared before the displayObject is drawn * @private */ -PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, matrix, clear) -{ - if(!this.valid)return; +RenderTexture.prototype.renderWebGL = function (displayObject, matrix, clear) { + if (!this.valid)return; //TOOD replace position with matrix.. - - //Lets create a nice matrix to apply to our display object. Frame buffers come in upside down so we need to flip the matrix + + //Lets create a nice matrix to apply to our display object. Frame buffers come in upside down so we need to flip the matrix var wt = displayObject.worldTransform; wt.identity(); wt.translate(0, this.projection.y * 2); - if(matrix)wt.append(matrix); + if (matrix)wt.append(matrix); wt.scale(1,-1); // setWorld Alpha to ensure that the object is renderer at full opacity displayObject.worldAlpha = 1; - // Time to update all the children of the displayObject with the new matrix.. + // Time to update all the children of the displayObject with the new matrix.. var children = displayObject.children; - for(var i=0,j=children.length; i= 0; i--) - { + for (var i = this._glTextures.length - 1; i >= 0; i--) { var glTexture = this._glTextures[i]; - var gl = PIXI.glContexts[i]; + var gl = glContexts[i]; - if(gl && glTexture) - { + if (gl && glTexture) { gl.deleteTexture(glTexture); } - + } this._glTextures.length = 0; @@ -240,36 +210,31 @@ * If the image is not in the base texture cache it will be created and loaded. * * @static - * @method fromImage - * @param imageUrl {String} The image url of the texture - * @param crossorigin {Boolean} - * @param scaleMode {Number} See {{#crossLink "PIXI/scaleModes:property"}}PIXI.scaleModes{{/crossLink}} for possible values + * @param imageUrl {string} The image url of the texture + * @param crossorigin {boolean} + * @param scaleMode {number} See {{#crossLink "PIXI/scaleModes:property"}}scaleModes{{/crossLink}} for possible values * @return BaseTexture */ -PIXI.BaseTexture.fromImage = function(imageUrl, crossorigin, scaleMode) -{ - var baseTexture = PIXI.BaseTextureCache[imageUrl]; +BaseTexture.fromImage = function (imageUrl, crossorigin, scaleMode) { + var baseTexture = BaseTextureCache[imageUrl]; - if(crossorigin === undefined && imageUrl.indexOf('data:') === -1) crossorigin = true; + if (crossorigin === undefined && imageUrl.indexOf('data:') === -1) crossorigin = true; - if(!baseTexture) - { + if (!baseTexture) { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 var image = new Image();//document.createElement('img'); - if (crossorigin) - { + if (crossorigin) { image.crossOrigin = ''; } image.src = imageUrl; - baseTexture = new PIXI.BaseTexture(image, scaleMode); + baseTexture = new BaseTexture(image, scaleMode); baseTexture.imageUrl = imageUrl; - PIXI.BaseTextureCache[imageUrl] = baseTexture; + BaseTextureCache[imageUrl] = baseTexture; // if there is an @2x at the end of the url we are going to assume its a highres image - if( imageUrl.indexOf(PIXI.RETINA_PREFIX + '.') !== -1) - { + if ( imageUrl.indexOf(RETINA_PREFIX + '.') !== -1) { baseTexture.resolution = 2; } } @@ -281,24 +246,20 @@ * Helper function that creates a base texture from the given canvas element. * * @static - * @method fromCanvas * @param canvas {Canvas} The canvas element source of the texture - * @param scaleMode {Number} See {{#crossLink "PIXI/scaleModes:property"}}PIXI.scaleModes{{/crossLink}} for possible values + * @param scaleMode {number} See {{#crossLink "PIXI/scaleModes:property"}}scaleModes{{/crossLink}} for possible values * @return BaseTexture */ -PIXI.BaseTexture.fromCanvas = function(canvas, scaleMode) -{ - if(!canvas._pixiId) - { - canvas._pixiId = 'canvas_' + PIXI.TextureCacheIdGenerator++; +BaseTexture.fromCanvas = function (canvas, scaleMode) { + if (!canvas._pixiId) { + canvas._pixiId = 'canvas_' + TextureCacheIdGenerator++; } - var baseTexture = PIXI.BaseTextureCache[canvas._pixiId]; + var baseTexture = BaseTextureCache[canvas._pixiId]; - if(!baseTexture) - { - baseTexture = new PIXI.BaseTexture(canvas, scaleMode); - PIXI.BaseTextureCache[canvas._pixiId] = baseTexture; + if (!baseTexture) { + baseTexture = new BaseTexture(canvas, scaleMode); + BaseTextureCache[canvas._pixiId] = baseTexture; } return baseTexture; diff --git a/src/textures/RenderTexture.js b/src/textures/RenderTexture.js index 37dd7c8..61a238c 100644 --- a/src/textures/RenderTexture.js +++ b/src/textures/RenderTexture.js @@ -1,13 +1,11 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. * - * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded otherwise black rectangles will be drawn instead. + * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded + * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. The position + * and rotation of the given Display Objects is ignored. For example: * * var renderTexture = new PIXI.RenderTexture(800, 600); * var sprite = PIXI.Sprite.fromImage("spinObj_01.png"); @@ -17,133 +15,122 @@ * sprite.anchor.y = 0.5; * renderTexture.render(sprite); * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual position a DisplayObjectContainer should be used: + * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual + * position a DisplayObjectContainer should be used: * - * var doc = new PIXI.DisplayObjectContainer(); + * var doc = new DisplayObjectContainer(); * doc.addChild(sprite); * renderTexture.render(doc); // Renders to center of renderTexture * - * @class RenderTexture + * @class * @extends Texture - * @constructor - * @param width {Number} The width of the render texture - * @param height {Number} The height of the render texture + * @namespace PIXI + * @param width {number} The width of the render texture + * @param height {number} The height of the render texture * @param renderer {CanvasRenderer|WebGLRenderer} The renderer used for this RenderTexture - * @param scaleMode {Number} See {{#crossLink "PIXI/scaleModes:property"}}PIXI.scaleModes{{/crossLink}} for possible values - * @param resolution {Number} The resolution of the texture being generated + * @param scaleMode {number} See {@link scaleModes} for possible values + * @param resolution {number} The resolution of the texture being generated */ -PIXI.RenderTexture = function(width, height, renderer, scaleMode, resolution) -{ +function RenderTexture(width, height, renderer, scaleMode, resolution) { /** * The with of the render texture * - * @property width - * @type Number + * @member {number} */ this.width = width || 100; /** * The height of the render texture * - * @property height - * @type Number + * @member {number} */ this.height = height || 100; /** * The Resolution of the texture. * - * @property resolution - * @type Number + * @member {number} */ this.resolution = resolution || 1; /** * The framing rectangle of the render texture * - * @property frame - * @type Rectangle + * @member {Rectangle} */ - this.frame = new PIXI.Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); + this.frame = new Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); /** * 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) * - * @property crop - * @type Rectangle + * @member {Rectangle} */ - this.crop = new PIXI.Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); + this.crop = new Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); /** * The base texture object that this texture uses * - * @property baseTexture - * @type BaseTexture + * @member {BaseTexture} */ - this.baseTexture = new PIXI.BaseTexture(); + this.baseTexture = new BaseTexture(); this.baseTexture.width = this.width * this.resolution; this.baseTexture.height = this.height * this.resolution; this.baseTexture._glTextures = []; this.baseTexture.resolution = this.resolution; - this.baseTexture.scaleMode = scaleMode || PIXI.scaleModes.DEFAULT; + this.baseTexture.scaleMode = scaleMode || scaleModes.DEFAULT; this.baseTexture.hasLoaded = true; - PIXI.Texture.call(this, + Texture.call(this, this.baseTexture, - new PIXI.Rectangle(0, 0, this.width, this.height) + new Rectangle(0, 0, this.width, this.height) ); /** * The renderer this RenderTexture uses. A RenderTexture can only belong to one renderer at the moment if its webGL. * - * @property renderer - * @type CanvasRenderer|WebGLRenderer + * @member {CanvasRenderer|WebGLRenderer} */ - this.renderer = renderer || PIXI.defaultRenderer; + this.renderer = renderer || defaultRenderer; - if(this.renderer.type === PIXI.WEBGL_RENDERER) - { + if (this.renderer.type === WEBGL_RENDERER) { var gl = this.renderer.gl; this.baseTexture._dirty[gl.id] = false; - this.textureBuffer = new PIXI.FilterTexture(gl, this.width * this.resolution, this.height * this.resolution, this.baseTexture.scaleMode); + this.textureBuffer = new FilterTexture(gl, this.width * this.resolution, this.height * this.resolution, this.baseTexture.scaleMode); this.baseTexture._glTextures[gl.id] = this.textureBuffer.texture; this.render = this.renderWebGL; - this.projection = new PIXI.Point(this.width*0.5, -this.height*0.5); + this.projection = new Point(this.width*0.5, -this.height*0.5); } - else - { + else { this.render = this.renderCanvas; - this.textureBuffer = new PIXI.CanvasBuffer(this.width* this.resolution, this.height* this.resolution); + this.textureBuffer = new CanvasBuffer(this.width* this.resolution, this.height* this.resolution); this.baseTexture.source = this.textureBuffer.canvas; } /** - * @property valid - * @type Boolean + * @member {boolean} */ this.valid = true; this._updateUvs(); -}; +} -PIXI.RenderTexture.prototype = Object.create(PIXI.Texture.prototype); -PIXI.RenderTexture.prototype.constructor = PIXI.RenderTexture; +RenderTexture.prototype = Object.create(Texture.prototype); +RenderTexture.prototype.constructor = RenderTexture; +module.exports = RenderTexture; /** * Resizes the RenderTexture. * - * @method resize - * @param width {Number} The width to resize to. - * @param height {Number} The height to resize to. - * @param updateBase {Boolean} Should the baseTexture.width and height values be resized as well? + * @param width {number} The width to resize to. + * @param height {number} The height to resize to. + * @param updateBase {boolean} Should the baseTexture.width and height values be resized as well? */ -PIXI.RenderTexture.prototype.resize = function(width, height, updateBase) -{ +RenderTexture.prototype.resize = function (width, height, updateBase) { if (width === this.width && height === this.height)return; this.valid = (width > 0 && height > 0); @@ -151,19 +138,17 @@ this.width = this.frame.width = this.crop.width = width; this.height = this.frame.height = this.crop.height = height; - if (updateBase) - { + if (updateBase) { this.baseTexture.width = this.width; this.baseTexture.height = this.height; } - if (this.renderer.type === PIXI.WEBGL_RENDERER) - { + if (this.renderer.type === WEBGL_RENDERER) { this.projection.x = this.width / 2; this.projection.y = -this.height / 2; } - if(!this.valid)return; + if (!this.valid)return; this.textureBuffer.resize(this.width * this.resolution, this.height * this.resolution); }; @@ -171,14 +156,11 @@ /** * Clears the RenderTexture. * - * @method clear */ -PIXI.RenderTexture.prototype.clear = function() -{ - if(!this.valid)return; +RenderTexture.prototype.clear = function () { + if (!this.valid)return; - if (this.renderer.type === PIXI.WEBGL_RENDERER) - { + if (this.renderer.type === WEBGL_RENDERER) { this.renderer.gl.bindFramebuffer(this.renderer.gl.FRAMEBUFFER, this.textureBuffer.frameBuffer); } @@ -188,35 +170,32 @@ /** * This function will draw the display object to the texture. * - * @method renderWebGL * @param displayObject {DisplayObject} The display object to render this texture on * @param [matrix] {Matrix} Optional matrix to apply to the display object before rendering. - * @param [clear] {Boolean} If true the texture will be cleared before the displayObject is drawn + * @param [clear] {boolean} If true the texture will be cleared before the displayObject is drawn * @private */ -PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, matrix, clear) -{ - if(!this.valid)return; +RenderTexture.prototype.renderWebGL = function (displayObject, matrix, clear) { + if (!this.valid)return; //TOOD replace position with matrix.. - - //Lets create a nice matrix to apply to our display object. Frame buffers come in upside down so we need to flip the matrix + + //Lets create a nice matrix to apply to our display object. Frame buffers come in upside down so we need to flip the matrix var wt = displayObject.worldTransform; wt.identity(); wt.translate(0, this.projection.y * 2); - if(matrix)wt.append(matrix); + if (matrix)wt.append(matrix); wt.scale(1,-1); // setWorld Alpha to ensure that the object is renderer at full opacity displayObject.worldAlpha = 1; - // Time to update all the children of the displayObject with the new matrix.. + // Time to update all the children of the displayObject with the new matrix.. var children = displayObject.children; - for(var i=0,j=children.length; i this.baseTexture.width || frame.y + frame.height > this.baseTexture.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) - { + 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(); }; @@ -200,17 +177,17 @@ /** * Updates the internal WebGL UV cache. * - * @method _updateUvs * @private */ -PIXI.Texture.prototype._updateUvs = function() -{ - if(!this._uvs)this._uvs = new PIXI.TextureUvs(); +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; @@ -229,20 +206,17 @@ * If the image is not in the texture cache it will be created and loaded. * * @static - * @method fromImage - * @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"}}PIXI.scaleModes{{/crossLink}} for possible values + * @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 */ -PIXI.Texture.fromImage = function(imageUrl, crossorigin, scaleMode) -{ - var texture = PIXI.TextureCache[imageUrl]; +Texture.fromImage = function (imageUrl, crossorigin, scaleMode) { + var texture = TextureCache[imageUrl]; - if(!texture) - { - texture = new PIXI.Texture(PIXI.BaseTexture.fromImage(imageUrl, crossorigin, scaleMode)); - PIXI.TextureCache[imageUrl] = texture; + if (!texture) { + texture = new Texture(BaseTexture.fromImage(imageUrl, crossorigin, scaleMode)); + TextureCache[imageUrl] = texture; } return texture; @@ -253,14 +227,12 @@ * If the frame id is not in the texture cache an error will be thrown. * * @static - * @method fromFrame - * @param frameId {String} The frame id of the texture + * @param frameId {string} The frame id of the texture * @return Texture */ -PIXI.Texture.fromFrame = function(frameId) -{ - var texture = PIXI.TextureCache[frameId]; - if(!texture) throw new Error('The frameId "' + frameId + '" does not exist in the texture cache '); +Texture.fromFrame = function (frameId) { + var texture = TextureCache[frameId]; + if (!texture) throw new Error('The frameId "' + frameId + '" does not exist in the texture cache '); return texture; }; @@ -268,50 +240,45 @@ * Helper function that creates a new a Texture based on the given canvas element. * * @static - * @method fromCanvas * @param canvas {Canvas} The canvas element source of the texture - * @param scaleMode {Number} See {{#crossLink "PIXI/scaleModes:property"}}PIXI.scaleModes{{/crossLink}} for possible values + * @param scaleMode {number} See {{#crossLink "PIXI/scaleModes:property"}}scaleModes{{/crossLink}} for possible values * @return Texture */ -PIXI.Texture.fromCanvas = function(canvas, scaleMode) -{ - var baseTexture = PIXI.BaseTexture.fromCanvas(canvas, scaleMode); +Texture.fromCanvas = function (canvas, scaleMode) { + var baseTexture = BaseTexture.fromCanvas(canvas, scaleMode); - return new PIXI.Texture( baseTexture ); + return new Texture( baseTexture ); }; /** - * Adds a texture to the global PIXI.TextureCache. This cache is shared across the whole PIXI object. + * Adds a texture to the global TextureCache. This cache is shared across the whole PIXI object. * * @static - * @method addTextureToCache * @param texture {Texture} The Texture to add to the cache. - * @param id {String} The id that the texture will be stored against. + * @param id {string} The id that the texture will be stored against. */ -PIXI.Texture.addTextureToCache = function(texture, id) -{ - PIXI.TextureCache[id] = texture; +Texture.addTextureToCache = function (texture, id) { + TextureCache[id] = texture; }; /** - * Remove a texture from the global PIXI.TextureCache. + * Remove a texture from the global TextureCache. * * @static - * @method removeTextureFromCache - * @param id {String} The id of the texture to be removed + * @param id {string} The id of the texture to be removed * @return {Texture} The texture that was removed */ -PIXI.Texture.removeTextureFromCache = function(id) -{ - var texture = PIXI.TextureCache[id]; - delete PIXI.TextureCache[id]; - delete PIXI.BaseTextureCache[id]; +Texture.removeTextureFromCache = function (id) { + var texture = TextureCache[id]; + + delete TextureCache[id]; + delete BaseTextureCache[id]; + return texture; }; -PIXI.TextureUvs = function() -{ +function TextureUvs() { this.x0 = 0; this.y0 = 0; @@ -325,5 +292,5 @@ this.y3 = 0; }; -PIXI.Texture.emptyTexture = new PIXI.Texture(new PIXI.BaseTexture()); +Texture.emptyTexture = new Texture(new BaseTexture()); diff --git a/src/textures/BaseTexture.js b/src/textures/BaseTexture.js index 0145849..bd9ebad 100644 --- a/src/textures/BaseTexture.js +++ b/src/textures/BaseTexture.js @@ -1,62 +1,52 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +BaseTextureCache = {}; -PIXI.BaseTextureCache = {}; - -PIXI.BaseTextureCacheIdGenerator = 0; +BaseTextureCacheIdGenerator = 0; /** * A texture stores the information that represents an image. All textures have a base texture. * - * @class BaseTexture - * @uses EventTarget - * @constructor - * @param source {String} the source object (image or canvas) - * @param scaleMode {Number} See {{#crossLink "PIXI/scaleModes:property"}}PIXI.scaleModes{{/crossLink}} for possible values + * @class + * @mixes EventTarget + * @namespace PIXI + * @param source {string} the source object (image or canvas) + * @param scaleMode {number} See {{#crossLink "PIXI/scaleModes:property"}}scaleModes{{/crossLink}} for possible values */ -PIXI.BaseTexture = function(source, scaleMode) -{ +function BaseTexture(source, scaleMode) { /** - * The Resolution of the texture. + * The Resolution of the texture. * - * @property resolution - * @type Number + * @member {number} */ this.resolution = 1; - + /** - * [read-only] The width of the base texture set when the image has loaded + * The width of the base texture set when the image has loaded * - * @property width - * @type Number + * @member {number} * @readOnly */ this.width = 100; /** - * [read-only] The height of the base texture set when the image has loaded + * The height of the base texture set when the image has loaded * - * @property height - * @type Number + * @member {number} * @readOnly */ this.height = 100; /** * The scale mode to apply when scaling this texture - * - * @property scaleMode - * @type {Number} - * @default PIXI.scaleModes.LINEAR + * + * @member {{number}} + * @default scaleModes.LINEAR */ - this.scaleMode = scaleMode || PIXI.scaleModes.DEFAULT; + this.scaleMode = scaleMode || scaleModes.DEFAULT; /** - * [read-only] Set to true once the base texture has loaded + * Set to true once the base texture has loaded * - * @property hasLoaded - * @type Boolean + * @member {boolean} * @readOnly */ this.hasLoaded = false; @@ -64,18 +54,16 @@ /** * The image source that is used to create the texture. * - * @property source - * @type Image + * @member {Image} */ this.source = source; - this._UID = PIXI._UID++; + this._UID = _UID++; /** * Controls if RGB channels should be pre-multiplied by Alpha (WebGL only) * - * @property premultipliedAlpha - * @type Boolean + * @member {boolean} * @default true */ this.premultipliedAlpha = true; @@ -83,8 +71,7 @@ // used for webGL /** - * @property _glTextures - * @type Array + * @member {Array} * @private */ this._glTextures = []; @@ -93,9 +80,8 @@ * * Set this to true if a mipmap of this texture needs to be generated. This value needs to be set before the texture is used * Also the texture must be a power of two size to work - * - * @property mipmap - * @type {Boolean} + * + * @member {{boolean}} */ this.mipmap = false; @@ -103,26 +89,25 @@ // TODO - this needs to be addressed /** - * @property _dirty - * @type Array + * @member {Array} * @private */ this._dirty = [true, true, true, true]; - if(!source)return; + if (!source) { + return; + } - if((this.source.complete || this.source.getContext) && this.source.width && this.source.height) - { + if ((this.source.complete || this.source.getContext) && this.source.width && this.source.height) { this.hasLoaded = true; this.width = this.source.naturalWidth || this.source.width; this.height = this.source.naturalHeight || this.source.height; this.dirty(); } - else - { + else { var scope = this; - this.source.onload = function() { + this.source.onload = function () { scope.hasLoaded = true; scope.width = scope.source.naturalWidth || scope.source.width; @@ -134,47 +119,41 @@ scope.dispatchEvent( { type: 'loaded', content: scope } ); }; - this.source.onerror = function() { + this.source.onerror = function () { scope.dispatchEvent( { type: 'error', content: scope } ); }; } /** - * @property imageUrl - * @type String + * @member {string} */ this.imageUrl = null; /** - * @property _powerOf2 - * @type Boolean + * @member {boolean} * @private */ this._powerOf2 = false; +} -}; +BaseTexture.prototype.constructor = BaseTexture; +module.exports = BaseTexture; -PIXI.BaseTexture.prototype.constructor = PIXI.BaseTexture; - -PIXI.EventTarget.mixin(PIXI.BaseTexture.prototype); +EventTarget.mixin(BaseTexture.prototype); /** * Destroys this base texture * - * @method destroy */ -PIXI.BaseTexture.prototype.destroy = function() -{ - if(this.imageUrl) - { - delete PIXI.BaseTextureCache[this.imageUrl]; - delete PIXI.TextureCache[this.imageUrl]; +BaseTexture.prototype.destroy = function () { + if (this.imageUrl) { + delete BaseTextureCache[this.imageUrl]; + delete TextureCache[this.imageUrl]; this.imageUrl = null; if (!navigator.isCocoonJS) this.source.src = ''; } - else if (this.source && this.source._pixiId) - { - delete PIXI.BaseTextureCache[this.source._pixiId]; + else if (this.source && this.source._pixiId) { + delete BaseTextureCache[this.source._pixiId]; } this.source = null; @@ -184,11 +163,9 @@ /** * Changes the source image of the texture * - * @method updateSourceImage - * @param newSrc {String} the path of the image + * @param newSrc {string} the path of the image */ -PIXI.BaseTexture.prototype.updateSourceImage = function(newSrc) -{ +BaseTexture.prototype.updateSourceImage = function (newSrc) { this.hasLoaded = false; this.source.src = null; this.source.src = newSrc; @@ -197,12 +174,9 @@ /** * Sets all glTextures to be dirty. * - * @method dirty */ -PIXI.BaseTexture.prototype.dirty = function() -{ - for (var i = 0; i < this._glTextures.length; i++) - { +BaseTexture.prototype.dirty = function () { + for (var i = 0; i < this._glTextures.length; i++) { this._dirty[i] = true; } }; @@ -211,23 +185,19 @@ * Removes the base texture from the GPU, useful for managing resources on the GPU. * Atexture is still 100% usable and will simply be reuploaded if there is a sprite on screen that is using it. * - * @method unloadFromGPU */ -PIXI.BaseTexture.prototype.unloadFromGPU = function() -{ +BaseTexture.prototype.unloadFromGPU = function () { this.dirty(); // delete the webGL textures if any. - for (var i = this._glTextures.length - 1; i >= 0; i--) - { + for (var i = this._glTextures.length - 1; i >= 0; i--) { var glTexture = this._glTextures[i]; - var gl = PIXI.glContexts[i]; + var gl = glContexts[i]; - if(gl && glTexture) - { + if (gl && glTexture) { gl.deleteTexture(glTexture); } - + } this._glTextures.length = 0; @@ -240,36 +210,31 @@ * If the image is not in the base texture cache it will be created and loaded. * * @static - * @method fromImage - * @param imageUrl {String} The image url of the texture - * @param crossorigin {Boolean} - * @param scaleMode {Number} See {{#crossLink "PIXI/scaleModes:property"}}PIXI.scaleModes{{/crossLink}} for possible values + * @param imageUrl {string} The image url of the texture + * @param crossorigin {boolean} + * @param scaleMode {number} See {{#crossLink "PIXI/scaleModes:property"}}scaleModes{{/crossLink}} for possible values * @return BaseTexture */ -PIXI.BaseTexture.fromImage = function(imageUrl, crossorigin, scaleMode) -{ - var baseTexture = PIXI.BaseTextureCache[imageUrl]; +BaseTexture.fromImage = function (imageUrl, crossorigin, scaleMode) { + var baseTexture = BaseTextureCache[imageUrl]; - if(crossorigin === undefined && imageUrl.indexOf('data:') === -1) crossorigin = true; + if (crossorigin === undefined && imageUrl.indexOf('data:') === -1) crossorigin = true; - if(!baseTexture) - { + if (!baseTexture) { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 var image = new Image();//document.createElement('img'); - if (crossorigin) - { + if (crossorigin) { image.crossOrigin = ''; } image.src = imageUrl; - baseTexture = new PIXI.BaseTexture(image, scaleMode); + baseTexture = new BaseTexture(image, scaleMode); baseTexture.imageUrl = imageUrl; - PIXI.BaseTextureCache[imageUrl] = baseTexture; + BaseTextureCache[imageUrl] = baseTexture; // if there is an @2x at the end of the url we are going to assume its a highres image - if( imageUrl.indexOf(PIXI.RETINA_PREFIX + '.') !== -1) - { + if ( imageUrl.indexOf(RETINA_PREFIX + '.') !== -1) { baseTexture.resolution = 2; } } @@ -281,24 +246,20 @@ * Helper function that creates a base texture from the given canvas element. * * @static - * @method fromCanvas * @param canvas {Canvas} The canvas element source of the texture - * @param scaleMode {Number} See {{#crossLink "PIXI/scaleModes:property"}}PIXI.scaleModes{{/crossLink}} for possible values + * @param scaleMode {number} See {{#crossLink "PIXI/scaleModes:property"}}scaleModes{{/crossLink}} for possible values * @return BaseTexture */ -PIXI.BaseTexture.fromCanvas = function(canvas, scaleMode) -{ - if(!canvas._pixiId) - { - canvas._pixiId = 'canvas_' + PIXI.TextureCacheIdGenerator++; +BaseTexture.fromCanvas = function (canvas, scaleMode) { + if (!canvas._pixiId) { + canvas._pixiId = 'canvas_' + TextureCacheIdGenerator++; } - var baseTexture = PIXI.BaseTextureCache[canvas._pixiId]; + var baseTexture = BaseTextureCache[canvas._pixiId]; - if(!baseTexture) - { - baseTexture = new PIXI.BaseTexture(canvas, scaleMode); - PIXI.BaseTextureCache[canvas._pixiId] = baseTexture; + if (!baseTexture) { + baseTexture = new BaseTexture(canvas, scaleMode); + BaseTextureCache[canvas._pixiId] = baseTexture; } return baseTexture; diff --git a/src/textures/RenderTexture.js b/src/textures/RenderTexture.js index 37dd7c8..61a238c 100644 --- a/src/textures/RenderTexture.js +++ b/src/textures/RenderTexture.js @@ -1,13 +1,11 @@ /** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. * - * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded otherwise black rectangles will be drawn instead. + * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded + * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. The position + * and rotation of the given Display Objects is ignored. For example: * * var renderTexture = new PIXI.RenderTexture(800, 600); * var sprite = PIXI.Sprite.fromImage("spinObj_01.png"); @@ -17,133 +15,122 @@ * sprite.anchor.y = 0.5; * renderTexture.render(sprite); * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual position a DisplayObjectContainer should be used: + * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual + * position a DisplayObjectContainer should be used: * - * var doc = new PIXI.DisplayObjectContainer(); + * var doc = new DisplayObjectContainer(); * doc.addChild(sprite); * renderTexture.render(doc); // Renders to center of renderTexture * - * @class RenderTexture + * @class * @extends Texture - * @constructor - * @param width {Number} The width of the render texture - * @param height {Number} The height of the render texture + * @namespace PIXI + * @param width {number} The width of the render texture + * @param height {number} The height of the render texture * @param renderer {CanvasRenderer|WebGLRenderer} The renderer used for this RenderTexture - * @param scaleMode {Number} See {{#crossLink "PIXI/scaleModes:property"}}PIXI.scaleModes{{/crossLink}} for possible values - * @param resolution {Number} The resolution of the texture being generated + * @param scaleMode {number} See {@link scaleModes} for possible values + * @param resolution {number} The resolution of the texture being generated */ -PIXI.RenderTexture = function(width, height, renderer, scaleMode, resolution) -{ +function RenderTexture(width, height, renderer, scaleMode, resolution) { /** * The with of the render texture * - * @property width - * @type Number + * @member {number} */ this.width = width || 100; /** * The height of the render texture * - * @property height - * @type Number + * @member {number} */ this.height = height || 100; /** * The Resolution of the texture. * - * @property resolution - * @type Number + * @member {number} */ this.resolution = resolution || 1; /** * The framing rectangle of the render texture * - * @property frame - * @type Rectangle + * @member {Rectangle} */ - this.frame = new PIXI.Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); + this.frame = new Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); /** * 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) * - * @property crop - * @type Rectangle + * @member {Rectangle} */ - this.crop = new PIXI.Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); + this.crop = new Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); /** * The base texture object that this texture uses * - * @property baseTexture - * @type BaseTexture + * @member {BaseTexture} */ - this.baseTexture = new PIXI.BaseTexture(); + this.baseTexture = new BaseTexture(); this.baseTexture.width = this.width * this.resolution; this.baseTexture.height = this.height * this.resolution; this.baseTexture._glTextures = []; this.baseTexture.resolution = this.resolution; - this.baseTexture.scaleMode = scaleMode || PIXI.scaleModes.DEFAULT; + this.baseTexture.scaleMode = scaleMode || scaleModes.DEFAULT; this.baseTexture.hasLoaded = true; - PIXI.Texture.call(this, + Texture.call(this, this.baseTexture, - new PIXI.Rectangle(0, 0, this.width, this.height) + new Rectangle(0, 0, this.width, this.height) ); /** * The renderer this RenderTexture uses. A RenderTexture can only belong to one renderer at the moment if its webGL. * - * @property renderer - * @type CanvasRenderer|WebGLRenderer + * @member {CanvasRenderer|WebGLRenderer} */ - this.renderer = renderer || PIXI.defaultRenderer; + this.renderer = renderer || defaultRenderer; - if(this.renderer.type === PIXI.WEBGL_RENDERER) - { + if (this.renderer.type === WEBGL_RENDERER) { var gl = this.renderer.gl; this.baseTexture._dirty[gl.id] = false; - this.textureBuffer = new PIXI.FilterTexture(gl, this.width * this.resolution, this.height * this.resolution, this.baseTexture.scaleMode); + this.textureBuffer = new FilterTexture(gl, this.width * this.resolution, this.height * this.resolution, this.baseTexture.scaleMode); this.baseTexture._glTextures[gl.id] = this.textureBuffer.texture; this.render = this.renderWebGL; - this.projection = new PIXI.Point(this.width*0.5, -this.height*0.5); + this.projection = new Point(this.width*0.5, -this.height*0.5); } - else - { + else { this.render = this.renderCanvas; - this.textureBuffer = new PIXI.CanvasBuffer(this.width* this.resolution, this.height* this.resolution); + this.textureBuffer = new CanvasBuffer(this.width* this.resolution, this.height* this.resolution); this.baseTexture.source = this.textureBuffer.canvas; } /** - * @property valid - * @type Boolean + * @member {boolean} */ this.valid = true; this._updateUvs(); -}; +} -PIXI.RenderTexture.prototype = Object.create(PIXI.Texture.prototype); -PIXI.RenderTexture.prototype.constructor = PIXI.RenderTexture; +RenderTexture.prototype = Object.create(Texture.prototype); +RenderTexture.prototype.constructor = RenderTexture; +module.exports = RenderTexture; /** * Resizes the RenderTexture. * - * @method resize - * @param width {Number} The width to resize to. - * @param height {Number} The height to resize to. - * @param updateBase {Boolean} Should the baseTexture.width and height values be resized as well? + * @param width {number} The width to resize to. + * @param height {number} The height to resize to. + * @param updateBase {boolean} Should the baseTexture.width and height values be resized as well? */ -PIXI.RenderTexture.prototype.resize = function(width, height, updateBase) -{ +RenderTexture.prototype.resize = function (width, height, updateBase) { if (width === this.width && height === this.height)return; this.valid = (width > 0 && height > 0); @@ -151,19 +138,17 @@ this.width = this.frame.width = this.crop.width = width; this.height = this.frame.height = this.crop.height = height; - if (updateBase) - { + if (updateBase) { this.baseTexture.width = this.width; this.baseTexture.height = this.height; } - if (this.renderer.type === PIXI.WEBGL_RENDERER) - { + if (this.renderer.type === WEBGL_RENDERER) { this.projection.x = this.width / 2; this.projection.y = -this.height / 2; } - if(!this.valid)return; + if (!this.valid)return; this.textureBuffer.resize(this.width * this.resolution, this.height * this.resolution); }; @@ -171,14 +156,11 @@ /** * Clears the RenderTexture. * - * @method clear */ -PIXI.RenderTexture.prototype.clear = function() -{ - if(!this.valid)return; +RenderTexture.prototype.clear = function () { + if (!this.valid)return; - if (this.renderer.type === PIXI.WEBGL_RENDERER) - { + if (this.renderer.type === WEBGL_RENDERER) { this.renderer.gl.bindFramebuffer(this.renderer.gl.FRAMEBUFFER, this.textureBuffer.frameBuffer); } @@ -188,35 +170,32 @@ /** * This function will draw the display object to the texture. * - * @method renderWebGL * @param displayObject {DisplayObject} The display object to render this texture on * @param [matrix] {Matrix} Optional matrix to apply to the display object before rendering. - * @param [clear] {Boolean} If true the texture will be cleared before the displayObject is drawn + * @param [clear] {boolean} If true the texture will be cleared before the displayObject is drawn * @private */ -PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, matrix, clear) -{ - if(!this.valid)return; +RenderTexture.prototype.renderWebGL = function (displayObject, matrix, clear) { + if (!this.valid)return; //TOOD replace position with matrix.. - - //Lets create a nice matrix to apply to our display object. Frame buffers come in upside down so we need to flip the matrix + + //Lets create a nice matrix to apply to our display object. Frame buffers come in upside down so we need to flip the matrix var wt = displayObject.worldTransform; wt.identity(); wt.translate(0, this.projection.y * 2); - if(matrix)wt.append(matrix); + if (matrix)wt.append(matrix); wt.scale(1,-1); // setWorld Alpha to ensure that the object is renderer at full opacity displayObject.worldAlpha = 1; - // Time to update all the children of the displayObject with the new matrix.. + // Time to update all the children of the displayObject with the new matrix.. var children = displayObject.children; - for(var i=0,j=children.length; i this.baseTexture.width || frame.y + frame.height > this.baseTexture.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) - { + 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(); }; @@ -200,17 +177,17 @@ /** * Updates the internal WebGL UV cache. * - * @method _updateUvs * @private */ -PIXI.Texture.prototype._updateUvs = function() -{ - if(!this._uvs)this._uvs = new PIXI.TextureUvs(); +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; @@ -229,20 +206,17 @@ * If the image is not in the texture cache it will be created and loaded. * * @static - * @method fromImage - * @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"}}PIXI.scaleModes{{/crossLink}} for possible values + * @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 */ -PIXI.Texture.fromImage = function(imageUrl, crossorigin, scaleMode) -{ - var texture = PIXI.TextureCache[imageUrl]; +Texture.fromImage = function (imageUrl, crossorigin, scaleMode) { + var texture = TextureCache[imageUrl]; - if(!texture) - { - texture = new PIXI.Texture(PIXI.BaseTexture.fromImage(imageUrl, crossorigin, scaleMode)); - PIXI.TextureCache[imageUrl] = texture; + if (!texture) { + texture = new Texture(BaseTexture.fromImage(imageUrl, crossorigin, scaleMode)); + TextureCache[imageUrl] = texture; } return texture; @@ -253,14 +227,12 @@ * If the frame id is not in the texture cache an error will be thrown. * * @static - * @method fromFrame - * @param frameId {String} The frame id of the texture + * @param frameId {string} The frame id of the texture * @return Texture */ -PIXI.Texture.fromFrame = function(frameId) -{ - var texture = PIXI.TextureCache[frameId]; - if(!texture) throw new Error('The frameId "' + frameId + '" does not exist in the texture cache '); +Texture.fromFrame = function (frameId) { + var texture = TextureCache[frameId]; + if (!texture) throw new Error('The frameId "' + frameId + '" does not exist in the texture cache '); return texture; }; @@ -268,50 +240,45 @@ * Helper function that creates a new a Texture based on the given canvas element. * * @static - * @method fromCanvas * @param canvas {Canvas} The canvas element source of the texture - * @param scaleMode {Number} See {{#crossLink "PIXI/scaleModes:property"}}PIXI.scaleModes{{/crossLink}} for possible values + * @param scaleMode {number} See {{#crossLink "PIXI/scaleModes:property"}}scaleModes{{/crossLink}} for possible values * @return Texture */ -PIXI.Texture.fromCanvas = function(canvas, scaleMode) -{ - var baseTexture = PIXI.BaseTexture.fromCanvas(canvas, scaleMode); +Texture.fromCanvas = function (canvas, scaleMode) { + var baseTexture = BaseTexture.fromCanvas(canvas, scaleMode); - return new PIXI.Texture( baseTexture ); + return new Texture( baseTexture ); }; /** - * Adds a texture to the global PIXI.TextureCache. This cache is shared across the whole PIXI object. + * Adds a texture to the global TextureCache. This cache is shared across the whole PIXI object. * * @static - * @method addTextureToCache * @param texture {Texture} The Texture to add to the cache. - * @param id {String} The id that the texture will be stored against. + * @param id {string} The id that the texture will be stored against. */ -PIXI.Texture.addTextureToCache = function(texture, id) -{ - PIXI.TextureCache[id] = texture; +Texture.addTextureToCache = function (texture, id) { + TextureCache[id] = texture; }; /** - * Remove a texture from the global PIXI.TextureCache. + * Remove a texture from the global TextureCache. * * @static - * @method removeTextureFromCache - * @param id {String} The id of the texture to be removed + * @param id {string} The id of the texture to be removed * @return {Texture} The texture that was removed */ -PIXI.Texture.removeTextureFromCache = function(id) -{ - var texture = PIXI.TextureCache[id]; - delete PIXI.TextureCache[id]; - delete PIXI.BaseTextureCache[id]; +Texture.removeTextureFromCache = function (id) { + var texture = TextureCache[id]; + + delete TextureCache[id]; + delete BaseTextureCache[id]; + return texture; }; -PIXI.TextureUvs = function() -{ +function TextureUvs() { this.x0 = 0; this.y0 = 0; @@ -325,5 +292,5 @@ this.y3 = 0; }; -PIXI.Texture.emptyTexture = new PIXI.Texture(new PIXI.BaseTexture()); +Texture.emptyTexture = new Texture(new BaseTexture()); diff --git a/src/textures/VideoTexture.js b/src/textures/VideoTexture.js index ad58ec5..c3e753d 100644 --- a/src/textures/VideoTexture.js +++ b/src/textures/VideoTexture.js @@ -3,132 +3,114 @@ * * See the ["deus" demo](http://www.goodboydigital.com/pixijs/examples/deus/). * - * @class VideoTexture + * @class * @extends BaseTexture - * @constructor + * @namespace PIXI * @param source {HTMLVideoElement} - * @param scaleMode {Number} See {{#crossLink "PIXI/scaleModes:property"}}PIXI.scaleModes{{/crossLink}} for possible values + * @param [scaleMode] {number} See {@link scaleModes} for possible values */ -PIXI.VideoTexture = function( source, scaleMode ) -{ - if( !source ){ - throw new Error( 'No video source element specified.' ); +function VideoTexture(source, scaleMode) { + if (!source){ + throw new Error('No video source element specified.'); } // hook in here to check if video is already available. - // PIXI.BaseTexture looks for a source.complete boolean, plus width & height. + // BaseTexture looks for a source.complete boolean, plus width & height. - if( (source.readyState === source.HAVE_ENOUGH_DATA || source.readyState === source.HAVE_FUTURE_DATA ) && source.width && source.height ) - { + if ((source.readyState === source.HAVE_ENOUGH_DATA || source.readyState === source.HAVE_FUTURE_DATA) && source.width && source.height) { source.complete = true; } - PIXI.BaseTexture.call( this, source, scaleMode ); + BaseTexture.call(this, source, scaleMode); this.autoUpdate = false; this.updateBound = this._onUpdate.bind(this); - if( !source.complete ) - { + if (!source.complete) { this._onCanPlay = this.onCanPlay.bind(this); - source.addEventListener( 'canplay', this._onCanPlay ); - source.addEventListener( 'canplaythrough', this._onCanPlay ); + source.addEventListener('canplay', this._onCanPlay); + source.addEventListener('canplaythrough', this._onCanPlay); // started playing.. - source.addEventListener( 'play', this.onPlayStart.bind(this) ); - source.addEventListener( 'pause', this.onPlayStop.bind(this) ); + source.addEventListener('play', this.onPlayStart.bind(this)); + source.addEventListener('pause', this.onPlayStop.bind(this)); } +} -}; +VideoTexture.prototype = Object.create(BaseTexture.prototype); +VideoTexture.prototype.constructor = VideoTexture; +module.exports = VideoTexture; -PIXI.VideoTexture.prototype = Object.create( PIXI.BaseTexture.prototype ); - -PIXI.VideoTexture.constructor = PIXI.VideoTexture; - -PIXI.VideoTexture.prototype._onUpdate = function() -{ - if(this.autoUpdate) - { +VideoTexture.prototype._onUpdate = function () { + if (this.autoUpdate) { window.requestAnimationFrame(this.updateBound); this.dirty(); } }; -PIXI.VideoTexture.prototype.onPlayStart = function() -{ - if(!this.autoUpdate) - { +VideoTexture.prototype.onPlayStart = function () { + if (!this.autoUpdate) { window.requestAnimationFrame(this.updateBound); this.autoUpdate = true; } }; -PIXI.VideoTexture.prototype.onPlayStop = function() -{ +VideoTexture.prototype.onPlayStop = function () { this.autoUpdate = false; }; -PIXI.VideoTexture.prototype.onCanPlay = function() -{ - if( event.type === 'canplaythrough' ) - { +VideoTexture.prototype.onCanPlay = function () { + if (event.type === 'canplaythrough') { this.hasLoaded = true; - if( this.source ) - { - this.source.removeEventListener( 'canplay', this._onCanPlay ); - this.source.removeEventListener( 'canplaythrough', this._onCanPlay ); + if (this.source) { + this.source.removeEventListener('canplay', this._onCanPlay); + this.source.removeEventListener('canplaythrough', this._onCanPlay); this.width = this.source.videoWidth; this.height = this.source.videoHeight; // prevent multiple loaded dispatches.. - if( !this.__loaded ){ + if (!this.__loaded){ this.__loaded = true; - this.dispatchEvent( { type: 'loaded', content: this } ); + this.dispatchEvent({ type: 'loaded', content: this }); } } } }; -PIXI.VideoTexture.prototype.destroy = function() -{ - if( this.source && this.source._pixiId ) - { - PIXI.BaseTextureCache[ this.source._pixiId ] = null; - delete PIXI.BaseTextureCache[ this.source._pixiId ]; +VideoTexture.prototype.destroy = function () { + if (this.source && this.source._pixiId) { + BaseTextureCache[ this.source._pixiId ] = null; + delete BaseTextureCache[ this.source._pixiId ]; this.source._pixiId = null; delete this.source._pixiId; } - PIXI.BaseTexture.prototype.destroy.call( this ); + BaseTexture.prototype.destroy.call(this); }; /** * Mimic Pixi BaseTexture.from.... method. * * @static - * @method baseTextureFromVideo * @param video {HTMLVideoElement} - * @param scaleMode {Number} See {{#crossLink "PIXI/scaleModes:property"}}PIXI.scaleModes{{/crossLink}} for possible values + * @param scaleMode {number} See {{#crossLink "PIXI/scaleModes:property"}}scaleModes{{/crossLink}} for possible values * @return {VideoTexture} */ -PIXI.VideoTexture.baseTextureFromVideo = function( video, scaleMode ) -{ - if( !video._pixiId ) - { - video._pixiId = 'video_' + PIXI.TextureCacheIdGenerator++; +VideoTexture.baseTextureFromVideo = function (video, scaleMode) { + if (!video._pixiId) { + video._pixiId = 'video_' + TextureCacheIdGenerator++; } - var baseTexture = PIXI.BaseTextureCache[ video._pixiId ]; + var baseTexture = BaseTextureCache[ video._pixiId ]; - if( !baseTexture ) - { - baseTexture = new PIXI.VideoTexture( video, scaleMode ); - PIXI.BaseTextureCache[ video._pixiId ] = baseTexture; + if (!baseTexture) { + baseTexture = new VideoTexture(video, scaleMode); + BaseTextureCache[ video._pixiId ] = baseTexture; } return baseTexture; @@ -138,31 +120,27 @@ * Mimic Pixi BaseTexture.from.... method. * * @static - * @method textureFromVideo * @param video {HTMLVideoElement} - * @param scaleMode {Number} See {{#crossLink "PIXI/scaleModes:property"}}PIXI.scaleModes{{/crossLink}} for possible values + * @param scaleMode {number} See {{#crossLink "PIXI/scaleModes:property"}}scaleModes{{/crossLink}} for possible values * @return {Texture} A Texture, but not a VideoTexture. */ -PIXI.VideoTexture.textureFromVideo = function( video, scaleMode ) -{ - var baseTexture = PIXI.VideoTexture.baseTextureFromVideo( video, scaleMode ); - return new PIXI.Texture( baseTexture ); +VideoTexture.textureFromVideo = function (video, scaleMode) { + var baseTexture = VideoTexture.baseTextureFromVideo(video, scaleMode); + return new Texture(baseTexture); }; /** * Mimic Pixi BaseTexture.from.... method. * * @static - * @method fromUrl - * @param videoSrc {String} The URL for the video. - * @param scaleMode {Number} See {{#crossLink "PIXI/scaleModes:property"}}PIXI.scaleModes{{/crossLink}} for possible values + * @param videoSrc {string} The URL for the video. + * @param scaleMode {number} See {{#crossLink "PIXI/scaleModes:property"}}scaleModes{{/crossLink}} for possible values * @return {VideoTexture} */ -PIXI.VideoTexture.fromUrl = function( videoSrc, scaleMode ) -{ +VideoTexture.fromUrl = function (videoSrc, scaleMode) { var video = document.createElement('video'); video.src = videoSrc; video.autoPlay = true; video.play(); - return PIXI.VideoTexture.textureFromVideo( video, scaleMode); + return VideoTexture.textureFromVideo(video, scaleMode); };