Merge pull request #142 from juliandescottes/reduce-piskel-model-size

Reduce piskel model size

js/Constants.js

@@ -6,7 +6,7 @@ var Constants = {
     FPS : 12
   },
 
-  MODEL_VERSION : 1,
+  MODEL_VERSION : 2,
 
   MAX_HEIGHT : 1024,
   MAX_WIDTH : 1024,

js/app.js

@@ -96,9 +96,10 @@
 
     finishInitAppEngine_ : function () {
       if (pskl.framesheetData_ && pskl.framesheetData_.content) {
-        var piskel = pskl.utils.Serializer.createPiskel(pskl.framesheetData_.content);
-        pskl.app.piskelController.setPiskel(piskel);
-        pskl.app.animationController.setFPS(pskl.framesheetData_.fps);
+        pskl.utils.serialization.Deserializer.deserialize(pskl.framesheetData_.content, function (piskel) {
+          pskl.app.piskelController.setPiskel(piskel);
+          pskl.app.animationController.setFPS(pskl.framesheetData_.fps);
+        });
       }
     },
 
@@ -159,10 +160,11 @@
       xhr.responseType = 'text';
       xhr.onload = function (e) {
         var res = JSON.parse(this.responseText);
-        var piskel = pskl.utils.Serializer.createPiskel(res.framesheet);
-        pskl.app.piskelController.setPiskel(piskel);
-        pskl.app.animationController.setFPS(res.fps);
-        $.publish(Events.HIDE_NOTIFICATION);
+        pskl.utils.serialization.Deserializer.deserialize(res.framesheet, function (piskel) {
+          pskl.app.piskelController.setPiskel(piskel);
+          pskl.app.animationController.setFPS(res.fps);
+          $.publish(Events.HIDE_NOTIFICATION);
+        });
       };
 
       xhr.onerror = function () {
@@ -242,8 +244,8 @@
     },
 
     getFramesheetAsPng : function () {
-      var renderer = new pskl.rendering.SpritesheetRenderer(this.piskelController);
-      var framesheetCanvas = renderer.render();
+      var renderer = new pskl.rendering.PiskelRenderer(this.piskelController);
+      var framesheetCanvas = renderer.renderAsCanvas();
       return framesheetCanvas.toDataURL("image/png");
     },
 

js/controller/settings/GifExportController.js

@@ -114,8 +114,9 @@
 
     for (var i = 0; i < this.piskelController.getFrameCount(); i++) {
       var frame = this.piskelController.getFrameAt(i);
-      var renderer = new pskl.rendering.CanvasRenderer(frame, zoom);
-      gif.addFrame(renderer.render(), {
+      var canvasRenderer = new pskl.rendering.CanvasRenderer(frame, zoom);
+      var canvas = canvasRenderer.render();
+      gif.addFrame(canvas.getContext('2d'), {
         delay: 1000 / fps
       });
     }

js/controller/settings/ImportController.js

@@ -153,10 +153,11 @@
         var image = pskl.utils.ImageResizer.resize(this.importedImage_, w, h, smoothing);
         var frame = pskl.utils.FrameUtils.createFromImage(image);
 
-        var piskel = pskl.utils.Serializer.createPiskel([frame]);
+        var layer = pskl.model.Layer.fromFrames('Layer 1', [frame]);
+        var piskel = pskl.model.Piskel.fromLayers([layer]);
+
         pskl.app.piskelController.setPiskel(piskel);
         pskl.app.animationController.setFPS(Constants.DEFAULT.FPS);
-
         this.reset_();
       }
     }

js/model/Layer.js

@@ -10,6 +10,19 @@
     }
   };
 
+  /**
+   * Create a Layer instance from an already existing set a Frames
+   * @static
+   * @param  {String} name layer's name
+   * @param  {Array<pskl.model.Frame>} frames should all have the same dimensions
+   * @return {pskl.model.Layer}
+   */
+  ns.Layer.fromFrames = function (name, frames) {
+    var layer = new ns.Layer(name);
+    frames.forEach(layer.addFrame.bind(layer));
+    return layer;
+  };
+
   ns.Layer.prototype.getName = function () {
     return this.name;
   };

js/model/Piskel.js

@@ -21,6 +21,24 @@
     }
   };
 
+  /**
+   * Create a piskel instance from an existing set of (non empty) layers
+   * Layers should all be synchronized : same number of frames, same dimensions
+   * @param  {Array<pskl.model.Layer>} layers
+   * @return {pskl.model.Piskel}
+   */
+  ns.Piskel.fromLayers = function (layers) {
+    var piskel = null;
+    if (layers.length > 0 && layers[0].length() > 0) {
+      var sampleFrame = layers[0].getFrameAt(0);
+      piskel = new pskl.model.Piskel(sampleFrame.getWidth(), sampleFrame.getHeight());
+      layers.forEach(piskel.addLayer.bind(piskel));
+    } else {
+      throw 'Piskel.fromLayers expects array of non empty pskl.model.Layer as first argument';
+    }
+    return piskel;
+  };
+
   ns.Piskel.prototype.getLayers = function () {
     return this.layers;
   };

js/rendering/CanvasRenderer.js

@@ -19,24 +19,20 @@
   ns.CanvasRenderer.prototype.render = function  () {
     var canvas = this.createCanvas_();
     var context = canvas.getContext('2d');
-    for(var col = 0, width = this.frame.getWidth(); col < width; col++) {
-      for(var row = 0, height = this.frame.getHeight(); row < height; row++) {
-        var color = this.frame.getPixel(col, row);
-        this.renderPixel_(color, col, row, context);
-      }
-    }
 
-    return context;
+    this.frame.forEachPixel(function (color, x, y) {
+      this.renderPixel_(color, x, y, context);
+    }.bind(this));
+
+    return canvas;
   };
 
-  ns.CanvasRenderer.prototype.renderPixel_ = function (color, col, row, context) {
-
+  ns.CanvasRenderer.prototype.renderPixel_ = function (color, x, y, context) {
     if(color == Constants.TRANSPARENT_COLOR) {
       color = this.transparentColor_;
     }
     context.fillStyle = color;
-
-    context.fillRect(col * this.zoom, row * this.zoom, this.zoom, this.zoom);
+    context.fillRect(x * this.zoom, y * this.zoom, this.zoom, this.zoom);
   };
 
   ns.CanvasRenderer.prototype.createCanvas_ = function () {

js/rendering/FramesheetRenderer.js

@@ -0,0 +1,43 @@
+(function () {
+  var ns = $.namespace('pskl.rendering');
+
+  /**
+   * Render an array of frames
+   * @param {Array.<pskl.model.Frame>} frames
+   */
+  ns.FramesheetRenderer = function (frames) {
+    if (frames.length > 0) {
+      this.frames = frames;
+    } else {
+      throw 'FramesheetRenderer : Invalid argument : frames is empty';
+    }
+  };
+
+  ns.FramesheetRenderer.prototype.renderAsCanvas = function () {
+    var canvas = this.createCanvas_();
+    for (var i = 0 ; i < this.frames.length ; i++) {
+      var frame = this.frames[i];
+      this.drawFrameInCanvas_(frame, canvas, i * frame.getWidth(), 0);
+    }
+    return canvas;
+  };
+
+  ns.FramesheetRenderer.prototype.drawFrameInCanvas_ = function (frame, canvas, offsetWidth, offsetHeight) {
+    var context = canvas.getContext('2d');
+    frame.forEachPixel(function (color, x, y) {
+      if(color != Constants.TRANSPARENT_COLOR) {
+        context.fillStyle = color;
+        context.fillRect(x + offsetWidth, y + offsetHeight, 1, 1);
+      }
+    });
+  };
+
+  ns.FramesheetRenderer.prototype.createCanvas_ = function () {
+    var sampleFrame = this.frames[0];
+    var count = this.frames.length;
+    var width = count * sampleFrame.getWidth();
+    var height = sampleFrame.getHeight();
+    return pskl.CanvasUtils.createCanvas(width, height);
+  };
+
+})();

js/rendering/PiskelRenderer.js

@@ -0,0 +1,14 @@
+(function () {
+
+  var ns = $.namespace("pskl.rendering");
+
+  ns.PiskelRenderer = function (piskelController) {
+    var frames = [];
+    for (var i = 0 ; i < piskelController.getFrameCount() ; i++) {
+      frames.push(this.piskelController.getFrameAt(i));
+    }
+    ns.FramesheetRenderer.call(this, frames);
+  };
+
+  pskl.utils.inherit(ns.PiskelRenderer, ns.FramesheetRenderer);
+})();

js/rendering/SpritesheetRenderer.js

@@ -1,44 +0,0 @@
-(function () {
-
-  var ns = $.namespace("pskl.rendering");
-
-  ns.SpritesheetRenderer = function (piskelController) {
-    this.piskelController = piskelController;
-  };
-
-  ns.SpritesheetRenderer.prototype.render = function () {
-    var canvas = this.createCanvas_();
-    for (var i = 0 ; i < this.piskelController.getFrameCount() ; i++) {
-      var frame = this.piskelController.getFrameAt(i);
-      this.drawFrameInCanvas_(frame, canvas, i * this.piskelController.getWidth(), 0);
-    }
-    return canvas;
-  };
-
-  /**
-   * TODO(juliandescottes): Mutualize with code already present in FrameRenderer
-   */
-  ns.SpritesheetRenderer.prototype.drawFrameInCanvas_ = function (frame, canvas, offsetWidth, offsetHeight) {
-    var context = canvas.getContext('2d');
-    for(var col = 0, width = frame.getWidth(); col < width; col++) {
-      for(var row = 0, height = frame.getHeight(); row < height; row++) {
-        var color = frame.getPixel(col, row);
-        if(color != Constants.TRANSPARENT_COLOR) {
-          context.fillStyle = color;
-          context.fillRect(col + offsetWidth, row + offsetHeight, 1, 1);
-        }
-      }
-    }
-  };
-
-  ns.SpritesheetRenderer.prototype.createCanvas_ = function () {
-    var frameCount = this.piskelController.getFrameCount();
-    if (frameCount > 0){
-      var width = frameCount * this.piskelController.getWidth();
-      var height = this.piskelController.getHeight();
-      return pskl.CanvasUtils.createCanvas(width, height);
-    } else {
-      throw "Cannot render empty Spritesheet";
-    }
-  };
-})();

js/service/LocalStorageService.js

@@ -36,7 +36,6 @@
    * @private
    */
   ns.LocalStorageService.prototype.persistToLocalStorage_ = function() {
-
     console.log('[LocalStorage service]: Snapshot stored');
     window.localStorage.snapShot = this.piskelController.serialize();
   };
@@ -46,8 +45,9 @@
    */
   ns.LocalStorageService.prototype.restoreFromLocalStorage_ = function() {
     var framesheet = JSON.parse(window.localStorage.snapShot);
-    var piskel = pskl.utils.Serializer.createPiskel(framesheet);
-    pskl.app.piskelController.setPiskel(piskel);
+    pskl.utils.serialization.Deserializer.deserialize(framesheet, function (piskel) {
+      pskl.app.piskelController.setPiskel(piskel);
+    });
   };
 
   /**

js/utils/FrameUtils.js

@@ -107,25 +107,29 @@
 
       context.drawImage(image, 0,0,w,h,0,0,w,h);
       var imgData = context.getImageData(0,0,w,h).data;
+      return pskl.utils.FrameUtils.createFromImageData(imgData, w, h);
+    },
+
+    createFromImageData : function (imageData, width, height) {
       // Draw the zoomed-up pixels to a different canvas context
-      var frame = [];
-      for (var x=0;x<image.width;++x){
-        frame[x] = [];
-        for (var y=0;y<image.height;++y){
+      var grid = [];
+      for (var x = 0 ; x < width ; x++){
+        grid[x] = [];
+        for (var y = 0 ; y < height ; y++){
           // Find the starting index in the one-dimensional image data
-          var i = (y*image.width + x)*4;
-          var r = imgData[i  ];
-          var g = imgData[i+1];
-          var b = imgData[i+2];
-          var a = imgData[i+3];
+          var i = (y * width + x)*4;
+          var r = imageData[i  ];
+          var g = imageData[i+1];
+          var b = imageData[i+2];
+          var a = imageData[i+3];
           if (a < 125) {
-            frame[x][y] = "TRANSPARENT";
+            grid[x][y] = Constants.TRANSPARENT_COLOR;
           } else {
-            frame[x][y] = this.rgbToHex(r,g,b);
+            grid[x][y] = pskl.utils.FrameUtils.rgbToHex(r,g,b);
           }
         }
       }
-      return frame;
+      return pskl.model.Frame.fromPixelGrid(grid);
     },
 
     /**

js/utils/LayerUtils.js

@@ -0,0 +1,31 @@
+(function () {
+  var ns = $.namespace('pskl.utils');
+
+  ns.LayerUtils = {
+    /**
+     * Create a pskl.model.Layer from an Image object.
+     * Transparent pixels will either be converted to completely opaque or completely transparent pixels.
+     * @param  {Image} image source image
+     * @return {pskl.model.Frame} corresponding frame
+     */
+    createFromImage : function (image, frameCount) {
+      var w = image.width,
+        h = image.height,
+        frameWidth = w / frameCount;
+
+      var canvas = pskl.CanvasUtils.createCanvas(w, h);
+      var context = canvas.getContext('2d');
+
+      context.drawImage(image, 0,0,w,h,0,0,w,h);
+      // Draw the zoomed-up pixels to a different canvas context
+      var frames = [];
+      for (var i = 0 ; i < frameCount ; i++) {
+        var imgData = context.getImageData(frameWidth*i,0,frameWidth,h).data;
+        var frame = pskl.utils.FrameUtils.createFromImageData(imgData, frameWidth, h);
+        frames.push(frame);
+      }
+      return frames;
+    }
+  };
+
+})();

js/utils/Serializer.js

@@ -1,87 +0,0 @@
-(function () {
-  var ns = $.namespace('pskl.utils');
-  ns.Serializer = {
-    serializePiskel : function (piskel) {
-      var serializedLayers = piskel.getLayers().map(function (l) {
-        return pskl.utils.Serializer.serializeLayer(l);
-      });
-      return JSON.stringify({
-        modelVersion : Constants.MODEL_VERSION,
-        piskel : {
-          height : piskel.getHeight(),
-          width : piskel.getWidth(),
-          layers : serializedLayers
-        }
-      });
-    },
-
-    serializeLayer : function (layer) {
-      var serializedFrames = layer.getFrames().map(function (f) {
-        return f.serialize();
-      });
-      return JSON.stringify({
-        name : layer.getName(),
-        frames : serializedFrames
-      });
-    },
-
-    deserializePiskel : function (piskelString) {
-      var piskelData = JSON.parse(piskelString);
-      return this.createPiskelFromData(piskelData);
-    },
-
-    /**
-     * Similar to deserializePiskel, but dealing directly with a parsed piskel
-     * @param  {Object} piskelData JSON.parse of a serialized piskel
-     * @return {pskl.model.Piskel} a piskel
-     */
-    createPiskel : function (piskelData) {
-      var piskel = null;
-      if (piskelData.modelVersion == Constants.MODEL_VERSION) {
-        var pData = piskelData.piskel;
-        piskel = new pskl.model.Piskel(pData.width, pData.height);
-
-        pData.layers.forEach(function (serializedLayer) {
-          var layer = pskl.utils.Serializer.deserializeLayer(serializedLayer);
-          piskel.addLayer(layer);
-        });
-      } else {
-        piskel = pskl.utils.Serializer.backwardDeserializer_(piskelData);
-      }
-
-      return piskel;
-    },
-
-    deserializeLayer : function (layerString) {
-      var lData = JSON.parse(layerString);
-      var layer = new pskl.model.Layer(lData.name);
-
-      lData.frames.forEach(function (serializedFrame) {
-        var frame = pskl.utils.Serializer.deserializeFrame(serializedFrame);
-        layer.addFrame(frame);
-      });
-
-      return layer;
-    },
-
-    deserializeFrame : function (frameString) {
-      var framePixelGrid = JSON.parse(frameString);
-      return pskl.model.Frame.fromPixelGrid(framePixelGrid);
-    },
-
-    /**
-     * Deserialize old piskel framesheets. Initially piskels were stored as arrays of frames : "[[pixelGrid],[pixelGrid],[pixelGrid]]".
-     */
-    backwardDeserializer_ : function (frames) {
-      var layer = new pskl.model.Layer('Layer 1');
-      frames.forEach(function (frame) {
-        layer.addFrame(pskl.model.Frame.fromPixelGrid(frame));
-      });
-      var width = layer.getFrameAt(0).getWidth(), height = layer.getFrameAt(0).getHeight();
-      var piskel = new pskl.model.Piskel(width, height);
-      piskel.addLayer(layer);
-
-      return piskel;
-    }
-  };
-})();

js/utils/serialization/Deserializer.js

@@ -0,0 +1,68 @@
+(function () {
+  var ns = $.namespace('pskl.utils.serialization');
+
+  ns.Deserializer = function (data, callback) {
+    this.layersToLoad_ = 0;
+    this.data_ = data;
+    this.callback_ = callback;
+    this.piskel_ = null;
+  };
+
+  ns.Deserializer.deserialize = function (data, callback) {
+    var deserializer;
+    if (data.modelVersion == Constants.MODEL_VERSION) {
+      deserializer = new ns.Deserializer(data, callback);
+    } else if (data.modelVersion == 1) {
+      deserializer = new ns.backward.Deserializer_v1(data, callback);
+    } else {
+      deserializer = new ns.backward.Deserializer_v0(data, callback);
+    }
+    deserializer.deserialize();
+  };
+
+  ns.Deserializer.prototype.deserialize = function () {
+    var data = this.data_;
+    var piskelData = data.piskel;
+    this.piskel_ = new pskl.model.Piskel(piskelData.width, piskelData.height);
+
+    this.layersToLoad_ = piskelData.layers.length;
+
+    piskelData.layers.forEach(function (serializedLayer) {
+      var layer = this.deserializeLayer(serializedLayer);
+      this.piskel_.addLayer(layer);
+    }.bind(this));
+  };
+
+  ns.Deserializer.prototype.deserializeLayer = function (layerString) {
+    var layerData = JSON.parse(layerString);
+    var layer = new pskl.model.Layer(layerData.name);
+
+    // 1 - create an image to load the base64PNG representing the layer
+    var base64PNG = layerData.base64PNG;
+    var image = new Image();
+
+    // 2 - attach the onload callback that will be triggered asynchronously
+    image.onload = function () {
+      // 5 - extract the frames from the loaded image
+      var frames = pskl.utils.LayerUtils.createFromImage(image, layerData.frameCount);
+
+      // 6 - add each image to the layer
+      frames.forEach(layer.addFrame.bind(layer));
+
+      this.onLayerLoaded_();
+    }.bind(this);
+
+    // 3 - set the source of the image
+    image.src = base64PNG;
+
+    // 4 - return a pointer to the new layer instance
+    return layer;
+  };
+
+  ns.Deserializer.prototype.onLayerLoaded_ = function () {
+    this.layersToLoad_ = this.layersToLoad_ - 1;
+    if (this.layersToLoad_ === 0) {
+      this.callback_(this.piskel_);
+    }
+  };
+})();

js/utils/serialization/Serializer.js

@@ -0,0 +1,31 @@
+(function () {
+  var ns = $.namespace('pskl.utils');
+
+  ns.Serializer = {
+    serializePiskel : function (piskel) {
+      var serializedLayers = piskel.getLayers().map(function (l) {
+        return pskl.utils.Serializer.serializeLayer(l);
+      });
+      return JSON.stringify({
+        modelVersion : Constants.MODEL_VERSION,
+        piskel : {
+          height : piskel.getHeight(),
+          width : piskel.getWidth(),
+          layers : serializedLayers
+        }
+      });
+    },
+
+    serializeLayer : function (layer) {
+      var frames = layer.getFrames();
+      var renderer = new pskl.rendering.FramesheetRenderer(frames);
+      var base64PNG = renderer.renderAsCanvas().toDataURL();
+
+      return JSON.stringify({
+        name : layer.getName(),
+        base64PNG : base64PNG,
+        frameCount : frames.length
+      });
+    }
+  };
+})();

js/utils/serialization/backward/Deserializer_v0.js

@@ -0,0 +1,18 @@
+(function () {
+  var ns = $.namespace('pskl.utils.serialization.backward');
+
+  ns.Deserializer_v0 = function (data, callback) {
+    this.data_ = data;
+    this.callback_ = callback;
+  };
+
+  ns.Deserializer_v0.prototype.deserialize = function () {
+    var pixelGrids = this.data_;
+    var frames = pixelGrids.map(function (grid) {
+      return pskl.model.Frame.fromPixelGrid(grid);
+    });
+    var layer = pskl.model.Layer.fromFrames('Layer 1', frames);
+
+    this.callback_(pskl.model.Piskel.fromLayers([layer]));
+  };
+})();

js/utils/serialization/backward/Deserializer_v1.js

@@ -0,0 +1,36 @@
+(function () {
+  var ns = $.namespace('pskl.utils.serialization.backward');
+
+  ns.Deserializer_v1 = function (data, callback) {
+    this.callback_ = callback;
+    this.data_ = data;
+  };
+
+  ns.Deserializer_v1.prototype.deserialize = function () {
+    var piskelData = this.data_.piskel;
+    var piskel = new pskl.model.Piskel(piskelData.width, piskelData.height);
+
+    piskelData.layers.forEach(function (serializedLayer) {
+      var layer = this.deserializeLayer(serializedLayer);
+      piskel.addLayer(layer);
+    }.bind(this));
+
+    this.callback_(piskel);
+  };
+
+  ns.Deserializer_v1.prototype.deserializeLayer = function (layerString) {
+    var layerData = JSON.parse(layerString);
+    var layer = new pskl.model.Layer(layerData.name);
+    layerData.frames.forEach(function (serializedFrame) {
+      var frame = this.deserializeFrame(serializedFrame);
+      layer.addFrame(frame);
+    }.bind(this));
+
+    return layer;
+  };
+
+  ns.Deserializer_v1.prototype.deserializeFrame = function (frameString) {
+    var framePixelGrid = JSON.parse(frameString);
+    return pskl.model.Frame.fromPixelGrid(framePixelGrid);
+  };
+})();

piskel-script-list.js

@@ -18,11 +18,15 @@ exports.scripts = [
   "js/utils/Math.js",
   "js/utils/FileUtils.js",
   "js/utils/FrameUtils.js",
+  "js/utils/LayerUtils.js",
   "js/utils/ImageResizer.js",
   "js/utils/PixelUtils.js",
-  "js/utils/Serializer.js",
   "js/utils/Template.js",
   "js/utils/UserSettings.js",
+  "js/utils/serialization/Serializer.js",
+  "js/utils/serialization/Deserializer.js",
+  "js/utils/serialization/backward/Deserializer_v0.js",
+  "js/utils/serialization/backward/Deserializer_v1.js",
   "js/lib/jsColor_1_4_0/jscolor.js",
 
   // Application libraries-->
@@ -46,7 +50,8 @@ exports.scripts = [
   "js/rendering/frame/FrameRenderer.js",
   "js/rendering/frame/CachedFrameRenderer.js",
   "js/rendering/CanvasRenderer.js",
-  "js/rendering/SpritesheetRenderer.js",
+  "js/rendering/FramesheetRenderer.js",
+  "js/rendering/PiskelRenderer.js",
 
   // Controllers
   "js/controller/PiskelController.js",