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)

test/js/testutils/TestUtils.js

@@ -16,10 +16,10 @@
    * we expect this to be a 3x2 image, one black line above a white line.
    *
    * However Frame.createFromGrid needs the following input to create such an image :
-   * 
+   *
    * [[black, white],
    *  [black, white],
-   *  [black, white]] 
+   *  [black, white]]
    *
    * This helper will build the second array from the first array.
    */
@@ -41,4 +41,32 @@
       expect(color).toBe(grid[row][col]);
     });
   };
+
+  ns.imageEqualsGrid = function (image, grid) {
+    for (var x = 0 ; x < grid.length ; x++) {
+      for (var y = 0 ; y < grid[x].length ; y++) {
+        var expected = tinycolor(grid[x][y]).toRgbString();
+        var color = tinycolor(ns.getRgbaAt(image, x, y)).toRgbString();
+        expect(color).toBe(expected);
+      }
+    }
+  }
+
+  ns.getRgbaAt = function (image, x, y) {
+    var w = image.width;
+    var h = image.height;
+    var canvas = pskl.utils.CanvasUtils.createCanvas(w, h);
+    var context = canvas.getContext('2d');
+
+    context.drawImage(image, 0, 0, w, h, 0, 0, w, h);
+    var imageData = context.getImageData(0, 0, w, h).data;
+    var i = (y * w + x) * 4;
+
+    return {
+      r : imageData[i],
+      g : imageData[i + 1],
+      b : imageData[i + 2],
+      a : imageData[i + 3]/255
+    };
+  }
 })();

test/js/utils/FrameUtilsTest.js

@@ -74,7 +74,7 @@ describe("FrameUtils suite", function() {
     ]);
   });
 
-  it ("[LayerUtils] creates a layer from a simple spritesheet", function () {
+  it ("[LayerUtils] creates frames from a simple spritesheet", function () {
     var B = black, R = red;
 
     // original image in 4x2
@@ -86,7 +86,7 @@ describe("FrameUtils suite", function() {
     var spritesheet = pskl.utils.FrameUtils.toImage(frame);
 
     // split the spritesheet by 4
-    var frames = pskl.utils.LayerUtils.createLayerFromSpritesheet(spritesheet, 4);
+    var frames = pskl.utils.LayerUtils.createFramesFromSpritesheet(spritesheet, 4);
 
     // expect 4 frames of 1x2
     expect(frames.length).toBe(4);

test/js/utils/LayerUtilsTest.js

@@ -0,0 +1,56 @@
+describe("LayerUtils test", function() {
+
+  var B = '#000000';
+  var R = '#ff0000';
+  var T = Constants.TRANSPARENT_COLOR;
+  var frameEqualsGrid = test.testutils.frameEqualsGrid;
+  var imageEqualsGrid = test.testutils.imageEqualsGrid;
+
+  var frame1 = pskl.model.Frame.fromPixelGrid([
+    [B, T],
+    [T, B]
+  ]);
+
+  var frame2 = pskl.model.Frame.fromPixelGrid([
+    [T, R],
+    [R, T]
+  ]);
+
+  beforeEach(function() {});
+  afterEach(function() {});
+
+  it("flattens a frame", function() {
+    // when
+    var l1 = new pskl.model.Layer('l1');
+    l1.addFrame(frame1);
+    var l2 = new pskl.model.Layer('l2');
+    l2.addFrame(frame2);
+
+    // then
+    var flattened = pskl.utils.LayerUtils.flattenFrameAt([l1, l2], 0);
+
+    //verify
+    imageEqualsGrid(flattened, [
+      [B, R],
+      [R, B]
+    ]);
+  });
+
+  it("flattens a frame with opacity", function() {
+    // when
+    var l1 = new pskl.model.Layer('l1');
+    l1.addFrame(frame1);
+    var l2 = new pskl.model.Layer('l2');
+    l2.setOpacity(0.5);
+    l2.addFrame(frame2);
+
+    // then
+    var flattened = pskl.utils.LayerUtils.flattenFrameAt([l1, l2], 0, true);
+
+    //verify
+    imageEqualsGrid(flattened, [
+      [B, 'rgba(255,0,0,0.5)'],
+      ['rgba(255,0,0,0.5)', B]
+    ]);
+  });
+});