Merge pull request #553 from juliandescottes/fix-transparency-glitch

Fix transparency issues after deserialization

src/js/utils/FrameUtils.js

@@ -129,6 +129,17 @@
       return pskl.utils.FrameUtils.createFromImage(resizedImage);
     },
 
+    removeTransparency : function (frame) {
+      frame.forEachPixel(function (color, x, y) {
+        var alpha = color >> 24 >>> 0 & 0xff;
+        if (alpha && alpha !== 255) {
+          var rounded = Math.round(alpha / 255) * 255;
+          var roundedColor = color - (alpha << 24 >>> 0) + (rounded << 24 >>> 0);
+          frame.setPixel(x, y, roundedColor);
+        }
+      });
+    },
+
     createFromCanvas : function (canvas, x, y, w, h, preserveOpacity) {
       var imgData = canvas.getContext('2d').getImageData(x, y, w, h).data;
       return pskl.utils.FrameUtils.createFromImageData_(imgData, w, h, preserveOpacity);
@@ -158,6 +169,10 @@
     createFromImageData_ : function (imageData, width, height, preserveOpacity) {
       var frame = new pskl.model.Frame(width, height);
       frame.pixels = new Uint32Array(imageData.buffer);
+      if (!preserveOpacity) {
+        pskl.utils.FrameUtils.removeTransparency(frame);
+      }
+
       return frame;
     },
 

src/js/utils/serialization/Deserializer.js

@@ -127,7 +127,9 @@
       var image = new Image();
       image.onload = function() {
         var frames = pskl.utils.LayerUtils.createFramesFromSpritesheet(this, layer.frameCount);
-        frames.forEach(layer.model.addFrame.bind(layer.model));
+        frames.forEach(function (frame) {
+          layer.model.addFrame(frame);
+        });
 
         loadedLayers++;
         if (loadedLayers == layerCount) {