mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

added FrameUtils unit tests

Browse Source
This commit is contained in:
jdescottes 2014-09-21 21:39:54 +02:00
parent 32e528525c
commit 9ef46d5ec5
7 changed files with 230 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/js/controller/piskel/PiskelController.js
View File

@ -158,7 +158,7 @@
ns.PiskelController.prototype.getFrameCount = function () {
var layer = this.piskel.getLayerAt(0);
return layer.length();
return layer.size();
};
ns.PiskelController.prototype.setCurrentFrameIndex = function (index) {

4
src/js/model/Layer.js
View File

@ -56,7 +56,7 @@
if (this.frames[index]) {
this.frames.splice(index, 1);
} else {
throw 'Invalid index in removeFrameAt : ' + index + ' (size : ' + this.length() + ')';
throw 'Invalid index in removeFrameAt : ' + index + ' (size : ' + this.size() + ')';
}
};
@ -93,7 +93,7 @@
}
};
ns.Layer.prototype.length = function () {
ns.Layer.prototype.size = function () {
return this.frames.length;
};

2
src/js/model/Piskel.js
View File

@ -33,7 +33,7 @@
*/
ns.Piskel.fromLayers = function (layers, descriptor) {
var piskel = null;
if (layers.length > 0 && layers[0].length() > 0) {
if (layers.length > 0 && layers[0].size() > 0) {
var sampleFrame = layers[0].getFrameAt(0);
piskel = new pskl.model.Piskel(sampleFrame.getWidth(), sampleFrame.getHeight(), descriptor);
layers.forEach(piskel.addLayer.bind(piskel));

144
src/js/utils/FrameUtils.js
View File

@ -2,6 +2,14 @@
var ns = $.namespace('pskl.utils');
var colorCache = {};
ns.FrameUtils = {
toImage : function (frame, zoom, bgColor) {
zoom = zoom || 1;
bgColor = bgColor || Constants.TRANSPARENT_COLOR;
var canvasRenderer = new pskl.rendering.CanvasRenderer(frame, zoom);
canvasRenderer.drawTransparentAs(bgColor);
return canvasRenderer.render();
},
merge : function (frames) {
var merged = null;
if (frames.length) {
@ -28,6 +36,66 @@
return pskl.utils.FrameUtils.createFromImage(resizedImage);
},
/*
* Create a pskl.model.Frame from an Image object.
* Transparent pixels will either be converted to completely opaque or completely transparent pixels.
* @param {Image} image source image
* @return {pskl.model.Frame} corresponding frame
*/
createFromImage : function (image) {
var w = image.width,
h = image.height;
var canvas = pskl.CanvasUtils.createCanvas(w, h);
var context = canvas.getContext('2d');
context.drawImage(image, 0,0,w,h,0,0,w,h);
var imgData = context.getImageData(0,0,w,h).data;
return pskl.utils.FrameUtils.createFromImageData_(imgData, w, h);
},
createFromImageData_ : function (imageData, width, height) {
// Draw the zoomed-up pixels to a different canvas context
var grid = [];
for (var x = 0 ; x < width ; 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;
var r = imageData[i ];
var g = imageData[i+1];
var b = imageData[i+2];
var a = imageData[i+3];
if (a < 125) {
grid[x][y] = Constants.TRANSPARENT_COLOR;
} else {
grid[x][y] = pskl.utils.FrameUtils.rgbToHex_(r,g,b);
}
}
}
return pskl.model.Frame.fromPixelGrid(grid);
},
/**
* Convert a rgb(Number, Number, Number) color to hexadecimal representation
* @param {Number} r red value, between 0 and 255
* @param {Number} g green value, between 0 and 255
* @param {Number} b blue value, between 0 and 255
* @return {String} hex representation of the color '#ABCDEF'
*/
rgbToHex_ : function (r, g, b) {
return "#" + this.componentToHex_(r) + this.componentToHex_(g) + this.componentToHex_(b);
},
/**
* Convert a color component (as a Number between 0 and 255) to its string hexa representation
* @param {Number} c component value, between 0 and 255
* @return {String} eg. '0A'
*/
componentToHex_ : function (c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
},
/**
* Alpha compositing using porter duff algorithm :
* http://en.wikipedia.org/wiki/Alpha_compositing
@ -36,9 +104,9 @@
* @param {String} strColor2 color under
* @return {String} the composite color
*/
mergePixels : function (strColor1, strColor2, globalOpacity1) {
var col1 = pskl.utils.FrameUtils.toRgba(strColor1);
var col2 = pskl.utils.FrameUtils.toRgba(strColor2);
mergePixels_ : function (strColor1, strColor2, globalOpacity1) {
var col1 = pskl.utils.FrameUtils.toRgba_(strColor1);
var col2 = pskl.utils.FrameUtils.toRgba_(strColor2);
if (typeof globalOpacity1 == 'number') {
col1 = JSON.parse(JSON.stringify(col1));
col1.a = globalOpacity1 * col1.a;
@ -58,7 +126,7 @@
* @param {String} c color as a string
* @return {Object} {r:Number,g:Number,b:Number,a:Number}
*/
toRgba : function (c) {
toRgba_ : function (c) {
if (colorCache[c]) {
return colorCache[c];
}
@ -97,74 +165,6 @@
}
colorCache[c] = color;
return color;
},
/*
* Create a pskl.model.Frame from an Image object.
* Transparent pixels will either be converted to completely opaque or completely transparent pixels.
* @param {Image} image source image
* @return {pskl.model.Frame} corresponding frame
*/
createFromImage : function (image) {
var w = image.width,
h = image.height;
var canvas = pskl.CanvasUtils.createCanvas(w, h);
var context = canvas.getContext('2d');
context.drawImage(image, 0,0,w,h,0,0,w,h);
var imgData = context.getImageData(0,0,w,h).data;
return pskl.utils.FrameUtils.createFromImageData(imgData, w, h);
},
createFromImageData : function (imageData, width, height) {
// Draw the zoomed-up pixels to a different canvas context
var grid = [];
for (var x = 0 ; x < width ; 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;
var r = imageData[i ];
var g = imageData[i+1];
var b = imageData[i+2];
var a = imageData[i+3];
if (a < 125) {
grid[x][y] = Constants.TRANSPARENT_COLOR;
} else {
grid[x][y] = pskl.utils.FrameUtils.rgbToHex(r,g,b);
}
}
}
return pskl.model.Frame.fromPixelGrid(grid);
},
/**
* Convert a rgb(Number, Number, Number) color to hexadecimal representation
* @param {Number} r red value, between 0 and 255
* @param {Number} g green value, between 0 and 255
* @param {Number} b blue value, between 0 and 255
* @return {String} hex representation of the color '#ABCDEF'
*/
rgbToHex : function (r, g, b) {
return "#" + this.componentToHex(r) + this.componentToHex(g) + this.componentToHex(b);
},
/**
* Convert a color component (as a Number between 0 and 255) to its string hexa representation
* @param {Number} c component value, between 0 and 255
* @return {String} eg. '0A'
*/
componentToHex : function (c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
},
toImage : function (frame, zoom, bgColor) {
zoom = zoom || 1;
bgColor = bgColor || Constants.TRANSPARENT_COLOR;
var canvasRenderer = new pskl.rendering.CanvasRenderer(frame, zoom);
canvasRenderer.drawTransparentAs(bgColor);
return canvasRenderer.render();
}
};
})();

16
src/js/utils/LayerUtils.js
View File

@ -8,20 +8,20 @@
* @param {Image} image source image
* @return {pskl.model.Frame} corresponding frame
*/
createFromImage : function (image, frameCount) {
var w = image.width,
h = image.height,
frameWidth = w / frameCount;
createLayerFromSpritesheet : function (image, frameCount) {
var width = image.width,
height = image.height,
frameWidth = width / frameCount;
var canvas = pskl.CanvasUtils.createCanvas(w, h);
var canvas = pskl.CanvasUtils.createCanvas(frameWidth, height);
var context = canvas.getContext('2d');
context.drawImage(image, 0,0,w,h,0,0,w,h);
// Draw the zoomed-up pixels to a different canvas context
var frames = [];
for (var i = 0 ; i < frameCount ; i++) {
var imgData = context.getImageData(frameWidth*i,0,frameWidth,h).data;
var frame = pskl.utils.FrameUtils.createFromImageData(imgData, frameWidth, h);
context.clearRect(0, 0 , frameWidth, height);
context.drawImage(image, frameWidth * i, 0, frameWidth, height, 0, 0, frameWidth, height);
var frame = pskl.utils.FrameUtils.createFromImage(canvas);
frames.push(frame);
}
return frames;

2
src/js/utils/serialization/Deserializer.js
View File

@ -47,7 +47,7 @@
// 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.createFromImage(image, layerData.frameCount);
var frames = pskl.utils.LayerUtils.createLayerFromSpritesheet(image, layerData.frameCount);
// 6 - add each image to the layer
this.addFramesToLayer(frames, layer);
}.bind(this);

145
test/js/utils/FrameUtilsTest.js Normal file
View File

@ -0,0 +1,145 @@
describe("FrameUtils suite", function() {
var black = '#000000';
var red = '#ff0000';
var transparent = Constants.TRANSPARENT_COLOR;
it("merges 2 frames", function () {
var frame1 = pskl.model.Frame.fromPixelGrid([
[black, transparent],
[transparent, black]
]);
var frame2 = pskl.model.Frame.fromPixelGrid([
[transparent, red],
[red, transparent]
]);
var mergedFrame = pskl.utils.FrameUtils.merge([frame1, frame2]);
expect(mergedFrame.getPixel(0,0)).toBe(black);
expect(mergedFrame.getPixel(0,1)).toBe(red);
expect(mergedFrame.getPixel(1,0)).toBe(red);
expect(mergedFrame.getPixel(1,1)).toBe(black);
});
it("returns same frame when merging single frame", function () {
var frame1 = pskl.model.Frame.fromPixelGrid([
[black, transparent],
[transparent, black]
]);
var mergedFrame = pskl.utils.FrameUtils.merge([frame1]);
expect(mergedFrame.getPixel(0,0)).toBe(black);
expect(mergedFrame.getPixel(0,1)).toBe(transparent);
expect(mergedFrame.getPixel(1,0)).toBe(transparent);
expect(mergedFrame.getPixel(1,1)).toBe(black);
});
var checkPixelsColor = function (frame, pixels, color) {
pixels.forEach(function (pixel) {
var pixelColor = frame.getPixel(pixel[0], pixel[1]);
expect(pixelColor).toBe(color);
});
};
it ("converts an image to a frame", function () {
var frame1 = pskl.model.Frame.fromPixelGrid([
[black, transparent],
[transparent, black]
]);
var image = pskl.utils.FrameUtils.toImage(frame1);
expect(image.width).toBe(2);
expect(image.height).toBe(2);
var biggerImage = pskl.utils.FrameUtils.toImage(frame1, 3);
expect(biggerImage.width).toBe(6);
expect(biggerImage.height).toBe(6);
var biggerFrame = pskl.utils.FrameUtils.createFromImage(biggerImage);
checkPixelsColor(biggerFrame, [
[0,0],[0,1],[0,2],
[1,0],[1,1],[1,2],
[2,0],[2,1],[2,2],
[3,3],[3,4],[3,5],
[4,3],[4,4],[4,5],
[5,3],[5,4],[5,5]
], black);
checkPixelsColor(biggerFrame, [
[0,3],[0,4],[0,5],
[1,3],[1,4],[1,5],
[2,3],[2,4],[2,5],
[3,0],[3,1],[3,2],
[4,0],[4,1],[4,2],
[5,0],[5,1],[5,2]
], transparent);
});
it ("[LayerUtils] creates a layer from a simple spritesheet", function () {
var frame = pskl.model.Frame.fromPixelGrid([
[black, red],
[red, black],
[black, black],
[red, red]
]);
var spritesheet = pskl.utils.FrameUtils.toImage(frame);
var frames = pskl.utils.LayerUtils.createLayerFromSpritesheet(spritesheet, 4);
expect(frames.length).toBe(4);
expect(frames[0].getPixel(0,0)).toBe(black);
expect(frames[0].getPixel(0,1)).toBe(red);
expect(frames[1].getPixel(0,0)).toBe(red);
expect(frames[1].getPixel(0,1)).toBe(black);
expect(frames[2].getPixel(0,0)).toBe(black);
expect(frames[2].getPixel(0,1)).toBe(black);
expect(frames[3].getPixel(0,0)).toBe(red);
expect(frames[3].getPixel(0,1)).toBe(red);
});
// it("starts at -1", function() {
// historyService = createMockHistoryService();
// expect(historyService.currentIndex).toBe(-1);
// });
// it("is at 0 after init", function() {
// historyService = createMockHistoryService();
// historyService.init();
// expect(historyService.currentIndex).toBe(0);
// });
// it("stores a piskel snapshot after 5 SAVE", function () {
// // BEFORE
// var SNAPSHOT_PERIOD_BACKUP = pskl.service.HistoryService.SNAPSHOT_PERIOD;
// pskl.service.HistoryService.SNAPSHOT_PERIOD = 5;
// historyService = createMockHistoryService();
// historyService.init();
// sendSaveEvents(pskl.service.HistoryService.REPLAY).times(5);
// expect(historyService.currentIndex).toBe(5);
// expect(getLastState().piskel).toBe(SERIALIZED_PISKEL);
// sendSaveEvents(pskl.service.HistoryService.REPLAY).times(4);
// sendSaveEvents(pskl.service.HistoryService.REPLAY_NO_SNAPSHOT).once();
// expect(getLastState().piskel).toBeUndefined();
// sendSaveEvents(pskl.service.HistoryService.REPLAY_NO_SNAPSHOT).once();
// expect(getLastState().piskel).toBeUndefined();
// sendSaveEvents(pskl.service.HistoryService.REPLAY).once();
// expect(getLastState().piskel).toBe(SERIALIZED_PISKEL);
// // AFTER
// pskl.service.HistoryService.SNAPSHOT_PERIOD = SNAPSHOT_PERIOD_BACKUP;
// })
});