Issue #414: part6: Support transparency when exporting as PNG spritesheet

Added flattenFrameAt to LayerUtils.
Added renderFrameAt to PiskelController (using flattenFrameAt)
Use renderFrameAt in PiskelRenderer (which is used for PNG spritesheet)

chore: renamed createLayerFromSpritesheet to createFramesFromSpritesheet
       (in LayerUtils)

src/js/controller/piskel/PiskelController.js

@@ -103,6 +103,10 @@
     return mergedFrame;
   };
 
+  ns.PiskelController.prototype.renderFrameAt = function (index, preserveOpacity) {
+    return pskl.utils.LayerUtils.flattenFrameAt(this.getLayers(), index, preserveOpacity);
+  };
+
   ns.PiskelController.prototype.hasFrameAt = function (index) {
     return !!this.getCurrentLayer().getFrameAt(index);
   };

src/js/rendering/PiskelRenderer.js

@@ -5,10 +5,30 @@
   ns.PiskelRenderer = function (piskelController) {
     var frames = [];
     for (var i = 0 ; i < piskelController.getFrameCount() ; i++) {
-      frames.push(piskelController.getMergedFrameAt(i));
+      frames.push(piskelController.renderFrameAt(i, true));
     }
-    ns.FramesheetRenderer.call(this, frames);
+    this.piskelController = piskelController;
+    this.frames = frames;
   };
 
-  pskl.utils.inherit(ns.PiskelRenderer, ns.FramesheetRenderer);
+  ns.PiskelRenderer.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 * this.piskelController.getWidth(), 0);
+    }
+    return canvas;
+  };
+
+  ns.PiskelRenderer.prototype.drawFrameInCanvas_ = function (frame, canvas, offsetWidth, offsetHeight) {
+    var context = canvas.getContext('2d');
+    context.drawImage(frame, offsetWidth, offsetHeight, frame.width, frame.height);
+  };
+
+  ns.PiskelRenderer.prototype.createCanvas_ = function () {
+    var count = this.frames.length;
+    var width = count * this.piskelController.getWidth();
+    var height = this.piskelController.getHeight();
+    return pskl.utils.CanvasUtils.createCanvas(width, height);
+  };
 })();

src/js/utils/LayerUtils.js

@@ -3,12 +3,15 @@
 
   ns.LayerUtils = {
     /**
-     * Create a pskl.model.Layer from an Image object.
+     * Create a Frame array from an Image object.
      * Transparent pixels will either be converted to completely opaque or completely transparent pixels.
+     * TODO : move to FrameUtils
+     *
      * @param  {Image} image source image
-     * @return {pskl.model.Frame} corresponding frame
+     * @param  {Number} frameCount number of frames in the spritesheet
+     * @return {Array<Frame>}
      */
-    createLayerFromSpritesheet : function (image, frameCount) {
+    createFramesFromSpritesheet : function (image, frameCount) {
       var width = image.width;
       var height = image.height;
       var frameWidth = width / frameCount;
@@ -37,6 +40,22 @@
       });
       var mergedLayer = pskl.model.Layer.fromFrames(layerA.getName(), mergedFrames);
       return mergedLayer;
+    },
+
+    flattenFrameAt : function (layers, index, preserveOpacity) {
+      var width = layers[0].getFrameAt(index).getWidth();
+      var height = layers[0].getFrameAt(index).getHeight();
+      var canvas = pskl.utils.CanvasUtils.createCanvas(width, height);
+      var context = canvas.getContext('2d');
+      layers.forEach(function (l) {
+        var frameRender = pskl.utils.FrameUtils.toImage(l.getFrameAt(index));
+        if (preserveOpacity) {
+          context.globalAlpha = l.getOpacity();
+        }
+        context.drawImage(frameRender, 0, 0, width, height, 0, 0, width, height);
+      });
+
+      return canvas;
     }
   };
 

src/js/utils/serialization/Deserializer.js

@@ -49,7 +49,7 @@
     // 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.createLayerFromSpritesheet(image, layerData.frameCount);
+      var frames = pskl.utils.LayerUtils.createFramesFromSpritesheet(image, layerData.frameCount);
       // 6 - add each image to the layer
       this.addFramesToLayer(frames, layer, index);
     }.bind(this);