mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Add model version 3 deserializer
This commit is contained in:
Dávid Szabó
Julian Descottes
parent
2962a838d3
commit
f607c65789
@ -2,18 +2,39 @@
|
|||||||
var ns = $.namespace('pskl.utils.serialization');
|
var ns = $.namespace('pskl.utils.serialization');
|
||||||
|
|
||||||
ns.Deserializer = function (data, callback) {
|
ns.Deserializer = function (data, callback) {
|
||||||
this.layersToLoad_ = 0;
|
|
||||||
this.data_ = data;
|
this.data_ = data;
|
||||||
this.callback_ = callback;
|
this.callback_ = callback;
|
||||||
this.piskel_ = null;
|
|
||||||
this.layers_ = [];
|
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.Deserializer.deserialize = function (data, callback) {
|
ns.Deserializer.deserialize = function (data, callback) {
|
||||||
|
var modelVersion;
|
||||||
|
|
||||||
|
var isJSON = false;
|
||||||
|
if (data instanceof ArrayBuffer) {
|
||||||
|
var uint8 = new Uint8Array(data);
|
||||||
|
|
||||||
|
// Backward compatibility for JSON (modelVersion < 3)
|
||||||
|
if (String.fromCharCode(uint8[0]) == '{') {
|
||||||
|
var data = "";
|
||||||
|
for (var i = 0; i < uint8.length; i++) {
|
||||||
|
data += String.fromCharCode(uint8[i]);
|
||||||
|
}
|
||||||
|
data = JSON.parse(data);
|
||||||
|
modelVersion = data.modelVersion;
|
||||||
|
} else {
|
||||||
|
var arr16 = new Uint16Array(data);
|
||||||
|
modelVersion = arr16[0];
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
throw 'Invalid data for deserializing: ' + data;
|
||||||
|
}
|
||||||
|
|
||||||
var deserializer;
|
var deserializer;
|
||||||
if (data.modelVersion == Constants.MODEL_VERSION) {
|
if (modelVersion == Constants.MODEL_VERSION) {
|
||||||
deserializer = new ns.Deserializer(data, callback);
|
deserializer = new ns.Deserializer(data, callback);
|
||||||
} else if (data.modelVersion == 1) {
|
} else if (modelVersion == 2) {
|
||||||
|
deserializer = new ns.backward.Deserializer_v2(data, callback);
|
||||||
|
} else if (modelVersion == 1) {
|
||||||
deserializer = new ns.backward.Deserializer_v1(data, callback);
|
deserializer = new ns.backward.Deserializer_v1(data, callback);
|
||||||
} else {
|
} else {
|
||||||
deserializer = new ns.backward.Deserializer_v0(data, callback);
|
deserializer = new ns.backward.Deserializer_v0(data, callback);
|
||||||
@ -22,69 +43,102 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
ns.Deserializer.prototype.deserialize = function (name) {
|
ns.Deserializer.prototype.deserialize = function (name) {
|
||||||
var data = this.data_;
|
var buffer = this.data_;
|
||||||
var piskelData = data.piskel;
|
var arr8 = new Uint8Array(buffer);
|
||||||
name = name || 'Deserialized piskel';
|
var arr16 = new Uint16Array(buffer);
|
||||||
|
var sub;
|
||||||
|
|
||||||
var descriptor = new pskl.model.piskel.Descriptor(name, '');
|
/********/
|
||||||
this.piskel_ = new pskl.model.Piskel(piskelData.width, piskelData.height, descriptor);
|
/* META */
|
||||||
|
/********/
|
||||||
|
// Piskel meta
|
||||||
|
var modelVersion = arr16[0];
|
||||||
|
var width = arr16[1];
|
||||||
|
var height = arr16[2];
|
||||||
|
var fps = arr16[3];
|
||||||
|
|
||||||
this.layersToLoad_ = piskelData.layers.length;
|
// Descriptor meta
|
||||||
if (piskelData.expanded) {
|
var descriptorNameLength = arr16[4];
|
||||||
piskelData.layers.forEach(this.loadExpandedLayer.bind(this));
|
var descriptorDescriptionLength = arr16[5];
|
||||||
} else {
|
|
||||||
piskelData.layers.forEach(this.deserializeLayer.bind(this));
|
// Layers meta
|
||||||
|
var layerCount = arr16[6];
|
||||||
|
|
||||||
|
/********/
|
||||||
|
/* DATA */
|
||||||
|
/********/
|
||||||
|
// Descriptor name
|
||||||
|
var descriptorName = '';
|
||||||
|
for (var i = 0; i < descriptorNameLength; i++) {
|
||||||
|
descriptorName += String.fromCharCode(arr16[7 + i]);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Descriptor description
|
||||||
|
var descriptorDescription = '';
|
||||||
|
for (var i = 0; i < descriptorDescriptionLength; i++) {
|
||||||
|
descriptorDescription = String.fromCharCode(arr16[7 + descriptorNameLength + i]);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Layers
|
||||||
|
var layerStartIndex = 7 + descriptorNameLength + descriptorDescriptionLength;
|
||||||
|
var layers = [];
|
||||||
|
for (var i = 0; i < layerCount; i++) {
|
||||||
|
var layer = {};
|
||||||
|
var frames = [];
|
||||||
|
|
||||||
|
// Meta
|
||||||
|
var layerNameLength = arr16[layerStartIndex];
|
||||||
|
var opacity = arr16[layerStartIndex + 1] / 65535;
|
||||||
|
var frameCount = arr16[layerStartIndex + 2];
|
||||||
|
var dataUriLengthFirstHalf = arr16[layerStartIndex + 3];
|
||||||
|
var dataUriLengthSecondHalf = arr16[layerStartIndex + 4];
|
||||||
|
var dataUriLength = (dataUriLengthSecondHalf >>> 0) | (dataUriLengthFirstHalf << 16 >>> 0);
|
||||||
|
|
||||||
|
// Name
|
||||||
|
var layerName = '';
|
||||||
|
for (var j = 0; j < layerNameLength; j++) {
|
||||||
|
layerName += String.fromCharCode(arr16[layerStartIndex + 5 + j]);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Data URI
|
||||||
|
var dataUri = '';
|
||||||
|
for (var j = 0; j < dataUriLength; j++) {
|
||||||
|
dataUri += String.fromCharCode(arr8[(layerStartIndex + 5 + layerNameLength) * 2 + j]);
|
||||||
|
}
|
||||||
|
dataUri = 'data:image/png;base64,' + btoa(dataUri);
|
||||||
|
|
||||||
|
layerStartIndex += Math.ceil(5 + layerNameLength + (dataUriLength / 2));
|
||||||
|
|
||||||
|
layer.name = layerName;
|
||||||
|
layer.opacity = opacity;
|
||||||
|
layer.frameCount = frameCount;
|
||||||
|
layer.dataUri = dataUri;
|
||||||
|
layers.push(layer);
|
||||||
|
}
|
||||||
|
|
||||||
|
var descriptor = new pskl.model.piskel.Descriptor(descriptorName, descriptorDescription);
|
||||||
|
var piskel = new pskl.model.Piskel(width, height, descriptor);
|
||||||
|
var loadedLayers = 0;
|
||||||
|
for (var i = 0; i < layerCount; i++) {
|
||||||
|
var layer = layers[i];
|
||||||
|
var nlayer = new pskl.model.Layer(layer.name);
|
||||||
|
layer.model = nlayer;
|
||||||
|
nlayer.setOpacity(layer.opacity);
|
||||||
|
piskel.addLayer(nlayer);
|
||||||
|
|
||||||
|
var image = new Image();
|
||||||
|
(function(layer, cb) {
|
||||||
|
image.onload = function() {
|
||||||
|
var frames = pskl.utils.LayerUtils.createFramesFromSpritesheet(this, layer.frameCount);
|
||||||
|
frames.forEach(layer.model.addFrame.bind(layer.model));
|
||||||
|
|
||||||
|
loadedLayers++;
|
||||||
|
if (loadedLayers == layerCount) {
|
||||||
|
cb(piskel, {fps: fps});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
})(layer, this.callback_);
|
||||||
ns.Deserializer.prototype.deserializeLayer = function (layerString, index) {
|
image.src = layer.dataUri;
|
||||||
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.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.prototype.addFramesToLayer = function (frames, layer, index) {
|
|
||||||
frames.forEach(layer.addFrame.bind(layer));
|
|
||||||
|
|
||||||
this.layers_[index] = layer;
|
|
||||||
this.onLayerLoaded_();
|
|
||||||
};
|
|
||||||
|
|
||||||
ns.Deserializer.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_);
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
})();
|
})();
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user