diff --git a/src/graphics/gl-textures.js b/src/graphics/gl-textures.js index 501b4e56..da656a18 100644 --- a/src/graphics/gl-textures.js +++ b/src/graphics/gl-textures.js @@ -32,16 +32,19 @@ TextureManager.prototype = { // creates a texture out of the given image and repeating state // The url is just used to generate a unique id for the texture - makeTexture: function(url, image, repeating) { + // The tag is used to augment the url for use as an identifier + makeTexture: function(url, image, repeating, tag) { // gl is the context, webgl is the Crafty object containing prefs/etc // var gl = this.gl; var webgl = this.webgl; // Check whether a texture that matches the one requested already exists - var id = "texture-(r:" + repeating + ")-" + url; + console.log("tag", tag); + var id = "texture-(r:" + repeating + ")-" + (tag || "") + url; + console.log("Checking texture " + id); if (typeof this.registered_textures[id] !== 'undefined') return this.registered_textures[id]; - + console.log("Not found, creating " + id); // Create a texture, bind it to the next available unit var t = new TextureWrapper(this, id); this.registered_textures[id] = t; diff --git a/src/graphics/image.js b/src/graphics/image.js index bccf13df..b593c011 100644 --- a/src/graphics/image.js +++ b/src/graphics/image.js @@ -82,18 +82,21 @@ Crafty.c("Image", { * * @see Crafty.sprite */ - image: function (url, repeat) { + _imageScale: 1, + _preImage: null, + image: function (url, repeat, scale) { + delete this._scaledImage; this.__image = url; this._repeat = repeat || "no-repeat"; - - this.img = Crafty.asset(url); - if (!this.img) { - this.img = new Image(); - Crafty.asset(url, this.img); - this.img.src = url; + this._imageScale = scale || 1; + this._baseImg = Crafty.asset(url); + if (!this._baseImg) { + this._baseImg = new Image(); + this._baseImg.src = url; + Crafty.asset(url, this._baseImg); var self = this; - this.img.onload = function () { + this._baseImg.onload = function () { self._setupImage(self._drawLayer); }; } else { @@ -105,15 +108,37 @@ Crafty.c("Image", { return this; }, + _createScaledImage: function(img, scale) { + var tempCanvas = document.createElement("canvas"); + var ctx = tempCanvas.getContext("2d"); + var w = tempCanvas.width = img.width * scale; + var h = tempCanvas.height = img.height * scale; + ctx.drawImage(img,0,0,w, h); + var scaledImage = new Image(); + scaledImage.src = tempCanvas.toDataURL(); + scaledImage.width = w; + scaledImage.height = h; + return scaledImage; + }, + // called on image change or layer attachment _setupImage: function(layer){ - if (!this.img || !layer) return; - + if (!this._baseImg || !layer) return; + if (this._imageScale === 1) { + this.img = this._baseImg; + } else { + // Right now, generate this every time + // In the future, + this.img = this._createScaledImage(this._baseImg, this._imageScale); + } if (layer.type === "Canvas") { this._pattern = this._drawContext.createPattern(this.img, this._repeat); } else if (layer.type === "WebGL") { - this._establishShader("image:" + this.__image, Crafty.defaultShader("Image")); - this.program.setTexture( this._drawLayer.makeTexture(this.__image, this.img, (this._repeat!=="no-repeat"))); + var prefix = "image-scale(" + this._imageScale + "):"; + console.log("made, ", prefix); + this._establishShader(prefix + this.__image, Crafty.defaultShader("Image")); + var texture = this._drawLayer.makeTexture(this.__image, this.img, (this._repeat!=="no-repeat"), prefix); + this.program.setTexture(texture); } if (this._repeat === "no-repeat") { @@ -139,8 +164,8 @@ Crafty.c("Image", { context.fillRect(0, 0, e.pos._w, e.pos._h); context.restore(); } else if (e.type === "DOM") { - if (this.__image) { - e.style.backgroundImage = "url(" + this.__image + ")"; + if (this.img.src) { + e.style.backgroundImage = "url(" + this.img.src + ")"; e.style.backgroundRepeat = this._repeat; } } else if (e.type === "webgl") { diff --git a/src/graphics/webgl-layer.js b/src/graphics/webgl-layer.js index 262276e2..5e52fc35 100644 --- a/src/graphics/webgl-layer.js +++ b/src/graphics/webgl-layer.js @@ -259,8 +259,8 @@ Crafty._registerLayerTemplate("WebGL", { // Make a texture out of the given image element // The url is just used as a unique ID - makeTexture: function(url, image, repeating) { - return this.texture_manager.makeTexture(url, image, repeating); + makeTexture: function(url, image, repeating, tag) { + return this.texture_manager.makeTexture(url, image, repeating, tag); }, init: function() {