diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 364de1a..b8a4fcc 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -8,6 +8,7 @@ import BufferResource from './resources/BufferResource'; import CanvasResource from './resources/CanvasResource'; import SVGResource from './resources/SVGResource'; +import VideoResource from './resources/VideoResource'; import createResource from './resources/createResource'; import settings from '../settings'; @@ -115,6 +116,8 @@ setResource(resource) { + // TODO currently a resource can only be set once.. + this.resource = resource; this.resource.load.then((resource) => { @@ -140,6 +143,14 @@ } }) + + this.resource.resourceUpdated.add(this); //calls resourceUpaded + } + + resourceUpdated() + { + // the resource was updated.. + this.dirtyId++; } update() @@ -167,95 +178,6 @@ this.valid = valid; } - /** - * Helper function that creates a base texture from the given image url. - * If the image is not in the base texture cache it will be created and loaded. - * - * @static - * @param {string} imageUrl - The image url of the texture - * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.BaseTexture} The new base texture. - */ - static fromImage(imageUrl, crossorigin, scaleMode) - { - let baseTexture = BaseTextureCache[imageUrl]; - - if (!baseTexture) - { - // new Image() breaks tex loading in some versions of Chrome. - // See https://code.google.com/p/chromium/issues/detail?id=238071 - const resource = ImageResource.from(imageUrl, crossorigin);// document.createElement('img'); - - baseTexture = new BaseTexture();//image, scaleMode); - baseTexture.scaleMode = scaleMode || baseTexture.scaleMode; - baseTexture.resolution = getResolutionOfUrl(imageUrl); - baseTexture.setResource(resource); - BaseTextureCache[imageUrl] = baseTexture; - } - - return baseTexture; - } - - /** - * Helper function that creates a base texture from the given canvas element. - * - * @static - * @param {HTMLCanvasElement} canvas - The canvas element source of the texture - * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.BaseTexture} The new base texture. - */ - static fromCanvas(canvas, scaleMode) - { - - if (!canvas._pixiId) - { - canvas._pixiId = `canvas_${uid()}`; - } - - let baseTexture = BaseTextureCache[canvas._pixiId]; - - if (!baseTexture) - { - - const resource = CanvasResource.from(canvas);// document.createElement('img'); - console.log() - baseTexture = new BaseTexture(); - baseTexture.scaleMode = scaleMode || baseTexture.scaleMode; - baseTexture.setResource(resource); - - BaseTextureCache[canvas._pixiId] = baseTexture; - } - - return baseTexture; - } - - /** - * Helper function that creates a base texture from the given canvas element. - * - * @static - * @param {HTMLCanvasElement} canvas - The canvas element source of the texture - * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.BaseTexture} The new base texture. - */ - static fromSVG(url, scale, scaleMode) - { - let baseTexture = BaseTextureCache[url]; - - if (!baseTexture) - { - const resource = SVGResource.from(url);// document.createElement('img'); - - baseTexture = new BaseTexture(); - baseTexture.scaleMode = scaleMode || baseTexture.scaleMode; - baseTexture.setResource(resource); - - BaseTextureCache[url] = baseTexture; - } - - return baseTexture; - } - get realWidth() { return this.width * this.resolution; @@ -276,72 +198,34 @@ * @param {number} [sourceScale=(auto)] - Scale for the original image, used with Svg images. * @return {PIXI.BaseTexture} The new base texture. */ - static fromNEW(url) - { - var texture = new Texture(); - - var image = new Image(); - image.src = url; - texture.setResource(new ImageResource(image)); - - return texture; - } - - static getResource(source) - { - if (typeof source === 'string') - { - // // - - } - } - - /** - * Helper function that creates a base texture based on the source you provide. - * The source can be - image url, image element, canvas element. - * - * @static - * @param {string|HTMLImageElement|HTMLCanvasElement} source - The source to create base texture from. - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @param {number} [sourceScale=(auto)] - Scale for the original image, used with Svg images. - * @return {PIXI.BaseTexture} The new base texture. - */ static from(source, scaleMode, sourceScale) { + var cacheId = null; + if (typeof source === 'string') { - return BaseTexture.fromImage(source, undefined, scaleMode, sourceScale); + cacheId = source; } - else if (source instanceof HTMLImageElement) + else { - const imageUrl = source.src; - let baseTexture = BaseTextureCache[imageUrl]; - - if (!baseTexture) + if(!source._pixiId) { - baseTexture = new BaseTexture(source, scaleMode); - baseTexture.imageUrl = imageUrl; - - if (sourceScale) - { - baseTexture.sourceScale = sourceScale; - } - - // if there is an @2x at the end of the url we are going to assume its a highres image - baseTexture.resolution = getResolutionOfUrl(imageUrl); - - BaseTextureCache[imageUrl] = baseTexture; + source._pixiId = `pixiid_${uid()}`; } - return baseTexture; + cacheId = source._pixiId; } - else if (source instanceof HTMLCanvasElement) + + let baseTexture = BaseTextureCache[cacheId]; + + if (!baseTexture) { - return BaseTexture.fromCanvas(source, scaleMode); + baseTexture = new BaseTexture(source); + BaseTextureCache[cacheId] = baseTexture; } // lets assume its a base texture! - return source; + return baseTexture; } static fromFloat32Array(width, height, float32Array) @@ -372,4 +256,8 @@ return texture; } -} \ No newline at end of file +} + +BaseTexture.fromImage = BaseTexture.from; +BaseTexture.fromSVG = BaseTexture.from; +BaseTexture.fromCanvas = BaseTexture.from; \ No newline at end of file diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 364de1a..b8a4fcc 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -8,6 +8,7 @@ import BufferResource from './resources/BufferResource'; import CanvasResource from './resources/CanvasResource'; import SVGResource from './resources/SVGResource'; +import VideoResource from './resources/VideoResource'; import createResource from './resources/createResource'; import settings from '../settings'; @@ -115,6 +116,8 @@ setResource(resource) { + // TODO currently a resource can only be set once.. + this.resource = resource; this.resource.load.then((resource) => { @@ -140,6 +143,14 @@ } }) + + this.resource.resourceUpdated.add(this); //calls resourceUpaded + } + + resourceUpdated() + { + // the resource was updated.. + this.dirtyId++; } update() @@ -167,95 +178,6 @@ this.valid = valid; } - /** - * Helper function that creates a base texture from the given image url. - * If the image is not in the base texture cache it will be created and loaded. - * - * @static - * @param {string} imageUrl - The image url of the texture - * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.BaseTexture} The new base texture. - */ - static fromImage(imageUrl, crossorigin, scaleMode) - { - let baseTexture = BaseTextureCache[imageUrl]; - - if (!baseTexture) - { - // new Image() breaks tex loading in some versions of Chrome. - // See https://code.google.com/p/chromium/issues/detail?id=238071 - const resource = ImageResource.from(imageUrl, crossorigin);// document.createElement('img'); - - baseTexture = new BaseTexture();//image, scaleMode); - baseTexture.scaleMode = scaleMode || baseTexture.scaleMode; - baseTexture.resolution = getResolutionOfUrl(imageUrl); - baseTexture.setResource(resource); - BaseTextureCache[imageUrl] = baseTexture; - } - - return baseTexture; - } - - /** - * Helper function that creates a base texture from the given canvas element. - * - * @static - * @param {HTMLCanvasElement} canvas - The canvas element source of the texture - * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.BaseTexture} The new base texture. - */ - static fromCanvas(canvas, scaleMode) - { - - if (!canvas._pixiId) - { - canvas._pixiId = `canvas_${uid()}`; - } - - let baseTexture = BaseTextureCache[canvas._pixiId]; - - if (!baseTexture) - { - - const resource = CanvasResource.from(canvas);// document.createElement('img'); - console.log() - baseTexture = new BaseTexture(); - baseTexture.scaleMode = scaleMode || baseTexture.scaleMode; - baseTexture.setResource(resource); - - BaseTextureCache[canvas._pixiId] = baseTexture; - } - - return baseTexture; - } - - /** - * Helper function that creates a base texture from the given canvas element. - * - * @static - * @param {HTMLCanvasElement} canvas - The canvas element source of the texture - * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.BaseTexture} The new base texture. - */ - static fromSVG(url, scale, scaleMode) - { - let baseTexture = BaseTextureCache[url]; - - if (!baseTexture) - { - const resource = SVGResource.from(url);// document.createElement('img'); - - baseTexture = new BaseTexture(); - baseTexture.scaleMode = scaleMode || baseTexture.scaleMode; - baseTexture.setResource(resource); - - BaseTextureCache[url] = baseTexture; - } - - return baseTexture; - } - get realWidth() { return this.width * this.resolution; @@ -276,72 +198,34 @@ * @param {number} [sourceScale=(auto)] - Scale for the original image, used with Svg images. * @return {PIXI.BaseTexture} The new base texture. */ - static fromNEW(url) - { - var texture = new Texture(); - - var image = new Image(); - image.src = url; - texture.setResource(new ImageResource(image)); - - return texture; - } - - static getResource(source) - { - if (typeof source === 'string') - { - // // - - } - } - - /** - * Helper function that creates a base texture based on the source you provide. - * The source can be - image url, image element, canvas element. - * - * @static - * @param {string|HTMLImageElement|HTMLCanvasElement} source - The source to create base texture from. - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @param {number} [sourceScale=(auto)] - Scale for the original image, used with Svg images. - * @return {PIXI.BaseTexture} The new base texture. - */ static from(source, scaleMode, sourceScale) { + var cacheId = null; + if (typeof source === 'string') { - return BaseTexture.fromImage(source, undefined, scaleMode, sourceScale); + cacheId = source; } - else if (source instanceof HTMLImageElement) + else { - const imageUrl = source.src; - let baseTexture = BaseTextureCache[imageUrl]; - - if (!baseTexture) + if(!source._pixiId) { - baseTexture = new BaseTexture(source, scaleMode); - baseTexture.imageUrl = imageUrl; - - if (sourceScale) - { - baseTexture.sourceScale = sourceScale; - } - - // if there is an @2x at the end of the url we are going to assume its a highres image - baseTexture.resolution = getResolutionOfUrl(imageUrl); - - BaseTextureCache[imageUrl] = baseTexture; + source._pixiId = `pixiid_${uid()}`; } - return baseTexture; + cacheId = source._pixiId; } - else if (source instanceof HTMLCanvasElement) + + let baseTexture = BaseTextureCache[cacheId]; + + if (!baseTexture) { - return BaseTexture.fromCanvas(source, scaleMode); + baseTexture = new BaseTexture(source); + BaseTextureCache[cacheId] = baseTexture; } // lets assume its a base texture! - return source; + return baseTexture; } static fromFloat32Array(width, height, float32Array) @@ -372,4 +256,8 @@ return texture; } -} \ No newline at end of file +} + +BaseTexture.fromImage = BaseTexture.from; +BaseTexture.fromSVG = BaseTexture.from; +BaseTexture.fromCanvas = BaseTexture.from; \ No newline at end of file diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index fdd1886..1fd0ee3 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -277,108 +277,6 @@ } /** - * 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 {string} imageUrl - The image url of the texture - * @param {boolean} [crossorigin] - Whether requests should be treated as crossorigin - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @param {number} [sourceScale=(auto)] - Scale for the original image, used with SVG images. - * @return {PIXI.Texture} The newly created texture - */ - static fromImage(imageUrl, crossorigin, scaleMode, sourceScale) - { - let texture = TextureCache[imageUrl]; - - if (!texture) - { - texture = new Texture(BaseTexture.fromImage(imageUrl, crossorigin, scaleMode, sourceScale)); - TextureCache[imageUrl] = texture; - } - - return texture; - } - - - static fromSVG(svgUrl, crossorigin, scaleMode, sourceScale) - { - let texture = TextureCache[svgUrl]; - - if (!texture) - { - texture = new Texture(BaseTexture.fromSVG(svgUrl, crossorigin, scaleMode, sourceScale)); - TextureCache[svgUrl] = texture; - } - - return texture; - } - - /** - * 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 - * - * @static - * @param {string} frameId - The frame Id of the texture in the cache - * @return {PIXI.Texture} The newly created texture - */ - static fromFrame(frameId) - { - const texture = TextureCache[frameId]; - - if (!texture) - { - throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); - } - - return texture; - } - - /** - * Helper function that creates a new Texture based on the given canvas element. - * - * @static - * @param {HTMLCanvasElement} canvas - The canvas element source of the texture - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.Texture} The newly created texture - */ - static fromCanvas(canvas, scaleMode) - { - return new Texture(BaseTexture.fromCanvas(canvas, scaleMode)); - } - - /** - * Helper function that creates a new Texture based on the given video element. - * - * @static - * @param {HTMLVideoElement|string} video - The URL or actual element of the video - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.Texture} The newly created texture - */ - static fromVideo(video, scaleMode) - { - if (typeof video === 'string') - { - return Texture.fromVideoUrl(video, scaleMode); - } - - return new Texture(VideoBaseTexture.fromVideo(video, scaleMode)); - } - - /** - * Helper function that creates a new Texture based on the video url. - * - * @static - * @param {string} videoUrl - URL of the video - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.Texture} The newly created texture - */ - static fromVideoUrl(videoUrl, scaleMode) - { - return new Texture(VideoBaseTexture.fromUrl(videoUrl, scaleMode)); - } - - /** * Helper function that creates a new Texture based on the source you provide. * The source can be - frame id, image url, video url, canvas element, video element, base texture * @@ -387,48 +285,34 @@ * source - Source to create texture from * @return {PIXI.Texture} The newly created texture */ - static from(source) + static from(source, scaleMode, sourceScale) { - // TODO auto detect cross origin.. - // TODO pass in scale mode? + var cacheId = null; + if (typeof source === 'string') { - const texture = TextureCache[source]; - - if (!texture) + cacheId = source; + } + else + { + if(!source._pixiId) { - // check if its a video.. - const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - - if (isVideo) - { - return Texture.fromVideoUrl(source); - } - - return Texture.fromImage(source); + source._pixiId = `pixiid_${uid()}`; } - return texture; - } - else if (source instanceof HTMLImageElement) - { - return new Texture(BaseTexture.from(source)); - } - else if (source instanceof HTMLCanvasElement) - { - return Texture.fromCanvas(source); - } - else if (source instanceof HTMLVideoElement) - { - return Texture.fromVideo(source); - } - else if (source instanceof BaseTexture) - { - return new Texture(source); + cacheId = source._pixiId; } - // lets assume its a texture! - return source; + let texture = TextureCache[cacheId]; + + if (!texture) + { + texture = new Texture(new BaseTexture(source)); + TextureCache[cacheId] = texture; + } + + // lets assume its a base texture! + return texture; } /** @@ -582,6 +466,12 @@ } } + +Texture.fromImage = Texture.from; +Texture.fromSVG = Texture.from; +Texture.fromCanvas = Texture.from; +Texture.fromFrame = Texture.from; + function createWhiteTexture() { const canvas = document.createElement('canvas'); diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 364de1a..b8a4fcc 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -8,6 +8,7 @@ import BufferResource from './resources/BufferResource'; import CanvasResource from './resources/CanvasResource'; import SVGResource from './resources/SVGResource'; +import VideoResource from './resources/VideoResource'; import createResource from './resources/createResource'; import settings from '../settings'; @@ -115,6 +116,8 @@ setResource(resource) { + // TODO currently a resource can only be set once.. + this.resource = resource; this.resource.load.then((resource) => { @@ -140,6 +143,14 @@ } }) + + this.resource.resourceUpdated.add(this); //calls resourceUpaded + } + + resourceUpdated() + { + // the resource was updated.. + this.dirtyId++; } update() @@ -167,95 +178,6 @@ this.valid = valid; } - /** - * Helper function that creates a base texture from the given image url. - * If the image is not in the base texture cache it will be created and loaded. - * - * @static - * @param {string} imageUrl - The image url of the texture - * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.BaseTexture} The new base texture. - */ - static fromImage(imageUrl, crossorigin, scaleMode) - { - let baseTexture = BaseTextureCache[imageUrl]; - - if (!baseTexture) - { - // new Image() breaks tex loading in some versions of Chrome. - // See https://code.google.com/p/chromium/issues/detail?id=238071 - const resource = ImageResource.from(imageUrl, crossorigin);// document.createElement('img'); - - baseTexture = new BaseTexture();//image, scaleMode); - baseTexture.scaleMode = scaleMode || baseTexture.scaleMode; - baseTexture.resolution = getResolutionOfUrl(imageUrl); - baseTexture.setResource(resource); - BaseTextureCache[imageUrl] = baseTexture; - } - - return baseTexture; - } - - /** - * Helper function that creates a base texture from the given canvas element. - * - * @static - * @param {HTMLCanvasElement} canvas - The canvas element source of the texture - * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.BaseTexture} The new base texture. - */ - static fromCanvas(canvas, scaleMode) - { - - if (!canvas._pixiId) - { - canvas._pixiId = `canvas_${uid()}`; - } - - let baseTexture = BaseTextureCache[canvas._pixiId]; - - if (!baseTexture) - { - - const resource = CanvasResource.from(canvas);// document.createElement('img'); - console.log() - baseTexture = new BaseTexture(); - baseTexture.scaleMode = scaleMode || baseTexture.scaleMode; - baseTexture.setResource(resource); - - BaseTextureCache[canvas._pixiId] = baseTexture; - } - - return baseTexture; - } - - /** - * Helper function that creates a base texture from the given canvas element. - * - * @static - * @param {HTMLCanvasElement} canvas - The canvas element source of the texture - * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.BaseTexture} The new base texture. - */ - static fromSVG(url, scale, scaleMode) - { - let baseTexture = BaseTextureCache[url]; - - if (!baseTexture) - { - const resource = SVGResource.from(url);// document.createElement('img'); - - baseTexture = new BaseTexture(); - baseTexture.scaleMode = scaleMode || baseTexture.scaleMode; - baseTexture.setResource(resource); - - BaseTextureCache[url] = baseTexture; - } - - return baseTexture; - } - get realWidth() { return this.width * this.resolution; @@ -276,72 +198,34 @@ * @param {number} [sourceScale=(auto)] - Scale for the original image, used with Svg images. * @return {PIXI.BaseTexture} The new base texture. */ - static fromNEW(url) - { - var texture = new Texture(); - - var image = new Image(); - image.src = url; - texture.setResource(new ImageResource(image)); - - return texture; - } - - static getResource(source) - { - if (typeof source === 'string') - { - // // - - } - } - - /** - * Helper function that creates a base texture based on the source you provide. - * The source can be - image url, image element, canvas element. - * - * @static - * @param {string|HTMLImageElement|HTMLCanvasElement} source - The source to create base texture from. - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @param {number} [sourceScale=(auto)] - Scale for the original image, used with Svg images. - * @return {PIXI.BaseTexture} The new base texture. - */ static from(source, scaleMode, sourceScale) { + var cacheId = null; + if (typeof source === 'string') { - return BaseTexture.fromImage(source, undefined, scaleMode, sourceScale); + cacheId = source; } - else if (source instanceof HTMLImageElement) + else { - const imageUrl = source.src; - let baseTexture = BaseTextureCache[imageUrl]; - - if (!baseTexture) + if(!source._pixiId) { - baseTexture = new BaseTexture(source, scaleMode); - baseTexture.imageUrl = imageUrl; - - if (sourceScale) - { - baseTexture.sourceScale = sourceScale; - } - - // if there is an @2x at the end of the url we are going to assume its a highres image - baseTexture.resolution = getResolutionOfUrl(imageUrl); - - BaseTextureCache[imageUrl] = baseTexture; + source._pixiId = `pixiid_${uid()}`; } - return baseTexture; + cacheId = source._pixiId; } - else if (source instanceof HTMLCanvasElement) + + let baseTexture = BaseTextureCache[cacheId]; + + if (!baseTexture) { - return BaseTexture.fromCanvas(source, scaleMode); + baseTexture = new BaseTexture(source); + BaseTextureCache[cacheId] = baseTexture; } // lets assume its a base texture! - return source; + return baseTexture; } static fromFloat32Array(width, height, float32Array) @@ -372,4 +256,8 @@ return texture; } -} \ No newline at end of file +} + +BaseTexture.fromImage = BaseTexture.from; +BaseTexture.fromSVG = BaseTexture.from; +BaseTexture.fromCanvas = BaseTexture.from; \ No newline at end of file diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index fdd1886..1fd0ee3 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -277,108 +277,6 @@ } /** - * 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 {string} imageUrl - The image url of the texture - * @param {boolean} [crossorigin] - Whether requests should be treated as crossorigin - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @param {number} [sourceScale=(auto)] - Scale for the original image, used with SVG images. - * @return {PIXI.Texture} The newly created texture - */ - static fromImage(imageUrl, crossorigin, scaleMode, sourceScale) - { - let texture = TextureCache[imageUrl]; - - if (!texture) - { - texture = new Texture(BaseTexture.fromImage(imageUrl, crossorigin, scaleMode, sourceScale)); - TextureCache[imageUrl] = texture; - } - - return texture; - } - - - static fromSVG(svgUrl, crossorigin, scaleMode, sourceScale) - { - let texture = TextureCache[svgUrl]; - - if (!texture) - { - texture = new Texture(BaseTexture.fromSVG(svgUrl, crossorigin, scaleMode, sourceScale)); - TextureCache[svgUrl] = texture; - } - - return texture; - } - - /** - * 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 - * - * @static - * @param {string} frameId - The frame Id of the texture in the cache - * @return {PIXI.Texture} The newly created texture - */ - static fromFrame(frameId) - { - const texture = TextureCache[frameId]; - - if (!texture) - { - throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); - } - - return texture; - } - - /** - * Helper function that creates a new Texture based on the given canvas element. - * - * @static - * @param {HTMLCanvasElement} canvas - The canvas element source of the texture - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.Texture} The newly created texture - */ - static fromCanvas(canvas, scaleMode) - { - return new Texture(BaseTexture.fromCanvas(canvas, scaleMode)); - } - - /** - * Helper function that creates a new Texture based on the given video element. - * - * @static - * @param {HTMLVideoElement|string} video - The URL or actual element of the video - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.Texture} The newly created texture - */ - static fromVideo(video, scaleMode) - { - if (typeof video === 'string') - { - return Texture.fromVideoUrl(video, scaleMode); - } - - return new Texture(VideoBaseTexture.fromVideo(video, scaleMode)); - } - - /** - * Helper function that creates a new Texture based on the video url. - * - * @static - * @param {string} videoUrl - URL of the video - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.Texture} The newly created texture - */ - static fromVideoUrl(videoUrl, scaleMode) - { - return new Texture(VideoBaseTexture.fromUrl(videoUrl, scaleMode)); - } - - /** * Helper function that creates a new Texture based on the source you provide. * The source can be - frame id, image url, video url, canvas element, video element, base texture * @@ -387,48 +285,34 @@ * source - Source to create texture from * @return {PIXI.Texture} The newly created texture */ - static from(source) + static from(source, scaleMode, sourceScale) { - // TODO auto detect cross origin.. - // TODO pass in scale mode? + var cacheId = null; + if (typeof source === 'string') { - const texture = TextureCache[source]; - - if (!texture) + cacheId = source; + } + else + { + if(!source._pixiId) { - // check if its a video.. - const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - - if (isVideo) - { - return Texture.fromVideoUrl(source); - } - - return Texture.fromImage(source); + source._pixiId = `pixiid_${uid()}`; } - return texture; - } - else if (source instanceof HTMLImageElement) - { - return new Texture(BaseTexture.from(source)); - } - else if (source instanceof HTMLCanvasElement) - { - return Texture.fromCanvas(source); - } - else if (source instanceof HTMLVideoElement) - { - return Texture.fromVideo(source); - } - else if (source instanceof BaseTexture) - { - return new Texture(source); + cacheId = source._pixiId; } - // lets assume its a texture! - return source; + let texture = TextureCache[cacheId]; + + if (!texture) + { + texture = new Texture(new BaseTexture(source)); + TextureCache[cacheId] = texture; + } + + // lets assume its a base texture! + return texture; } /** @@ -582,6 +466,12 @@ } } + +Texture.fromImage = Texture.from; +Texture.fromSVG = Texture.from; +Texture.fromCanvas = Texture.from; +Texture.fromFrame = Texture.from; + function createWhiteTexture() { const canvas = document.createElement('canvas'); diff --git a/src/core/textures/resources/ImageResource.js b/src/core/textures/resources/ImageResource.js index 1ee6312..aa1fe5e 100644 --- a/src/core/textures/resources/ImageResource.js +++ b/src/core/textures/resources/ImageResource.js @@ -5,7 +5,7 @@ { constructor(source) { - super(); + super(source); this.load = new Promise((resolve, reject) => { diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 364de1a..b8a4fcc 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -8,6 +8,7 @@ import BufferResource from './resources/BufferResource'; import CanvasResource from './resources/CanvasResource'; import SVGResource from './resources/SVGResource'; +import VideoResource from './resources/VideoResource'; import createResource from './resources/createResource'; import settings from '../settings'; @@ -115,6 +116,8 @@ setResource(resource) { + // TODO currently a resource can only be set once.. + this.resource = resource; this.resource.load.then((resource) => { @@ -140,6 +143,14 @@ } }) + + this.resource.resourceUpdated.add(this); //calls resourceUpaded + } + + resourceUpdated() + { + // the resource was updated.. + this.dirtyId++; } update() @@ -167,95 +178,6 @@ this.valid = valid; } - /** - * Helper function that creates a base texture from the given image url. - * If the image is not in the base texture cache it will be created and loaded. - * - * @static - * @param {string} imageUrl - The image url of the texture - * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.BaseTexture} The new base texture. - */ - static fromImage(imageUrl, crossorigin, scaleMode) - { - let baseTexture = BaseTextureCache[imageUrl]; - - if (!baseTexture) - { - // new Image() breaks tex loading in some versions of Chrome. - // See https://code.google.com/p/chromium/issues/detail?id=238071 - const resource = ImageResource.from(imageUrl, crossorigin);// document.createElement('img'); - - baseTexture = new BaseTexture();//image, scaleMode); - baseTexture.scaleMode = scaleMode || baseTexture.scaleMode; - baseTexture.resolution = getResolutionOfUrl(imageUrl); - baseTexture.setResource(resource); - BaseTextureCache[imageUrl] = baseTexture; - } - - return baseTexture; - } - - /** - * Helper function that creates a base texture from the given canvas element. - * - * @static - * @param {HTMLCanvasElement} canvas - The canvas element source of the texture - * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.BaseTexture} The new base texture. - */ - static fromCanvas(canvas, scaleMode) - { - - if (!canvas._pixiId) - { - canvas._pixiId = `canvas_${uid()}`; - } - - let baseTexture = BaseTextureCache[canvas._pixiId]; - - if (!baseTexture) - { - - const resource = CanvasResource.from(canvas);// document.createElement('img'); - console.log() - baseTexture = new BaseTexture(); - baseTexture.scaleMode = scaleMode || baseTexture.scaleMode; - baseTexture.setResource(resource); - - BaseTextureCache[canvas._pixiId] = baseTexture; - } - - return baseTexture; - } - - /** - * Helper function that creates a base texture from the given canvas element. - * - * @static - * @param {HTMLCanvasElement} canvas - The canvas element source of the texture - * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.BaseTexture} The new base texture. - */ - static fromSVG(url, scale, scaleMode) - { - let baseTexture = BaseTextureCache[url]; - - if (!baseTexture) - { - const resource = SVGResource.from(url);// document.createElement('img'); - - baseTexture = new BaseTexture(); - baseTexture.scaleMode = scaleMode || baseTexture.scaleMode; - baseTexture.setResource(resource); - - BaseTextureCache[url] = baseTexture; - } - - return baseTexture; - } - get realWidth() { return this.width * this.resolution; @@ -276,72 +198,34 @@ * @param {number} [sourceScale=(auto)] - Scale for the original image, used with Svg images. * @return {PIXI.BaseTexture} The new base texture. */ - static fromNEW(url) - { - var texture = new Texture(); - - var image = new Image(); - image.src = url; - texture.setResource(new ImageResource(image)); - - return texture; - } - - static getResource(source) - { - if (typeof source === 'string') - { - // // - - } - } - - /** - * Helper function that creates a base texture based on the source you provide. - * The source can be - image url, image element, canvas element. - * - * @static - * @param {string|HTMLImageElement|HTMLCanvasElement} source - The source to create base texture from. - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @param {number} [sourceScale=(auto)] - Scale for the original image, used with Svg images. - * @return {PIXI.BaseTexture} The new base texture. - */ static from(source, scaleMode, sourceScale) { + var cacheId = null; + if (typeof source === 'string') { - return BaseTexture.fromImage(source, undefined, scaleMode, sourceScale); + cacheId = source; } - else if (source instanceof HTMLImageElement) + else { - const imageUrl = source.src; - let baseTexture = BaseTextureCache[imageUrl]; - - if (!baseTexture) + if(!source._pixiId) { - baseTexture = new BaseTexture(source, scaleMode); - baseTexture.imageUrl = imageUrl; - - if (sourceScale) - { - baseTexture.sourceScale = sourceScale; - } - - // if there is an @2x at the end of the url we are going to assume its a highres image - baseTexture.resolution = getResolutionOfUrl(imageUrl); - - BaseTextureCache[imageUrl] = baseTexture; + source._pixiId = `pixiid_${uid()}`; } - return baseTexture; + cacheId = source._pixiId; } - else if (source instanceof HTMLCanvasElement) + + let baseTexture = BaseTextureCache[cacheId]; + + if (!baseTexture) { - return BaseTexture.fromCanvas(source, scaleMode); + baseTexture = new BaseTexture(source); + BaseTextureCache[cacheId] = baseTexture; } // lets assume its a base texture! - return source; + return baseTexture; } static fromFloat32Array(width, height, float32Array) @@ -372,4 +256,8 @@ return texture; } -} \ No newline at end of file +} + +BaseTexture.fromImage = BaseTexture.from; +BaseTexture.fromSVG = BaseTexture.from; +BaseTexture.fromCanvas = BaseTexture.from; \ No newline at end of file diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index fdd1886..1fd0ee3 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -277,108 +277,6 @@ } /** - * 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 {string} imageUrl - The image url of the texture - * @param {boolean} [crossorigin] - Whether requests should be treated as crossorigin - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @param {number} [sourceScale=(auto)] - Scale for the original image, used with SVG images. - * @return {PIXI.Texture} The newly created texture - */ - static fromImage(imageUrl, crossorigin, scaleMode, sourceScale) - { - let texture = TextureCache[imageUrl]; - - if (!texture) - { - texture = new Texture(BaseTexture.fromImage(imageUrl, crossorigin, scaleMode, sourceScale)); - TextureCache[imageUrl] = texture; - } - - return texture; - } - - - static fromSVG(svgUrl, crossorigin, scaleMode, sourceScale) - { - let texture = TextureCache[svgUrl]; - - if (!texture) - { - texture = new Texture(BaseTexture.fromSVG(svgUrl, crossorigin, scaleMode, sourceScale)); - TextureCache[svgUrl] = texture; - } - - return texture; - } - - /** - * 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 - * - * @static - * @param {string} frameId - The frame Id of the texture in the cache - * @return {PIXI.Texture} The newly created texture - */ - static fromFrame(frameId) - { - const texture = TextureCache[frameId]; - - if (!texture) - { - throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); - } - - return texture; - } - - /** - * Helper function that creates a new Texture based on the given canvas element. - * - * @static - * @param {HTMLCanvasElement} canvas - The canvas element source of the texture - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.Texture} The newly created texture - */ - static fromCanvas(canvas, scaleMode) - { - return new Texture(BaseTexture.fromCanvas(canvas, scaleMode)); - } - - /** - * Helper function that creates a new Texture based on the given video element. - * - * @static - * @param {HTMLVideoElement|string} video - The URL or actual element of the video - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.Texture} The newly created texture - */ - static fromVideo(video, scaleMode) - { - if (typeof video === 'string') - { - return Texture.fromVideoUrl(video, scaleMode); - } - - return new Texture(VideoBaseTexture.fromVideo(video, scaleMode)); - } - - /** - * Helper function that creates a new Texture based on the video url. - * - * @static - * @param {string} videoUrl - URL of the video - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.Texture} The newly created texture - */ - static fromVideoUrl(videoUrl, scaleMode) - { - return new Texture(VideoBaseTexture.fromUrl(videoUrl, scaleMode)); - } - - /** * Helper function that creates a new Texture based on the source you provide. * The source can be - frame id, image url, video url, canvas element, video element, base texture * @@ -387,48 +285,34 @@ * source - Source to create texture from * @return {PIXI.Texture} The newly created texture */ - static from(source) + static from(source, scaleMode, sourceScale) { - // TODO auto detect cross origin.. - // TODO pass in scale mode? + var cacheId = null; + if (typeof source === 'string') { - const texture = TextureCache[source]; - - if (!texture) + cacheId = source; + } + else + { + if(!source._pixiId) { - // check if its a video.. - const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - - if (isVideo) - { - return Texture.fromVideoUrl(source); - } - - return Texture.fromImage(source); + source._pixiId = `pixiid_${uid()}`; } - return texture; - } - else if (source instanceof HTMLImageElement) - { - return new Texture(BaseTexture.from(source)); - } - else if (source instanceof HTMLCanvasElement) - { - return Texture.fromCanvas(source); - } - else if (source instanceof HTMLVideoElement) - { - return Texture.fromVideo(source); - } - else if (source instanceof BaseTexture) - { - return new Texture(source); + cacheId = source._pixiId; } - // lets assume its a texture! - return source; + let texture = TextureCache[cacheId]; + + if (!texture) + { + texture = new Texture(new BaseTexture(source)); + TextureCache[cacheId] = texture; + } + + // lets assume its a base texture! + return texture; } /** @@ -582,6 +466,12 @@ } } + +Texture.fromImage = Texture.from; +Texture.fromSVG = Texture.from; +Texture.fromCanvas = Texture.from; +Texture.fromFrame = Texture.from; + function createWhiteTexture() { const canvas = document.createElement('canvas'); diff --git a/src/core/textures/resources/ImageResource.js b/src/core/textures/resources/ImageResource.js index 1ee6312..aa1fe5e 100644 --- a/src/core/textures/resources/ImageResource.js +++ b/src/core/textures/resources/ImageResource.js @@ -5,7 +5,7 @@ { constructor(source) { - super(); + super(source); this.load = new Promise((resolve, reject) => { diff --git a/src/core/textures/resources/SVGResource.js b/src/core/textures/resources/SVGResource.js index 29a5810..5c2aa4f 100644 --- a/src/core/textures/resources/SVGResource.js +++ b/src/core/textures/resources/SVGResource.js @@ -1,8 +1,10 @@ import { decomposeDataUri, getSvgSize, uid } from '../../utils'; +import TextureResource from './TextureResource'; -export default class SVGResource + +export default class SVGResource extends TextureResource { constructor(svgSource, scale) { diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 364de1a..b8a4fcc 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -8,6 +8,7 @@ import BufferResource from './resources/BufferResource'; import CanvasResource from './resources/CanvasResource'; import SVGResource from './resources/SVGResource'; +import VideoResource from './resources/VideoResource'; import createResource from './resources/createResource'; import settings from '../settings'; @@ -115,6 +116,8 @@ setResource(resource) { + // TODO currently a resource can only be set once.. + this.resource = resource; this.resource.load.then((resource) => { @@ -140,6 +143,14 @@ } }) + + this.resource.resourceUpdated.add(this); //calls resourceUpaded + } + + resourceUpdated() + { + // the resource was updated.. + this.dirtyId++; } update() @@ -167,95 +178,6 @@ this.valid = valid; } - /** - * Helper function that creates a base texture from the given image url. - * If the image is not in the base texture cache it will be created and loaded. - * - * @static - * @param {string} imageUrl - The image url of the texture - * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.BaseTexture} The new base texture. - */ - static fromImage(imageUrl, crossorigin, scaleMode) - { - let baseTexture = BaseTextureCache[imageUrl]; - - if (!baseTexture) - { - // new Image() breaks tex loading in some versions of Chrome. - // See https://code.google.com/p/chromium/issues/detail?id=238071 - const resource = ImageResource.from(imageUrl, crossorigin);// document.createElement('img'); - - baseTexture = new BaseTexture();//image, scaleMode); - baseTexture.scaleMode = scaleMode || baseTexture.scaleMode; - baseTexture.resolution = getResolutionOfUrl(imageUrl); - baseTexture.setResource(resource); - BaseTextureCache[imageUrl] = baseTexture; - } - - return baseTexture; - } - - /** - * Helper function that creates a base texture from the given canvas element. - * - * @static - * @param {HTMLCanvasElement} canvas - The canvas element source of the texture - * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.BaseTexture} The new base texture. - */ - static fromCanvas(canvas, scaleMode) - { - - if (!canvas._pixiId) - { - canvas._pixiId = `canvas_${uid()}`; - } - - let baseTexture = BaseTextureCache[canvas._pixiId]; - - if (!baseTexture) - { - - const resource = CanvasResource.from(canvas);// document.createElement('img'); - console.log() - baseTexture = new BaseTexture(); - baseTexture.scaleMode = scaleMode || baseTexture.scaleMode; - baseTexture.setResource(resource); - - BaseTextureCache[canvas._pixiId] = baseTexture; - } - - return baseTexture; - } - - /** - * Helper function that creates a base texture from the given canvas element. - * - * @static - * @param {HTMLCanvasElement} canvas - The canvas element source of the texture - * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.BaseTexture} The new base texture. - */ - static fromSVG(url, scale, scaleMode) - { - let baseTexture = BaseTextureCache[url]; - - if (!baseTexture) - { - const resource = SVGResource.from(url);// document.createElement('img'); - - baseTexture = new BaseTexture(); - baseTexture.scaleMode = scaleMode || baseTexture.scaleMode; - baseTexture.setResource(resource); - - BaseTextureCache[url] = baseTexture; - } - - return baseTexture; - } - get realWidth() { return this.width * this.resolution; @@ -276,72 +198,34 @@ * @param {number} [sourceScale=(auto)] - Scale for the original image, used with Svg images. * @return {PIXI.BaseTexture} The new base texture. */ - static fromNEW(url) - { - var texture = new Texture(); - - var image = new Image(); - image.src = url; - texture.setResource(new ImageResource(image)); - - return texture; - } - - static getResource(source) - { - if (typeof source === 'string') - { - // // - - } - } - - /** - * Helper function that creates a base texture based on the source you provide. - * The source can be - image url, image element, canvas element. - * - * @static - * @param {string|HTMLImageElement|HTMLCanvasElement} source - The source to create base texture from. - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @param {number} [sourceScale=(auto)] - Scale for the original image, used with Svg images. - * @return {PIXI.BaseTexture} The new base texture. - */ static from(source, scaleMode, sourceScale) { + var cacheId = null; + if (typeof source === 'string') { - return BaseTexture.fromImage(source, undefined, scaleMode, sourceScale); + cacheId = source; } - else if (source instanceof HTMLImageElement) + else { - const imageUrl = source.src; - let baseTexture = BaseTextureCache[imageUrl]; - - if (!baseTexture) + if(!source._pixiId) { - baseTexture = new BaseTexture(source, scaleMode); - baseTexture.imageUrl = imageUrl; - - if (sourceScale) - { - baseTexture.sourceScale = sourceScale; - } - - // if there is an @2x at the end of the url we are going to assume its a highres image - baseTexture.resolution = getResolutionOfUrl(imageUrl); - - BaseTextureCache[imageUrl] = baseTexture; + source._pixiId = `pixiid_${uid()}`; } - return baseTexture; + cacheId = source._pixiId; } - else if (source instanceof HTMLCanvasElement) + + let baseTexture = BaseTextureCache[cacheId]; + + if (!baseTexture) { - return BaseTexture.fromCanvas(source, scaleMode); + baseTexture = new BaseTexture(source); + BaseTextureCache[cacheId] = baseTexture; } // lets assume its a base texture! - return source; + return baseTexture; } static fromFloat32Array(width, height, float32Array) @@ -372,4 +256,8 @@ return texture; } -} \ No newline at end of file +} + +BaseTexture.fromImage = BaseTexture.from; +BaseTexture.fromSVG = BaseTexture.from; +BaseTexture.fromCanvas = BaseTexture.from; \ No newline at end of file diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index fdd1886..1fd0ee3 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -277,108 +277,6 @@ } /** - * 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 {string} imageUrl - The image url of the texture - * @param {boolean} [crossorigin] - Whether requests should be treated as crossorigin - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @param {number} [sourceScale=(auto)] - Scale for the original image, used with SVG images. - * @return {PIXI.Texture} The newly created texture - */ - static fromImage(imageUrl, crossorigin, scaleMode, sourceScale) - { - let texture = TextureCache[imageUrl]; - - if (!texture) - { - texture = new Texture(BaseTexture.fromImage(imageUrl, crossorigin, scaleMode, sourceScale)); - TextureCache[imageUrl] = texture; - } - - return texture; - } - - - static fromSVG(svgUrl, crossorigin, scaleMode, sourceScale) - { - let texture = TextureCache[svgUrl]; - - if (!texture) - { - texture = new Texture(BaseTexture.fromSVG(svgUrl, crossorigin, scaleMode, sourceScale)); - TextureCache[svgUrl] = texture; - } - - return texture; - } - - /** - * 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 - * - * @static - * @param {string} frameId - The frame Id of the texture in the cache - * @return {PIXI.Texture} The newly created texture - */ - static fromFrame(frameId) - { - const texture = TextureCache[frameId]; - - if (!texture) - { - throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); - } - - return texture; - } - - /** - * Helper function that creates a new Texture based on the given canvas element. - * - * @static - * @param {HTMLCanvasElement} canvas - The canvas element source of the texture - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.Texture} The newly created texture - */ - static fromCanvas(canvas, scaleMode) - { - return new Texture(BaseTexture.fromCanvas(canvas, scaleMode)); - } - - /** - * Helper function that creates a new Texture based on the given video element. - * - * @static - * @param {HTMLVideoElement|string} video - The URL or actual element of the video - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.Texture} The newly created texture - */ - static fromVideo(video, scaleMode) - { - if (typeof video === 'string') - { - return Texture.fromVideoUrl(video, scaleMode); - } - - return new Texture(VideoBaseTexture.fromVideo(video, scaleMode)); - } - - /** - * Helper function that creates a new Texture based on the video url. - * - * @static - * @param {string} videoUrl - URL of the video - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.Texture} The newly created texture - */ - static fromVideoUrl(videoUrl, scaleMode) - { - return new Texture(VideoBaseTexture.fromUrl(videoUrl, scaleMode)); - } - - /** * Helper function that creates a new Texture based on the source you provide. * The source can be - frame id, image url, video url, canvas element, video element, base texture * @@ -387,48 +285,34 @@ * source - Source to create texture from * @return {PIXI.Texture} The newly created texture */ - static from(source) + static from(source, scaleMode, sourceScale) { - // TODO auto detect cross origin.. - // TODO pass in scale mode? + var cacheId = null; + if (typeof source === 'string') { - const texture = TextureCache[source]; - - if (!texture) + cacheId = source; + } + else + { + if(!source._pixiId) { - // check if its a video.. - const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - - if (isVideo) - { - return Texture.fromVideoUrl(source); - } - - return Texture.fromImage(source); + source._pixiId = `pixiid_${uid()}`; } - return texture; - } - else if (source instanceof HTMLImageElement) - { - return new Texture(BaseTexture.from(source)); - } - else if (source instanceof HTMLCanvasElement) - { - return Texture.fromCanvas(source); - } - else if (source instanceof HTMLVideoElement) - { - return Texture.fromVideo(source); - } - else if (source instanceof BaseTexture) - { - return new Texture(source); + cacheId = source._pixiId; } - // lets assume its a texture! - return source; + let texture = TextureCache[cacheId]; + + if (!texture) + { + texture = new Texture(new BaseTexture(source)); + TextureCache[cacheId] = texture; + } + + // lets assume its a base texture! + return texture; } /** @@ -582,6 +466,12 @@ } } + +Texture.fromImage = Texture.from; +Texture.fromSVG = Texture.from; +Texture.fromCanvas = Texture.from; +Texture.fromFrame = Texture.from; + function createWhiteTexture() { const canvas = document.createElement('canvas'); diff --git a/src/core/textures/resources/ImageResource.js b/src/core/textures/resources/ImageResource.js index 1ee6312..aa1fe5e 100644 --- a/src/core/textures/resources/ImageResource.js +++ b/src/core/textures/resources/ImageResource.js @@ -5,7 +5,7 @@ { constructor(source) { - super(); + super(source); this.load = new Promise((resolve, reject) => { diff --git a/src/core/textures/resources/SVGResource.js b/src/core/textures/resources/SVGResource.js index 29a5810..5c2aa4f 100644 --- a/src/core/textures/resources/SVGResource.js +++ b/src/core/textures/resources/SVGResource.js @@ -1,8 +1,10 @@ import { decomposeDataUri, getSvgSize, uid } from '../../utils'; +import TextureResource from './TextureResource'; -export default class SVGResource + +export default class SVGResource extends TextureResource { constructor(svgSource, scale) { diff --git a/src/core/textures/resources/TextureResource.js b/src/core/textures/resources/TextureResource.js index c21ad7f..31bf7f9 100644 --- a/src/core/textures/resources/TextureResource.js +++ b/src/core/textures/resources/TextureResource.js @@ -13,7 +13,7 @@ this.uploadable = true; - this.updated = new Runner('resourceUpdated'); + this.resourceUpdated = new Runner('resourceUpdated'); // create a prommise.. this.load = null; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 364de1a..b8a4fcc 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -8,6 +8,7 @@ import BufferResource from './resources/BufferResource'; import CanvasResource from './resources/CanvasResource'; import SVGResource from './resources/SVGResource'; +import VideoResource from './resources/VideoResource'; import createResource from './resources/createResource'; import settings from '../settings'; @@ -115,6 +116,8 @@ setResource(resource) { + // TODO currently a resource can only be set once.. + this.resource = resource; this.resource.load.then((resource) => { @@ -140,6 +143,14 @@ } }) + + this.resource.resourceUpdated.add(this); //calls resourceUpaded + } + + resourceUpdated() + { + // the resource was updated.. + this.dirtyId++; } update() @@ -167,95 +178,6 @@ this.valid = valid; } - /** - * Helper function that creates a base texture from the given image url. - * If the image is not in the base texture cache it will be created and loaded. - * - * @static - * @param {string} imageUrl - The image url of the texture - * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.BaseTexture} The new base texture. - */ - static fromImage(imageUrl, crossorigin, scaleMode) - { - let baseTexture = BaseTextureCache[imageUrl]; - - if (!baseTexture) - { - // new Image() breaks tex loading in some versions of Chrome. - // See https://code.google.com/p/chromium/issues/detail?id=238071 - const resource = ImageResource.from(imageUrl, crossorigin);// document.createElement('img'); - - baseTexture = new BaseTexture();//image, scaleMode); - baseTexture.scaleMode = scaleMode || baseTexture.scaleMode; - baseTexture.resolution = getResolutionOfUrl(imageUrl); - baseTexture.setResource(resource); - BaseTextureCache[imageUrl] = baseTexture; - } - - return baseTexture; - } - - /** - * Helper function that creates a base texture from the given canvas element. - * - * @static - * @param {HTMLCanvasElement} canvas - The canvas element source of the texture - * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.BaseTexture} The new base texture. - */ - static fromCanvas(canvas, scaleMode) - { - - if (!canvas._pixiId) - { - canvas._pixiId = `canvas_${uid()}`; - } - - let baseTexture = BaseTextureCache[canvas._pixiId]; - - if (!baseTexture) - { - - const resource = CanvasResource.from(canvas);// document.createElement('img'); - console.log() - baseTexture = new BaseTexture(); - baseTexture.scaleMode = scaleMode || baseTexture.scaleMode; - baseTexture.setResource(resource); - - BaseTextureCache[canvas._pixiId] = baseTexture; - } - - return baseTexture; - } - - /** - * Helper function that creates a base texture from the given canvas element. - * - * @static - * @param {HTMLCanvasElement} canvas - The canvas element source of the texture - * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.BaseTexture} The new base texture. - */ - static fromSVG(url, scale, scaleMode) - { - let baseTexture = BaseTextureCache[url]; - - if (!baseTexture) - { - const resource = SVGResource.from(url);// document.createElement('img'); - - baseTexture = new BaseTexture(); - baseTexture.scaleMode = scaleMode || baseTexture.scaleMode; - baseTexture.setResource(resource); - - BaseTextureCache[url] = baseTexture; - } - - return baseTexture; - } - get realWidth() { return this.width * this.resolution; @@ -276,72 +198,34 @@ * @param {number} [sourceScale=(auto)] - Scale for the original image, used with Svg images. * @return {PIXI.BaseTexture} The new base texture. */ - static fromNEW(url) - { - var texture = new Texture(); - - var image = new Image(); - image.src = url; - texture.setResource(new ImageResource(image)); - - return texture; - } - - static getResource(source) - { - if (typeof source === 'string') - { - // // - - } - } - - /** - * Helper function that creates a base texture based on the source you provide. - * The source can be - image url, image element, canvas element. - * - * @static - * @param {string|HTMLImageElement|HTMLCanvasElement} source - The source to create base texture from. - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @param {number} [sourceScale=(auto)] - Scale for the original image, used with Svg images. - * @return {PIXI.BaseTexture} The new base texture. - */ static from(source, scaleMode, sourceScale) { + var cacheId = null; + if (typeof source === 'string') { - return BaseTexture.fromImage(source, undefined, scaleMode, sourceScale); + cacheId = source; } - else if (source instanceof HTMLImageElement) + else { - const imageUrl = source.src; - let baseTexture = BaseTextureCache[imageUrl]; - - if (!baseTexture) + if(!source._pixiId) { - baseTexture = new BaseTexture(source, scaleMode); - baseTexture.imageUrl = imageUrl; - - if (sourceScale) - { - baseTexture.sourceScale = sourceScale; - } - - // if there is an @2x at the end of the url we are going to assume its a highres image - baseTexture.resolution = getResolutionOfUrl(imageUrl); - - BaseTextureCache[imageUrl] = baseTexture; + source._pixiId = `pixiid_${uid()}`; } - return baseTexture; + cacheId = source._pixiId; } - else if (source instanceof HTMLCanvasElement) + + let baseTexture = BaseTextureCache[cacheId]; + + if (!baseTexture) { - return BaseTexture.fromCanvas(source, scaleMode); + baseTexture = new BaseTexture(source); + BaseTextureCache[cacheId] = baseTexture; } // lets assume its a base texture! - return source; + return baseTexture; } static fromFloat32Array(width, height, float32Array) @@ -372,4 +256,8 @@ return texture; } -} \ No newline at end of file +} + +BaseTexture.fromImage = BaseTexture.from; +BaseTexture.fromSVG = BaseTexture.from; +BaseTexture.fromCanvas = BaseTexture.from; \ No newline at end of file diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index fdd1886..1fd0ee3 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -277,108 +277,6 @@ } /** - * 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 {string} imageUrl - The image url of the texture - * @param {boolean} [crossorigin] - Whether requests should be treated as crossorigin - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @param {number} [sourceScale=(auto)] - Scale for the original image, used with SVG images. - * @return {PIXI.Texture} The newly created texture - */ - static fromImage(imageUrl, crossorigin, scaleMode, sourceScale) - { - let texture = TextureCache[imageUrl]; - - if (!texture) - { - texture = new Texture(BaseTexture.fromImage(imageUrl, crossorigin, scaleMode, sourceScale)); - TextureCache[imageUrl] = texture; - } - - return texture; - } - - - static fromSVG(svgUrl, crossorigin, scaleMode, sourceScale) - { - let texture = TextureCache[svgUrl]; - - if (!texture) - { - texture = new Texture(BaseTexture.fromSVG(svgUrl, crossorigin, scaleMode, sourceScale)); - TextureCache[svgUrl] = texture; - } - - return texture; - } - - /** - * 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 - * - * @static - * @param {string} frameId - The frame Id of the texture in the cache - * @return {PIXI.Texture} The newly created texture - */ - static fromFrame(frameId) - { - const texture = TextureCache[frameId]; - - if (!texture) - { - throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); - } - - return texture; - } - - /** - * Helper function that creates a new Texture based on the given canvas element. - * - * @static - * @param {HTMLCanvasElement} canvas - The canvas element source of the texture - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.Texture} The newly created texture - */ - static fromCanvas(canvas, scaleMode) - { - return new Texture(BaseTexture.fromCanvas(canvas, scaleMode)); - } - - /** - * Helper function that creates a new Texture based on the given video element. - * - * @static - * @param {HTMLVideoElement|string} video - The URL or actual element of the video - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.Texture} The newly created texture - */ - static fromVideo(video, scaleMode) - { - if (typeof video === 'string') - { - return Texture.fromVideoUrl(video, scaleMode); - } - - return new Texture(VideoBaseTexture.fromVideo(video, scaleMode)); - } - - /** - * Helper function that creates a new Texture based on the video url. - * - * @static - * @param {string} videoUrl - URL of the video - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.Texture} The newly created texture - */ - static fromVideoUrl(videoUrl, scaleMode) - { - return new Texture(VideoBaseTexture.fromUrl(videoUrl, scaleMode)); - } - - /** * Helper function that creates a new Texture based on the source you provide. * The source can be - frame id, image url, video url, canvas element, video element, base texture * @@ -387,48 +285,34 @@ * source - Source to create texture from * @return {PIXI.Texture} The newly created texture */ - static from(source) + static from(source, scaleMode, sourceScale) { - // TODO auto detect cross origin.. - // TODO pass in scale mode? + var cacheId = null; + if (typeof source === 'string') { - const texture = TextureCache[source]; - - if (!texture) + cacheId = source; + } + else + { + if(!source._pixiId) { - // check if its a video.. - const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - - if (isVideo) - { - return Texture.fromVideoUrl(source); - } - - return Texture.fromImage(source); + source._pixiId = `pixiid_${uid()}`; } - return texture; - } - else if (source instanceof HTMLImageElement) - { - return new Texture(BaseTexture.from(source)); - } - else if (source instanceof HTMLCanvasElement) - { - return Texture.fromCanvas(source); - } - else if (source instanceof HTMLVideoElement) - { - return Texture.fromVideo(source); - } - else if (source instanceof BaseTexture) - { - return new Texture(source); + cacheId = source._pixiId; } - // lets assume its a texture! - return source; + let texture = TextureCache[cacheId]; + + if (!texture) + { + texture = new Texture(new BaseTexture(source)); + TextureCache[cacheId] = texture; + } + + // lets assume its a base texture! + return texture; } /** @@ -582,6 +466,12 @@ } } + +Texture.fromImage = Texture.from; +Texture.fromSVG = Texture.from; +Texture.fromCanvas = Texture.from; +Texture.fromFrame = Texture.from; + function createWhiteTexture() { const canvas = document.createElement('canvas'); diff --git a/src/core/textures/resources/ImageResource.js b/src/core/textures/resources/ImageResource.js index 1ee6312..aa1fe5e 100644 --- a/src/core/textures/resources/ImageResource.js +++ b/src/core/textures/resources/ImageResource.js @@ -5,7 +5,7 @@ { constructor(source) { - super(); + super(source); this.load = new Promise((resolve, reject) => { diff --git a/src/core/textures/resources/SVGResource.js b/src/core/textures/resources/SVGResource.js index 29a5810..5c2aa4f 100644 --- a/src/core/textures/resources/SVGResource.js +++ b/src/core/textures/resources/SVGResource.js @@ -1,8 +1,10 @@ import { decomposeDataUri, getSvgSize, uid } from '../../utils'; +import TextureResource from './TextureResource'; -export default class SVGResource + +export default class SVGResource extends TextureResource { constructor(svgSource, scale) { diff --git a/src/core/textures/resources/TextureResource.js b/src/core/textures/resources/TextureResource.js index c21ad7f..31bf7f9 100644 --- a/src/core/textures/resources/TextureResource.js +++ b/src/core/textures/resources/TextureResource.js @@ -13,7 +13,7 @@ this.uploadable = true; - this.updated = new Runner('resourceUpdated'); + this.resourceUpdated = new Runner('resourceUpdated'); // create a prommise.. this.load = null; diff --git a/src/core/textures/resources/VideoResource.js b/src/core/textures/resources/VideoResource.js new file mode 100644 index 0000000..7d525c0 --- /dev/null +++ b/src/core/textures/resources/VideoResource.js @@ -0,0 +1,290 @@ +import TextureResource from './TextureResource'; +import * as ticker from '../../ticker'; +import { + uid +} from '../../utils'; + +export default class VideoResource extends TextureResource +{ + constructor(source) + { + super(source); + + this._autoUpdate = true; + this._isAutoUpdating = false; + + /** + * When set to true will automatically play videos used by this texture once + * they are loaded. If false, it will not modify the playing state. + * + * @member {boolean} + * @default true + */ + this.autoPlay = true; + + this.update = this.update.bind(this); + this._onCanPlay = this._onCanPlay.bind(this); + + if ((source.readyState === source.HAVE_ENOUGH_DATA || source.readyState === source.HAVE_FUTURE_DATA) + && source.width && source.height) + { + source.complete = true; + } + + source.addEventListener('play', this._onPlayStart.bind(this)); + source.addEventListener('pause', this._onPlayStop.bind(this)); + + + if (!this._isSourceReady()) + { + source.addEventListener('canplay', this._onCanPlay); + source.addEventListener('canplaythrough', this._onCanPlay); + } + else + { + this._onCanPlay(); + } + + this.load = new Promise((resolve, reject) => { + + this.resolve = resolve; + + if(this.loaded) + { + this.resolve(this); + } + }) + } + + update() + { + this.resourceUpdated.emit(); + } + + /** + * Returns true if the underlying source is playing. + * + * @private + * @return {boolean} True if playing. + */ + _isSourcePlaying() + { + const source = this.source; + + return (source.currentTime > 0 && source.paused === false && source.ended === false && source.readyState > 2); + } + + /** + * Returns true if the underlying source is ready for playing. + * + * @private + * @return {boolean} True if ready. + */ + _isSourceReady() + { + return this.source.readyState === 3 || this.source.readyState === 4; + } + + /** + * Runs the update loop when the video is ready to play + * + * @private + */ + _onPlayStart() + { + // Just in case the video has not received its can play even yet.. + if (!this.loaded) + { + this._onCanPlay(); + } + + if (!this._isAutoUpdating && this.autoUpdate) + { + ticker.shared.add(this.update, this); + this._isAutoUpdating = true; + } + } + + /** + * Fired when a pause event is triggered, stops the update loop + * + * @private + */ + _onPlayStop() + { + if (this._isAutoUpdating) + { + ticker.shared.remove(this.update, this); + this._isAutoUpdating = false; + } + } + + /** + * Fired when the video is loaded and ready to play + * + * @private + */ + _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) + { + this.loaded = true; + if(this.resolve) + { + this.resolve(this); + } + } + + if (this._isSourcePlaying()) + { + this._onPlayStart(); + } + else if (this.autoPlay) + { + this.source.play(); + } + + } + } + + /** + * Destroys this texture + * + */ + destroy() + { + if (this._isAutoUpdating) + { + ticker.shared.remove(this.update, this); + } +/* + if (this.source && this.source._pixiId) + { + delete BaseTextureCache[this.source._pixiId]; + delete this.source._pixiId; + } +*/ + // super.destroy(); + } + + /** + * Mimic Pixi BaseTexture.from.... method. + * + * @static + * @param {HTMLVideoElement} video - Video to create texture from + * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values + * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture + */ + static fromVideo(video, scaleMode) + { + if (!video._pixiId) + { + video._pixiId = `video_${uid()}`; + } + + let baseTexture = BaseTextureCache[video._pixiId]; + + if (!baseTexture) + { + baseTexture = new VideoBaseTexture(video, scaleMode); + BaseTextureCache[video._pixiId] = baseTexture; + } + + return baseTexture; + } + + /** + * Should the base texture automatically update itself, set to true by default + * + * @member {boolean} + */ + get autoUpdate() + { + return this._autoUpdate; + } + + set autoUpdate(value) // eslint-disable-line require-jsdoc + { + if (value !== this._autoUpdate) + { + this._autoUpdate = value; + + if (!this._autoUpdate && this._isAutoUpdating) + { + ticker.shared.remove(this.update, this); + this._isAutoUpdating = false; + } + else if (this._autoUpdate && !this._isAutoUpdating) + { + ticker.shared.add(this.update, this); + this._isAutoUpdating = true; + } + } + } + + /** + * Helper function that creates a new BaseTexture based on the given video element. + * This BaseTexture can then be used to create a texture + * + * @static + * @param {string|object|string[]|object[]} videoSrc - The URL(s) for the video. + * @param {string} [videoSrc.src] - One of the source urls for the video + * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified + * the url's extension will be used as the second part of the mime type. + * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture + */ + static fromUrl(videoSrc, scaleMode) + { + const video = document.createElement('video'); + + video.setAttribute('webkit-playsinline', ''); + video.setAttribute('playsinline', ''); + + // array of objects or strings + if (Array.isArray(videoSrc)) + { + for (let i = 0; i < videoSrc.length; ++i) + { + video.appendChild(createSource(videoSrc[i].src || videoSrc[i], videoSrc[i].mime)); + } + } + // single object or string + else + { + video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + } + + video.load(); + + return new VideoResource(video, scaleMode); + } + + +} + + +function createSource(path, type) +{ + if (!type) + { + type = `video/${path.substr(path.lastIndexOf('.') + 1)}`; + } + + const source = document.createElement('source'); + + source.src = path; + source.type = type; + + return source; +} diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 364de1a..b8a4fcc 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -8,6 +8,7 @@ import BufferResource from './resources/BufferResource'; import CanvasResource from './resources/CanvasResource'; import SVGResource from './resources/SVGResource'; +import VideoResource from './resources/VideoResource'; import createResource from './resources/createResource'; import settings from '../settings'; @@ -115,6 +116,8 @@ setResource(resource) { + // TODO currently a resource can only be set once.. + this.resource = resource; this.resource.load.then((resource) => { @@ -140,6 +143,14 @@ } }) + + this.resource.resourceUpdated.add(this); //calls resourceUpaded + } + + resourceUpdated() + { + // the resource was updated.. + this.dirtyId++; } update() @@ -167,95 +178,6 @@ this.valid = valid; } - /** - * Helper function that creates a base texture from the given image url. - * If the image is not in the base texture cache it will be created and loaded. - * - * @static - * @param {string} imageUrl - The image url of the texture - * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.BaseTexture} The new base texture. - */ - static fromImage(imageUrl, crossorigin, scaleMode) - { - let baseTexture = BaseTextureCache[imageUrl]; - - if (!baseTexture) - { - // new Image() breaks tex loading in some versions of Chrome. - // See https://code.google.com/p/chromium/issues/detail?id=238071 - const resource = ImageResource.from(imageUrl, crossorigin);// document.createElement('img'); - - baseTexture = new BaseTexture();//image, scaleMode); - baseTexture.scaleMode = scaleMode || baseTexture.scaleMode; - baseTexture.resolution = getResolutionOfUrl(imageUrl); - baseTexture.setResource(resource); - BaseTextureCache[imageUrl] = baseTexture; - } - - return baseTexture; - } - - /** - * Helper function that creates a base texture from the given canvas element. - * - * @static - * @param {HTMLCanvasElement} canvas - The canvas element source of the texture - * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.BaseTexture} The new base texture. - */ - static fromCanvas(canvas, scaleMode) - { - - if (!canvas._pixiId) - { - canvas._pixiId = `canvas_${uid()}`; - } - - let baseTexture = BaseTextureCache[canvas._pixiId]; - - if (!baseTexture) - { - - const resource = CanvasResource.from(canvas);// document.createElement('img'); - console.log() - baseTexture = new BaseTexture(); - baseTexture.scaleMode = scaleMode || baseTexture.scaleMode; - baseTexture.setResource(resource); - - BaseTextureCache[canvas._pixiId] = baseTexture; - } - - return baseTexture; - } - - /** - * Helper function that creates a base texture from the given canvas element. - * - * @static - * @param {HTMLCanvasElement} canvas - The canvas element source of the texture - * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.BaseTexture} The new base texture. - */ - static fromSVG(url, scale, scaleMode) - { - let baseTexture = BaseTextureCache[url]; - - if (!baseTexture) - { - const resource = SVGResource.from(url);// document.createElement('img'); - - baseTexture = new BaseTexture(); - baseTexture.scaleMode = scaleMode || baseTexture.scaleMode; - baseTexture.setResource(resource); - - BaseTextureCache[url] = baseTexture; - } - - return baseTexture; - } - get realWidth() { return this.width * this.resolution; @@ -276,72 +198,34 @@ * @param {number} [sourceScale=(auto)] - Scale for the original image, used with Svg images. * @return {PIXI.BaseTexture} The new base texture. */ - static fromNEW(url) - { - var texture = new Texture(); - - var image = new Image(); - image.src = url; - texture.setResource(new ImageResource(image)); - - return texture; - } - - static getResource(source) - { - if (typeof source === 'string') - { - // // - - } - } - - /** - * Helper function that creates a base texture based on the source you provide. - * The source can be - image url, image element, canvas element. - * - * @static - * @param {string|HTMLImageElement|HTMLCanvasElement} source - The source to create base texture from. - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @param {number} [sourceScale=(auto)] - Scale for the original image, used with Svg images. - * @return {PIXI.BaseTexture} The new base texture. - */ static from(source, scaleMode, sourceScale) { + var cacheId = null; + if (typeof source === 'string') { - return BaseTexture.fromImage(source, undefined, scaleMode, sourceScale); + cacheId = source; } - else if (source instanceof HTMLImageElement) + else { - const imageUrl = source.src; - let baseTexture = BaseTextureCache[imageUrl]; - - if (!baseTexture) + if(!source._pixiId) { - baseTexture = new BaseTexture(source, scaleMode); - baseTexture.imageUrl = imageUrl; - - if (sourceScale) - { - baseTexture.sourceScale = sourceScale; - } - - // if there is an @2x at the end of the url we are going to assume its a highres image - baseTexture.resolution = getResolutionOfUrl(imageUrl); - - BaseTextureCache[imageUrl] = baseTexture; + source._pixiId = `pixiid_${uid()}`; } - return baseTexture; + cacheId = source._pixiId; } - else if (source instanceof HTMLCanvasElement) + + let baseTexture = BaseTextureCache[cacheId]; + + if (!baseTexture) { - return BaseTexture.fromCanvas(source, scaleMode); + baseTexture = new BaseTexture(source); + BaseTextureCache[cacheId] = baseTexture; } // lets assume its a base texture! - return source; + return baseTexture; } static fromFloat32Array(width, height, float32Array) @@ -372,4 +256,8 @@ return texture; } -} \ No newline at end of file +} + +BaseTexture.fromImage = BaseTexture.from; +BaseTexture.fromSVG = BaseTexture.from; +BaseTexture.fromCanvas = BaseTexture.from; \ No newline at end of file diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index fdd1886..1fd0ee3 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -277,108 +277,6 @@ } /** - * 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 {string} imageUrl - The image url of the texture - * @param {boolean} [crossorigin] - Whether requests should be treated as crossorigin - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @param {number} [sourceScale=(auto)] - Scale for the original image, used with SVG images. - * @return {PIXI.Texture} The newly created texture - */ - static fromImage(imageUrl, crossorigin, scaleMode, sourceScale) - { - let texture = TextureCache[imageUrl]; - - if (!texture) - { - texture = new Texture(BaseTexture.fromImage(imageUrl, crossorigin, scaleMode, sourceScale)); - TextureCache[imageUrl] = texture; - } - - return texture; - } - - - static fromSVG(svgUrl, crossorigin, scaleMode, sourceScale) - { - let texture = TextureCache[svgUrl]; - - if (!texture) - { - texture = new Texture(BaseTexture.fromSVG(svgUrl, crossorigin, scaleMode, sourceScale)); - TextureCache[svgUrl] = texture; - } - - return texture; - } - - /** - * 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 - * - * @static - * @param {string} frameId - The frame Id of the texture in the cache - * @return {PIXI.Texture} The newly created texture - */ - static fromFrame(frameId) - { - const texture = TextureCache[frameId]; - - if (!texture) - { - throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); - } - - return texture; - } - - /** - * Helper function that creates a new Texture based on the given canvas element. - * - * @static - * @param {HTMLCanvasElement} canvas - The canvas element source of the texture - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.Texture} The newly created texture - */ - static fromCanvas(canvas, scaleMode) - { - return new Texture(BaseTexture.fromCanvas(canvas, scaleMode)); - } - - /** - * Helper function that creates a new Texture based on the given video element. - * - * @static - * @param {HTMLVideoElement|string} video - The URL or actual element of the video - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.Texture} The newly created texture - */ - static fromVideo(video, scaleMode) - { - if (typeof video === 'string') - { - return Texture.fromVideoUrl(video, scaleMode); - } - - return new Texture(VideoBaseTexture.fromVideo(video, scaleMode)); - } - - /** - * Helper function that creates a new Texture based on the video url. - * - * @static - * @param {string} videoUrl - URL of the video - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @return {PIXI.Texture} The newly created texture - */ - static fromVideoUrl(videoUrl, scaleMode) - { - return new Texture(VideoBaseTexture.fromUrl(videoUrl, scaleMode)); - } - - /** * Helper function that creates a new Texture based on the source you provide. * The source can be - frame id, image url, video url, canvas element, video element, base texture * @@ -387,48 +285,34 @@ * source - Source to create texture from * @return {PIXI.Texture} The newly created texture */ - static from(source) + static from(source, scaleMode, sourceScale) { - // TODO auto detect cross origin.. - // TODO pass in scale mode? + var cacheId = null; + if (typeof source === 'string') { - const texture = TextureCache[source]; - - if (!texture) + cacheId = source; + } + else + { + if(!source._pixiId) { - // check if its a video.. - const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - - if (isVideo) - { - return Texture.fromVideoUrl(source); - } - - return Texture.fromImage(source); + source._pixiId = `pixiid_${uid()}`; } - return texture; - } - else if (source instanceof HTMLImageElement) - { - return new Texture(BaseTexture.from(source)); - } - else if (source instanceof HTMLCanvasElement) - { - return Texture.fromCanvas(source); - } - else if (source instanceof HTMLVideoElement) - { - return Texture.fromVideo(source); - } - else if (source instanceof BaseTexture) - { - return new Texture(source); + cacheId = source._pixiId; } - // lets assume its a texture! - return source; + let texture = TextureCache[cacheId]; + + if (!texture) + { + texture = new Texture(new BaseTexture(source)); + TextureCache[cacheId] = texture; + } + + // lets assume its a base texture! + return texture; } /** @@ -582,6 +466,12 @@ } } + +Texture.fromImage = Texture.from; +Texture.fromSVG = Texture.from; +Texture.fromCanvas = Texture.from; +Texture.fromFrame = Texture.from; + function createWhiteTexture() { const canvas = document.createElement('canvas'); diff --git a/src/core/textures/resources/ImageResource.js b/src/core/textures/resources/ImageResource.js index 1ee6312..aa1fe5e 100644 --- a/src/core/textures/resources/ImageResource.js +++ b/src/core/textures/resources/ImageResource.js @@ -5,7 +5,7 @@ { constructor(source) { - super(); + super(source); this.load = new Promise((resolve, reject) => { diff --git a/src/core/textures/resources/SVGResource.js b/src/core/textures/resources/SVGResource.js index 29a5810..5c2aa4f 100644 --- a/src/core/textures/resources/SVGResource.js +++ b/src/core/textures/resources/SVGResource.js @@ -1,8 +1,10 @@ import { decomposeDataUri, getSvgSize, uid } from '../../utils'; +import TextureResource from './TextureResource'; -export default class SVGResource + +export default class SVGResource extends TextureResource { constructor(svgSource, scale) { diff --git a/src/core/textures/resources/TextureResource.js b/src/core/textures/resources/TextureResource.js index c21ad7f..31bf7f9 100644 --- a/src/core/textures/resources/TextureResource.js +++ b/src/core/textures/resources/TextureResource.js @@ -13,7 +13,7 @@ this.uploadable = true; - this.updated = new Runner('resourceUpdated'); + this.resourceUpdated = new Runner('resourceUpdated'); // create a prommise.. this.load = null; diff --git a/src/core/textures/resources/VideoResource.js b/src/core/textures/resources/VideoResource.js new file mode 100644 index 0000000..7d525c0 --- /dev/null +++ b/src/core/textures/resources/VideoResource.js @@ -0,0 +1,290 @@ +import TextureResource from './TextureResource'; +import * as ticker from '../../ticker'; +import { + uid +} from '../../utils'; + +export default class VideoResource extends TextureResource +{ + constructor(source) + { + super(source); + + this._autoUpdate = true; + this._isAutoUpdating = false; + + /** + * When set to true will automatically play videos used by this texture once + * they are loaded. If false, it will not modify the playing state. + * + * @member {boolean} + * @default true + */ + this.autoPlay = true; + + this.update = this.update.bind(this); + this._onCanPlay = this._onCanPlay.bind(this); + + if ((source.readyState === source.HAVE_ENOUGH_DATA || source.readyState === source.HAVE_FUTURE_DATA) + && source.width && source.height) + { + source.complete = true; + } + + source.addEventListener('play', this._onPlayStart.bind(this)); + source.addEventListener('pause', this._onPlayStop.bind(this)); + + + if (!this._isSourceReady()) + { + source.addEventListener('canplay', this._onCanPlay); + source.addEventListener('canplaythrough', this._onCanPlay); + } + else + { + this._onCanPlay(); + } + + this.load = new Promise((resolve, reject) => { + + this.resolve = resolve; + + if(this.loaded) + { + this.resolve(this); + } + }) + } + + update() + { + this.resourceUpdated.emit(); + } + + /** + * Returns true if the underlying source is playing. + * + * @private + * @return {boolean} True if playing. + */ + _isSourcePlaying() + { + const source = this.source; + + return (source.currentTime > 0 && source.paused === false && source.ended === false && source.readyState > 2); + } + + /** + * Returns true if the underlying source is ready for playing. + * + * @private + * @return {boolean} True if ready. + */ + _isSourceReady() + { + return this.source.readyState === 3 || this.source.readyState === 4; + } + + /** + * Runs the update loop when the video is ready to play + * + * @private + */ + _onPlayStart() + { + // Just in case the video has not received its can play even yet.. + if (!this.loaded) + { + this._onCanPlay(); + } + + if (!this._isAutoUpdating && this.autoUpdate) + { + ticker.shared.add(this.update, this); + this._isAutoUpdating = true; + } + } + + /** + * Fired when a pause event is triggered, stops the update loop + * + * @private + */ + _onPlayStop() + { + if (this._isAutoUpdating) + { + ticker.shared.remove(this.update, this); + this._isAutoUpdating = false; + } + } + + /** + * Fired when the video is loaded and ready to play + * + * @private + */ + _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) + { + this.loaded = true; + if(this.resolve) + { + this.resolve(this); + } + } + + if (this._isSourcePlaying()) + { + this._onPlayStart(); + } + else if (this.autoPlay) + { + this.source.play(); + } + + } + } + + /** + * Destroys this texture + * + */ + destroy() + { + if (this._isAutoUpdating) + { + ticker.shared.remove(this.update, this); + } +/* + if (this.source && this.source._pixiId) + { + delete BaseTextureCache[this.source._pixiId]; + delete this.source._pixiId; + } +*/ + // super.destroy(); + } + + /** + * Mimic Pixi BaseTexture.from.... method. + * + * @static + * @param {HTMLVideoElement} video - Video to create texture from + * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values + * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture + */ + static fromVideo(video, scaleMode) + { + if (!video._pixiId) + { + video._pixiId = `video_${uid()}`; + } + + let baseTexture = BaseTextureCache[video._pixiId]; + + if (!baseTexture) + { + baseTexture = new VideoBaseTexture(video, scaleMode); + BaseTextureCache[video._pixiId] = baseTexture; + } + + return baseTexture; + } + + /** + * Should the base texture automatically update itself, set to true by default + * + * @member {boolean} + */ + get autoUpdate() + { + return this._autoUpdate; + } + + set autoUpdate(value) // eslint-disable-line require-jsdoc + { + if (value !== this._autoUpdate) + { + this._autoUpdate = value; + + if (!this._autoUpdate && this._isAutoUpdating) + { + ticker.shared.remove(this.update, this); + this._isAutoUpdating = false; + } + else if (this._autoUpdate && !this._isAutoUpdating) + { + ticker.shared.add(this.update, this); + this._isAutoUpdating = true; + } + } + } + + /** + * Helper function that creates a new BaseTexture based on the given video element. + * This BaseTexture can then be used to create a texture + * + * @static + * @param {string|object|string[]|object[]} videoSrc - The URL(s) for the video. + * @param {string} [videoSrc.src] - One of the source urls for the video + * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified + * the url's extension will be used as the second part of the mime type. + * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture + */ + static fromUrl(videoSrc, scaleMode) + { + const video = document.createElement('video'); + + video.setAttribute('webkit-playsinline', ''); + video.setAttribute('playsinline', ''); + + // array of objects or strings + if (Array.isArray(videoSrc)) + { + for (let i = 0; i < videoSrc.length; ++i) + { + video.appendChild(createSource(videoSrc[i].src || videoSrc[i], videoSrc[i].mime)); + } + } + // single object or string + else + { + video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + } + + video.load(); + + return new VideoResource(video, scaleMode); + } + + +} + + +function createSource(path, type) +{ + if (!type) + { + type = `video/${path.substr(path.lastIndexOf('.') + 1)}`; + } + + const source = document.createElement('source'); + + source.src = path; + source.type = type; + + return source; +} diff --git a/src/core/textures/resources/createResource.js b/src/core/textures/resources/createResource.js new file mode 100644 index 0000000..f3fa500 --- /dev/null +++ b/src/core/textures/resources/createResource.js @@ -0,0 +1,45 @@ +import ImageResource from './ImageResource'; +import SVGResource from './SVGResource'; +import CanvasResource from './CanvasResource'; +import VideoResource from './VideoResource'; + +export default function createResource(source) +{ + if (typeof source === 'string') + { + // check if its a video.. + if (source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/)) + { + return new VideoResource.fromUrl(source); + //video! + //return Texture.fromVideoUrl(source); + //return SVGResource.from(url); + } + else if (source.match(/\.(svg)$/)) + { + // SVG + return SVGResource.from(source); + } + else + { + // probably an image! + return ImageResource.from(source); + } + } + else if (source instanceof HTMLImageElement) + { + return new ImageResource(source); + } + else if (source instanceof HTMLCanvasElement) + { + return new CanvasResource(source); + } + else if (source instanceof HTMLVideoElement) + { + return new VideoResource(source); + } + else + { + return source; + } +} \ No newline at end of file