POC for setting Image scale

starwed · Jan 20, 2017 · f1b8ac4 · f1b8ac4
1 parent e295afa
commit f1b8ac4
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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() {