From 8910bf0dbd0d313ed65c115185f0d4e922735d02 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=A1vid=20Szab=C3=B3?= Date: Fri, 26 Aug 2016 01:43:14 +0200 Subject: [PATCH] Add model version 2 backward compatiblity --- .../serialization/backward/Deserializer_v2.js | 78 +++++++++++++++++++ src/piskel-script-list.js | 1 + 2 files changed, 79 insertions(+) create mode 100644 src/js/utils/serialization/backward/Deserializer_v2.js diff --git a/src/js/utils/serialization/backward/Deserializer_v2.js b/src/js/utils/serialization/backward/Deserializer_v2.js new file mode 100644 index 00000000..185354e2 --- /dev/null +++ b/src/js/utils/serialization/backward/Deserializer_v2.js @@ -0,0 +1,78 @@ +(function () { + var ns = $.namespace('pskl.utils.serialization.backward'); + + ns.Deserializer_v2 = function (data, callback) { + this.layersToLoad_ = 0; + this.data_ = data; + this.callback_ = callback; + this.piskel_ = null; + this.layers_ = []; + }; + + ns.Deserializer_v2.prototype.deserialize = function (name) { + var data = this.data_; + var piskelData = data.piskel; + name = name || 'Deserialized piskel'; + + var descriptor = new pskl.model.piskel.Descriptor(name, ''); + this.piskel_ = new pskl.model.Piskel(piskelData.width, piskelData.height, descriptor); + + this.layersToLoad_ = piskelData.layers.length; + if (piskelData.expanded) { + piskelData.layers.forEach(this.loadExpandedLayer.bind(this)); + } else { + piskelData.layers.forEach(this.deserializeLayer.bind(this)); + } + }; + + ns.Deserializer_v2.prototype.deserializeLayer = function (layerString, index) { + var layerData = JSON.parse(layerString); + var layer = new pskl.model.Layer(layerData.name); + layer.setOpacity(layerData.opacity); + + // 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.createFramesFromSpritesheet(image, layerData.frameCount); + // 6 - add each image to the layer + this.addFramesToLayer(frames, layer, index); + }.bind(this); + + // 3 - set the source of the image + image.src = base64PNG; + return layer; + }; + + ns.Deserializer_v2.prototype.loadExpandedLayer = function (layerData, index) { + var width = this.piskel_.getWidth(); + var height = this.piskel_.getHeight(); + var layer = new pskl.model.Layer(layerData.name); + layer.setOpacity(layerData.opacity); + var frames = layerData.grids.map(function (grid) { + return pskl.model.Frame.fromPixelGrid(grid, width, height); + }); + this.addFramesToLayer(frames, layer, index); + return layer; + }; + + ns.Deserializer_v2.prototype.addFramesToLayer = function (frames, layer, index) { + frames.forEach(layer.addFrame.bind(layer)); + + this.layers_[index] = layer; + this.onLayerLoaded_(); + }; + + ns.Deserializer_v2.prototype.onLayerLoaded_ = function () { + this.layersToLoad_ = this.layersToLoad_ - 1; + if (this.layersToLoad_ === 0) { + this.layers_.forEach(function (layer) { + this.piskel_.addLayer(layer); + }.bind(this)); + this.callback_(this.piskel_, {fps: this.data_.piskel.fps}); + } + }; +})(); diff --git a/src/piskel-script-list.js b/src/piskel-script-list.js index 364c14e0..e80355ec 100644 --- a/src/piskel-script-list.js +++ b/src/piskel-script-list.js @@ -43,6 +43,7 @@ "js/utils/serialization/Deserializer.js", "js/utils/serialization/backward/Deserializer_v0.js", "js/utils/serialization/backward/Deserializer_v1.js", + "js/utils/serialization/backward/Deserializer_v2.js", // GIF Encoding libraries "js/lib/gif/gif.worker.js",