wbrawner/piskel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix : reduce piskel model size

Browse source 
+ moved Serializer and Deserializer to utils.serialization package
+ put all backward code in utils.serialization.backward
+ added static method on Deserializer to make its usage similar to other
  utils in the package
- still not happy with the names used in Deserializer classes
  (deserializer.deserialize ...)
This commit is contained in:
jdescottes 2013-11-15 00:03:05 +01:00
parent 4a1a7b6c2b
commit 86cd1cdeaa
9 changed files with 112 additions and 273 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

179
diff
View file

@ -1,179 +0,0 @@
diff --git a/js/controller/settings/ImportController.js b/js/controller/settings/ImportController.js
index 3fca048..3c94eaa 100644
--- a/js/controller/settings/ImportController.js
+++ b/js/controller/settings/ImportController.js
@@ -153,15 +153,12 @@
var image = pskl.utils.ImageResizer.resize(this.importedImage_, w, h, smoothing);
var frame = pskl.utils.FrameUtils.createFromImage(image);
- // TODO : juliandescottes : here we only want to create a layer from an array of frames, and create a new piskel using this layer
- // we shouldn't use the deserializer for this ... it's only working because it's falling back to the old implementation
- // bad, very bad
- var deserializer = new pskl.utils.Deserializer([frame], function (piskel) {
- pskl.app.piskelController.setPiskel(piskel);
- pskl.app.animationController.setFPS(Constants.DEFAULT.FPS);
- this.reset_();
- }.bind(this));
- deserializer.deserialize();
+ var layer = pskl.model.Layer.fromFrames('Layer 1', [frame]);
+ var piskel = pskl.model.Piskel.fromLayers([layer]);
+
+ pskl.app.piskelController.setPiskel(piskel);
+ pskl.app.animationController.setFPS(Constants.DEFAULT.FPS);
+ this.reset_();
}
}
};
diff --git a/js/model/Layer.js b/js/model/Layer.js
index 0132e6a..464b1f9 100644
--- a/js/model/Layer.js
+++ b/js/model/Layer.js
@@ -10,6 +10,12 @@
}
};
+ ns.Layer.fromFrames = function (name, frames) {
+ var layer = new ns.Layer(name);
+ frames.forEach(layer.addFrame.bind(layer));
+ return layer;
+ };
+
ns.Layer.prototype.getName = function () {
return this.name;
};
diff --git a/js/model/Piskel.js b/js/model/Piskel.js
index 7748408..223d618 100644
--- a/js/model/Piskel.js
+++ b/js/model/Piskel.js
@@ -21,6 +21,18 @@
}
};
+ ns.Piskel.fromLayers = function (layers) {
+ var piskel = null;
+ if (layers.length > 0 && layers[0].length() > 0) {
+ var sampleFrame = layers[0].getFrameAt(0);
+ piskel = new pskl.model.Piskel(sampleFrame.getWidth(), sampleFrame.getHeight());
+ layers.forEach(piskel.addLayer.bind(piskel));
+ } else {
+ throw 'Piskel.fromLayers expects array of non empty pskl.model.Layer as first argument'
+ }
+ return piskel;
+ };
+
ns.Piskel.prototype.getLayers = function () {
return this.layers;
};
diff --git a/js/utils/Deserializer.js b/js/utils/Deserializer.js
index 5a248ba..56f64e4 100644
--- a/js/utils/Deserializer.js
+++ b/js/utils/Deserializer.js
@@ -41,9 +41,7 @@
var frames = pskl.utils.LayerUtils.createFromImage(image, layerData.frameCount);
// 6 - add each image to the layer
- frames.forEach(function (frame) {
- layer.addFrame(pskl.model.Frame.fromPixelGrid(frame));
- });
+ frames.forEach(layer.addFrame.bind(layer));
this.onLayerLoaded_();
}.bind(this);
diff --git a/js/utils/FrameUtils.js b/js/utils/FrameUtils.js
index b20d84f..055c8ed 100644
--- a/js/utils/FrameUtils.js
+++ b/js/utils/FrameUtils.js
@@ -41,9 +41,9 @@
createFromImageData : function (imageData, width, height) {
// Draw the zoomed-up pixels to a different canvas context
- var frame = [];
+ var grid = [];
for (var x = 0 ; x < width ; x++){
- frame[x] = [];
+ grid[x] = [];
for (var y = 0 ; y < height ; y++){
// Find the starting index in the one-dimensional image data
var i = (y * width + x)*4;
@@ -52,13 +52,13 @@
var b = imageData[i+2];
var a = imageData[i+3];
if (a < 125) {
- frame[x][y] = Constants.TRANSPARENT_COLOR;
+ grid[x][y] = Constants.TRANSPARENT_COLOR;
} else {
- frame[x][y] = pskl.utils.FrameUtils.rgbToHex(r,g,b);
+ grid[x][y] = pskl.utils.FrameUtils.rgbToHex(r,g,b);
}
}
}
- return frame;
+ return pskl.model.Frame.fromPixelGrid(grid);
},
/**
diff --git a/js/utils/Serializer.js b/js/utils/Serializer.js
index d103ad7..5841e6b 100644
--- a/js/utils/Serializer.js
+++ b/js/utils/Serializer.js
@@ -30,38 +30,6 @@
});
},
- deserializeLayer : function (layerString) {
- var layerData = JSON.parse(layerString);
- var layer = new pskl.model.Layer(layerData.name);
- // TODO : nasty trick to keep the whole loading process lazily synchronous
- // 1 - adding a fake frame so that the rendering can start
- layer.addFrame(new pskl.model.Frame(32,32));
-
- // 2 - create an image to load the base64PNG representing the layer
- var base64PNG = layerData.base64PNG;
- var image = new Image();
-
- // 3 - attach the onload callback that will be triggered asynchronously
- image.onload = function () {
- // 6 - remove the fake frame
- layer.removeFrameAt(0);
-
- // 7 - extract the frames from the loaded image
- var frames = pskl.utils.LayerUtils.createFromImage(image, layerData.frameCount);
-
- // 8 - add each image to the layer
- frames.forEach(function (frame) {
- layer.addFrame(pskl.model.Frame.fromPixelGrid(frame));
- });
- };
-
- // 4 - set the source of the image
- image.src = base64PNG;
-
- // 5 - return a pointer to the new layer instance, which at this point contains a fake frame
- return layer;
- },
-
backwardDeserializer_v1 : function (data) {
var piskelData = data.piskel;
var piskel = new pskl.model.Piskel(piskelData.width, piskelData.height);
@@ -93,16 +61,12 @@
/**
* Deserialize old piskel framesheets. Initially piskels were stored as arrays of frames : "[[pixelGrid],[pixelGrid],[pixelGrid]]".
*/
- backwardDeserializer_ : function (frames) {
- var layer = new pskl.model.Layer('Layer 1');
- frames.forEach(function (frame) {
- layer.addFrame(pskl.model.Frame.fromPixelGrid(frame));
+ backwardDeserializer_ : function (pixelGrids) {
+ var frames = pixelGrids.map(function (grid) {
+ return pskl.model.Frame.fromPixelGrid(grid);
});
- var width = layer.getFrameAt(0).getWidth(), height = layer.getFrameAt(0).getHeight();
- var piskel = new pskl.model.Piskel(width, height);
- piskel.addLayer(layer);
-
- return piskel;
+ var layer = pskl.model.Layer.fromFrames('Layer 1', frames);
+ return pskl.model.Piskel.fromLayers([layer]);
}
};
})();

6
js/app.js
View file

@ -93,11 +93,10 @@
finishInitAppEngine_ : function () {
if (pskl.framesheetData_ && pskl.framesheetData_.content) {
var deserializer = new pskl.utils.Deserializer(pskl.framesheetData_.content, function (piskel) {
pskl.utils.serialization.Deserializer.deserialize(pskl.framesheetData_.content, function (piskel) {
pskl.app.piskelController.setPiskel(piskel);
pskl.app.animationController.setFPS(pskl.framesheetData_.fps);
});
deserializer.deserialize();
}
},
@ -158,12 +157,11 @@
xhr.responseType = 'text';
xhr.onload = function (e) {
var res = JSON.parse(this.responseText);
var deserializer = new pskl.utils.Deserializer(res.framesheet, function (piskel) {
pskl.utils.serialization.Deserializer.deserialize(res.framesheet, function (piskel) {
pskl.app.piskelController.setPiskel(piskel);
pskl.app.animationController.setFPS(res.fps);
$.publish(Events.HIDE_NOTIFICATION);
});
deserializer.deserialize();
};
xhr.onerror = function () {

3
js/service/LocalStorageService.js
View file

@ -45,10 +45,9 @@
*/
ns.LocalStorageService.prototype.restoreFromLocalStorage_ = function() {
var framesheet = JSON.parse(window.localStorage.snapShot);
var deserializer = new pskl.utils.Deserializer(framesheet, function (piskel) {
pskl.utils.serialization.Deserializer.deserialize(framesheet, function (piskel) {
pskl.app.piskelController.setPiskel(piskel);
});
deserializer.deserialize();
};
/**

72
js/utils/Serializer.js
View file

@ -1,72 +0,0 @@
(function () {
var ns = $.namespace('pskl.utils');
var layersToLoad = 0;
ns.Serializer = {
serializePiskel : function (piskel) {
var serializedLayers = piskel.getLayers().map(function (l) {
return pskl.utils.Serializer.serializeLayer(l);
});
return JSON.stringify({
modelVersion : Constants.MODEL_VERSION,
piskel : {
height : piskel.getHeight(),
width : piskel.getWidth(),
layers : serializedLayers
}
});
},
serializeLayer : function (layer) {
var frames = layer.getFrames();
var renderer = new pskl.rendering.FramesheetRenderer(frames);
var base64PNG = renderer.renderAsCanvas().toDataURL();
return JSON.stringify({
name : layer.getName(),
base64PNG : base64PNG,
frameCount : frames.length
});
},
backwardDeserializer_v1 : function (data) {
var piskelData = data.piskel;
var piskel = new pskl.model.Piskel(piskelData.width, piskelData.height);
piskelData.layers.forEach(function (serializedLayer) {
var layer = pskl.utils.Serializer.deserializeLayer_v1(serializedLayer);
piskel.addLayer(layer);
});
return piskel;
},
deserializeLayer_v1 : function (layerString) {
var layerData = JSON.parse(layerString);
var layer = new pskl.model.Layer(layerData.name);
layerData.frames.forEach(function (serializedFrame) {
var frame = pskl.utils.Serializer.deserializeFrame_v1(serializedFrame);
layer.addFrame(frame);
});
return layer;
},
deserializeFrame_v1 : function (frameString) {
var framePixelGrid = JSON.parse(frameString);
return pskl.model.Frame.fromPixelGrid(framePixelGrid);
},
/**
* Deserialize old piskel framesheets. Initially piskels were stored as arrays of pixelGrids : "[[pixelGrid],[pixelGrid],[pixelGrid]]".
*/
backwardDeserializer_ : function (pixelGrids) {
var frames = pixelGrids.map(function (grid) {
return pskl.model.Frame.fromPixelGrid(grid);
});
var layer = pskl.model.Layer.fromFrames('Layer 1', frames);
return pskl.model.Piskel.fromLayers([layer]);
}
};
})();

34
js/utils/Deserializer.js → js/utils/serialization/Deserializer.js
View file

@ -1,5 +1,5 @@
(function () {
var ns = $.namespace('pskl.utils');
var ns = $.namespace('pskl.utils.serialization');
ns.Deserializer = function (data, callback) {
this.layersToLoad_ = 0;
@ -8,23 +8,29 @@
this.piskel_ = null;
};
ns.Deserializer.deserialize = function (data, callback) {
var deserializer;
if (data.modelVersion == Constants.MODEL_VERSION) {
deserializer = new ns.Deserializer(data, callback);
} else if (data.modelVersion == 1) {
deserializer = new ns.backward.Deserializer_v1(data, callback);
} else {
deserializer = new ns.backward.Deserializer_v0(data, callback);
}
deserializer.deserialize();
};
ns.Deserializer.prototype.deserialize = function () {
var data = this.data_;
if (data.modelVersion == Constants.MODEL_VERSION) {
var piskelData = data.piskel;
this.piskel_ = new pskl.model.Piskel(piskelData.width, piskelData.height);
var piskelData = data.piskel;
this.piskel_ = new pskl.model.Piskel(piskelData.width, piskelData.height);
this.layersToLoad_ = piskelData.layers.length;
this.layersToLoad_ = piskelData.layers.length;
piskelData.layers.forEach(function (serializedLayer) {
var layer = this.deserializeLayer(serializedLayer);
this.piskel_.addLayer(layer);
}.bind(this));
} else if (data.modelVersion == 1) {
this.callback_(pskl.utils.Serializer.backwardDeserializer_v1(data));
} else {
this.callback_(pskl.utils.Serializer.backwardDeserializer_(data));
}
piskelData.layers.forEach(function (serializedLayer) {
var layer = this.deserializeLayer(serializedLayer);
this.piskel_.addLayer(layer);
}.bind(this));
};
ns.Deserializer.prototype.deserializeLayer = function (layerString) {

31
js/utils/serialization/Serializer.js Normal file
View file

@ -0,0 +1,31 @@
(function () {
var ns = $.namespace('pskl.utils');
ns.Serializer = {
serializePiskel : function (piskel) {
var serializedLayers = piskel.getLayers().map(function (l) {
return pskl.utils.Serializer.serializeLayer(l);
});
return JSON.stringify({
modelVersion : Constants.MODEL_VERSION,
piskel : {
height : piskel.getHeight(),
width : piskel.getWidth(),
layers : serializedLayers
}
});
},
serializeLayer : function (layer) {
var frames = layer.getFrames();
var renderer = new pskl.rendering.FramesheetRenderer(frames);
var base64PNG = renderer.renderAsCanvas().toDataURL();
return JSON.stringify({
name : layer.getName(),
base64PNG : base64PNG,
frameCount : frames.length
});
}
};
})();

18
js/utils/serialization/backward/Deserializer_v0.js Normal file
View file

@ -0,0 +1,18 @@
(function () {
var ns = $.namespace('pskl.utils.serialization.backward');
ns.Deserializer_v0 = function (data, callback) {
this.data_ = data;
this.callback_ = callback;
};
ns.Deserializer_v0.prototype.deserialize = function () {
var pixelGrids = this.data_;
var frames = pixelGrids.map(function (grid) {
return pskl.model.Frame.fromPixelGrid(grid);
});
var layer = pskl.model.Layer.fromFrames('Layer 1', frames);
this.callback_(pskl.model.Piskel.fromLayers([layer]));
};
})();

36
js/utils/serialization/backward/Deserializer_v1.js Normal file
View file

@ -0,0 +1,36 @@
(function () {
var ns = $.namespace('pskl.utils.serialization.backward');
ns.Deserializer_v1 = function (data, callback) {
this.callback_ = callback;
this.data_ = data;
};
ns.Deserializer_v1.prototype.deserialize = function () {
var piskelData = this.data_.piskel;
var piskel = new pskl.model.Piskel(piskelData.width, piskelData.height);
piskelData.layers.forEach(function (serializedLayer) {
var layer = this.deserializeLayer(serializedLayer);
piskel.addLayer(layer);
}.bind(this));
this.callback_(piskel);
};
ns.Deserializer_v1.prototype.deserializeLayer = function (layerString) {
var layerData = JSON.parse(layerString);
var layer = new pskl.model.Layer(layerData.name);
layerData.frames.forEach(function (serializedFrame) {
var frame = this.deserializeFrame(serializedFrame);
layer.addFrame(frame);
}.bind(this));
return layer;
};
ns.Deserializer_v1.prototype.deserializeFrame = function (frameString) {
var framePixelGrid = JSON.parse(frameString);
return pskl.model.Frame.fromPixelGrid(framePixelGrid);
};
})();

6
piskel-script-list.js
View file

@ -19,10 +19,12 @@ exports.scripts = [
"js/utils/LayerUtils.js",
"js/utils/ImageResizer.js",
"js/utils/PixelUtils.js",
"js/utils/Deserializer.js",
"js/utils/Serializer.js",
"js/utils/Template.js",
"js/utils/UserSettings.js",
"js/utils/serialization/Serializer.js",
"js/utils/serialization/Deserializer.js",
"js/utils/serialization/backward/Deserializer_v0.js",
"js/utils/serialization/backward/Deserializer_v1.js",
"js/lib/jsColor_1_4_0/jscolor.js",
// Application libraries-->