fix : reduce piskel model size

- Initial implementation : working but ...
- MODEL_VERSION has been bumped to 2
- The loading process is now theoretically asynchronous (loading images to
  read the content of the layers), but for now, the asynchronous behaviour
  is hidden behind a nasty hack, which is somehow similar to lazy loading.
  When loading the piskel, a Piskel is created synchronously, with fake
  empty frames, and as the images will get loaded, the fake frames will be
  replaced by the actual frames.

  I really don't like this, and the asynchronous nature of the loading
  should be clearly expressed
- There is no backward compatible deserializer for the previous version of
  the model (1)
- The Serializer utils is just badly designed. Serialization and
  deserialization should be splitted into two different classes
- Saving & loading are still done in app.js and should be moved to
  services

BUT : the size of the piskels is now pretty small. A piskel which was
using 890kB previously is now using only 10kB. Although it should be
noted, that after gzip there is no significant difference between this
version and the existing one. The only gains we can really expect with
this are : less disk space used on appengine, ability to reuse the
layers' pngs directly on piskel-website (but to be honest I can't see any
valid use case for this)

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.dpi, row * this.dpi, this.dpi, this.dpi);
+    context.fillRect(x * this.dpi, y * this.dpi, this.dpi, this.dpi);
   };
 
   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";
-    }
-  };
-})();