diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index aa15b4f..89a2b2c 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -51,11 +51,25 @@ */ this.context = this.view.getContext("2d"); + //some filter variables + this.smoothProperty = null; + + if('imageSmoothingEnabled' in this.context) + this.smoothProperty = 'imageSmoothingEnabled'; + else if('webkitImageSmoothingEnabled' in this.context) + this.smoothProperty = 'webkitImageSmoothingEnabled'; + else if('mozImageSmoothingEnabled' in this.context) + this.smoothProperty = 'mozImageSmoothingEnabled'; + else if('oImageSmoothingEnabled' in this.context) + this.smoothProperty = 'oImageSmoothingEnabled'; + + this.scaleMode = null; + this.refresh = true; // hack to enable some hardware acceleration! //this.view.style["transform"] = "translatez(0)"; - this.view.width = this.width; + this.view.width = this.width; this.view.height = this.height; this.count = 0; } @@ -172,8 +186,14 @@ context.globalAlpha = displayObject.worldAlpha; context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); + + //if smoothingEnabled is supported and we need to change the smoothing property for this texture + if(this.smoothProperty && this.scaleMode !== displayObject.texture.baseTexture.scaleMode) { + this.scaleMode = displayObject.texture.baseTexture.scaleMode; + context[this.smoothProperty] = (this.scaleMode === PIXI.BaseTexture.SCALE_MODE.LINEAR); + } - context.drawImage(displayObject.texture.baseTexture.source, + context.drawImage(displayObject.texture.baseTexture.source, frame.x, frame.y, frame.width, diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index aa15b4f..89a2b2c 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -51,11 +51,25 @@ */ this.context = this.view.getContext("2d"); + //some filter variables + this.smoothProperty = null; + + if('imageSmoothingEnabled' in this.context) + this.smoothProperty = 'imageSmoothingEnabled'; + else if('webkitImageSmoothingEnabled' in this.context) + this.smoothProperty = 'webkitImageSmoothingEnabled'; + else if('mozImageSmoothingEnabled' in this.context) + this.smoothProperty = 'mozImageSmoothingEnabled'; + else if('oImageSmoothingEnabled' in this.context) + this.smoothProperty = 'oImageSmoothingEnabled'; + + this.scaleMode = null; + this.refresh = true; // hack to enable some hardware acceleration! //this.view.style["transform"] = "translatez(0)"; - this.view.width = this.width; + this.view.width = this.width; this.view.height = this.height; this.count = 0; } @@ -172,8 +186,14 @@ context.globalAlpha = displayObject.worldAlpha; context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); + + //if smoothingEnabled is supported and we need to change the smoothing property for this texture + if(this.smoothProperty && this.scaleMode !== displayObject.texture.baseTexture.scaleMode) { + this.scaleMode = displayObject.texture.baseTexture.scaleMode; + context[this.smoothProperty] = (this.scaleMode === PIXI.BaseTexture.SCALE_MODE.LINEAR); + } - context.drawImage(displayObject.texture.baseTexture.source, + context.drawImage(displayObject.texture.baseTexture.source, frame.x, frame.y, frame.width, diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index e11cd44..64afde7 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -246,8 +246,8 @@ gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === PIXI.BaseTexture.SCALE_MODE.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === PIXI.BaseTexture.SCALE_MODE.LINEAR ? gl.LINEAR : gl.NEAREST); // reguler... diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index aa15b4f..89a2b2c 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -51,11 +51,25 @@ */ this.context = this.view.getContext("2d"); + //some filter variables + this.smoothProperty = null; + + if('imageSmoothingEnabled' in this.context) + this.smoothProperty = 'imageSmoothingEnabled'; + else if('webkitImageSmoothingEnabled' in this.context) + this.smoothProperty = 'webkitImageSmoothingEnabled'; + else if('mozImageSmoothingEnabled' in this.context) + this.smoothProperty = 'mozImageSmoothingEnabled'; + else if('oImageSmoothingEnabled' in this.context) + this.smoothProperty = 'oImageSmoothingEnabled'; + + this.scaleMode = null; + this.refresh = true; // hack to enable some hardware acceleration! //this.view.style["transform"] = "translatez(0)"; - this.view.width = this.width; + this.view.width = this.width; this.view.height = this.height; this.count = 0; } @@ -172,8 +186,14 @@ context.globalAlpha = displayObject.worldAlpha; context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); + + //if smoothingEnabled is supported and we need to change the smoothing property for this texture + if(this.smoothProperty && this.scaleMode !== displayObject.texture.baseTexture.scaleMode) { + this.scaleMode = displayObject.texture.baseTexture.scaleMode; + context[this.smoothProperty] = (this.scaleMode === PIXI.BaseTexture.SCALE_MODE.LINEAR); + } - context.drawImage(displayObject.texture.baseTexture.source, + context.drawImage(displayObject.texture.baseTexture.source, frame.x, frame.y, frame.width, diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index e11cd44..64afde7 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -246,8 +246,8 @@ gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === PIXI.BaseTexture.SCALE_MODE.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === PIXI.BaseTexture.SCALE_MODE.LINEAR ? gl.LINEAR : gl.NEAREST); // reguler... diff --git a/src/pixi/textures/BaseTexture.js b/src/pixi/textures/BaseTexture.js index 099f227..4bba95c 100644 --- a/src/pixi/textures/BaseTexture.js +++ b/src/pixi/textures/BaseTexture.js @@ -14,7 +14,7 @@ * @constructor * @param source {String} the source object (image or canvas) */ -PIXI.BaseTexture = function(source) +PIXI.BaseTexture = function(source, scaleMode) { PIXI.EventTarget.call( this ); @@ -37,6 +37,14 @@ this.height = 100; /** + * The scale mode to apply when scaling this texture + * @property scaleMode + * @type PIXI.BaseTexture.SCALE_MODE + * @default PIXI.BaseTexture.SCALE_MODE.LINEAR + */ + this.scaleMode = scaleMode || PIXI.BaseTexture.SCALE_MODE.DEFAULT; + + /** * [read-only] Describes if the base texture has loaded or not * * @property hasLoaded @@ -137,7 +145,7 @@ * @param imageUrl {String} The image url of the texture * @return BaseTexture */ -PIXI.BaseTexture.fromImage = function(imageUrl, crossorigin) +PIXI.BaseTexture.fromImage = function(imageUrl, crossorigin, scaleMode) { var baseTexture = PIXI.BaseTextureCache[imageUrl]; if(!baseTexture) @@ -150,10 +158,16 @@ image.crossOrigin = ''; } image.src = imageUrl; - baseTexture = new PIXI.BaseTexture(image); + baseTexture = new PIXI.BaseTexture(image, scaleMode); baseTexture.imageUrl = imageUrl; PIXI.BaseTextureCache[imageUrl] = baseTexture; } return baseTexture; } + +PIXI.BaseTexture.SCALE_MODE = { + DEFAULT: 0, //default to LINEAR + LINEAR: 0, + NEAREST: 1 +}; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index aa15b4f..89a2b2c 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -51,11 +51,25 @@ */ this.context = this.view.getContext("2d"); + //some filter variables + this.smoothProperty = null; + + if('imageSmoothingEnabled' in this.context) + this.smoothProperty = 'imageSmoothingEnabled'; + else if('webkitImageSmoothingEnabled' in this.context) + this.smoothProperty = 'webkitImageSmoothingEnabled'; + else if('mozImageSmoothingEnabled' in this.context) + this.smoothProperty = 'mozImageSmoothingEnabled'; + else if('oImageSmoothingEnabled' in this.context) + this.smoothProperty = 'oImageSmoothingEnabled'; + + this.scaleMode = null; + this.refresh = true; // hack to enable some hardware acceleration! //this.view.style["transform"] = "translatez(0)"; - this.view.width = this.width; + this.view.width = this.width; this.view.height = this.height; this.count = 0; } @@ -172,8 +186,14 @@ context.globalAlpha = displayObject.worldAlpha; context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); + + //if smoothingEnabled is supported and we need to change the smoothing property for this texture + if(this.smoothProperty && this.scaleMode !== displayObject.texture.baseTexture.scaleMode) { + this.scaleMode = displayObject.texture.baseTexture.scaleMode; + context[this.smoothProperty] = (this.scaleMode === PIXI.BaseTexture.SCALE_MODE.LINEAR); + } - context.drawImage(displayObject.texture.baseTexture.source, + context.drawImage(displayObject.texture.baseTexture.source, frame.x, frame.y, frame.width, diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index e11cd44..64afde7 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -246,8 +246,8 @@ gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === PIXI.BaseTexture.SCALE_MODE.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === PIXI.BaseTexture.SCALE_MODE.LINEAR ? gl.LINEAR : gl.NEAREST); // reguler... diff --git a/src/pixi/textures/BaseTexture.js b/src/pixi/textures/BaseTexture.js index 099f227..4bba95c 100644 --- a/src/pixi/textures/BaseTexture.js +++ b/src/pixi/textures/BaseTexture.js @@ -14,7 +14,7 @@ * @constructor * @param source {String} the source object (image or canvas) */ -PIXI.BaseTexture = function(source) +PIXI.BaseTexture = function(source, scaleMode) { PIXI.EventTarget.call( this ); @@ -37,6 +37,14 @@ this.height = 100; /** + * The scale mode to apply when scaling this texture + * @property scaleMode + * @type PIXI.BaseTexture.SCALE_MODE + * @default PIXI.BaseTexture.SCALE_MODE.LINEAR + */ + this.scaleMode = scaleMode || PIXI.BaseTexture.SCALE_MODE.DEFAULT; + + /** * [read-only] Describes if the base texture has loaded or not * * @property hasLoaded @@ -137,7 +145,7 @@ * @param imageUrl {String} The image url of the texture * @return BaseTexture */ -PIXI.BaseTexture.fromImage = function(imageUrl, crossorigin) +PIXI.BaseTexture.fromImage = function(imageUrl, crossorigin, scaleMode) { var baseTexture = PIXI.BaseTextureCache[imageUrl]; if(!baseTexture) @@ -150,10 +158,16 @@ image.crossOrigin = ''; } image.src = imageUrl; - baseTexture = new PIXI.BaseTexture(image); + baseTexture = new PIXI.BaseTexture(image, scaleMode); baseTexture.imageUrl = imageUrl; PIXI.BaseTextureCache[imageUrl] = baseTexture; } return baseTexture; } + +PIXI.BaseTexture.SCALE_MODE = { + DEFAULT: 0, //default to LINEAR + LINEAR: 0, + NEAREST: 1 +}; diff --git a/src/pixi/textures/Texture.js b/src/pixi/textures/Texture.js index 11d82a0..e14c09e 100644 --- a/src/pixi/textures/Texture.js +++ b/src/pixi/textures/Texture.js @@ -134,13 +134,13 @@ * @param crossorigin {Boolean} Whether requests should be treated as crossorigin * @return Texture */ -PIXI.Texture.fromImage = function(imageUrl, crossorigin) +PIXI.Texture.fromImage = function(imageUrl, crossorigin, scaleMode) { var texture = PIXI.TextureCache[imageUrl]; if(!texture) { - texture = new PIXI.Texture(PIXI.BaseTexture.fromImage(imageUrl, crossorigin)); + texture = new PIXI.Texture(PIXI.BaseTexture.fromImage(imageUrl, crossorigin, scaleMode)); PIXI.TextureCache[imageUrl] = texture; } @@ -172,9 +172,9 @@ * @param canvas {Canvas} The canvas element source of the texture * @return Texture */ -PIXI.Texture.fromCanvas = function(canvas) +PIXI.Texture.fromCanvas = function(canvas, scaleMode) { - var baseTexture = new PIXI.BaseTexture(canvas); + var baseTexture = new PIXI.BaseTexture(canvas, scaleMode); return new PIXI.Texture(baseTexture); } @@ -210,3 +210,4 @@ // this is more for webGL.. it contains updated frames.. PIXI.Texture.frameUpdates = []; +PIXI.Texture.SCALE_MODE = PIXI.BaseTexture.SCALE_MODE; \ No newline at end of file