From 0f0938b91b5ede6c2a1bc696f530c62e1039bcd5 Mon Sep 17 00:00:00 2001 From: juliandescottes Date: Wed, 19 Sep 2012 23:12:55 +0200 Subject: [PATCH 1/3] Changed case of PixelUtils --- js/utils/{pixelUtils.js => PixelUtils.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename js/utils/{pixelUtils.js => PixelUtils.js} (100%) diff --git a/js/utils/pixelUtils.js b/js/utils/PixelUtils.js similarity index 100% rename from js/utils/pixelUtils.js rename to js/utils/PixelUtils.js From 562d669ae146042a675d7e0bae3af0373063b549 Mon Sep 17 00:00:00 2001 From: juliandescottes Date: Thu, 20 Sep 2012 00:43:39 +0200 Subject: [PATCH 2/3] Basic export - opening new window with concatenated spritesheet in PNG format --- css/tools.css | 6 +++- img/actions/image-export.png | Bin 0 -> 909 bytes index.html | 7 ++-- js/model/FrameSheet.js | 8 +++++ js/piskel.js | 7 ++++ js/rendering/FrameRenderer.js | 23 ++---------- js/rendering/SpritesheetRenderer.js | 54 ++++++++++++++++++++++++++++ js/utils/CanvasUtils.js | 22 ++++++++++++ 8 files changed, 103 insertions(+), 24 deletions(-) create mode 100644 img/actions/image-export.png create mode 100644 js/rendering/SpritesheetRenderer.js create mode 100644 js/utils/CanvasUtils.js diff --git a/css/tools.css b/css/tools.css index b31b333e..a07c118f 100644 --- a/css/tools.css +++ b/css/tools.css @@ -22,11 +22,15 @@ background-image: url(../img/actions/save.png); } +.tool-icon.tool-export { + background-image: url(../img/actions/image-export.png); + background-position: 6px 3px; +} + .tool-icon.tool-add-frame { background-image: url(../img/actions/add.png); } - /* * Tool icons: */ diff --git a/img/actions/image-export.png b/img/actions/image-export.png new file mode 100644 index 0000000000000000000000000000000000000000..8b1bf2cbef17983da1d7231641fb7cde1026e275 GIT binary patch literal 909 zcmV;819JR{P);g8Cvw(~NxIz5jmNmdy61*7wh|ZlmajU-{p64l^>%#Xu1il{=_;nQotYAws(7;S} zHO|%(*{ec6V9wz>s8*!K6*`U+1=>TB^H;CxlzFQ&KmWv?pRY<3Gf5(QK{hyY3>#N( zM#rXI(6n?ExRI5Feg#uAHavHhEG2xJ{EWib9J6+7ay+_x`P|m-?js}-QVrD;$Poc6 zcwKmjHy_4`S2(o0hf>iK9xzfSa%mHmo`b>cH6@1pjp|RXT|2Y6tE-383h`X_NkGVp z5)}#sl*?s|PLAOEgNt}N{ussCspw&0uJA`NN>%)5*p-S(NU;a?5|O~RZMZbbG)z1g zd5GchVaT$ACM$zA**qHc2Ix@O9Wp}Kj|@G0;6N?->h|_tw(LDk*Pq1_@j%o?3@$v# z$@`#dI+AJXIQaiO+(wBvd717b2?4TQC?pV2nUVozqC}2s&+Qv jk|31+fAoJgz6dY?#|MD0|1~HG00000NkvXXu0mjf?faA| literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 339e5b53..c08af340 100644 --- a/index.html +++ b/index.html @@ -26,6 +26,7 @@
  • +
  • @@ -84,7 +85,8 @@ - + + @@ -98,8 +100,9 @@ - + + diff --git a/js/model/FrameSheet.js b/js/model/FrameSheet.js index 5fb0ca29..2b5d93ff 100644 --- a/js/model/FrameSheet.js +++ b/js/model/FrameSheet.js @@ -7,6 +7,14 @@ this.currentFrameIndex = 0; }; + ns.FrameSheet.prototype.getHeight = function () { + return this.height; + }; + + ns.FrameSheet.prototype.getWidth = function () { + return this.width; + }; + ns.FrameSheet.prototype.addEmptyFrame = function () { this.addFrame(ns.Frame.createEmpty(this.width, this.height)); }; diff --git a/js/piskel.js b/js/piskel.js index 0b02c976..696f0b0f 100644 --- a/js/piskel.js +++ b/js/piskel.js @@ -163,6 +163,13 @@ $.namespace("pskl"); event.preventDefault(); } return false; + }, + + /** + * Open new window with spritesheet as PNG + */ + exportToPNG : function () { + (new pskl.rendering.SpritesheetRenderer(frameSheet)).render(); } }; diff --git a/js/rendering/FrameRenderer.js b/js/rendering/FrameRenderer.js index 4c182eb7..ff534347 100644 --- a/js/rendering/FrameRenderer.js +++ b/js/rendering/FrameRenderer.js @@ -63,17 +63,6 @@ this.lastRenderedFrame = frame; }; - ns.FrameRenderer.prototype.drawPixel = function (col, row, frame) { - var context = this.getCanvas_(frame).getContext('2d'); - var color = frame.getPixel(col, row); - if(color == Constants.TRANSPARENT_COLOR) { - context.clearRect(this.getFramePos_(col), this.getFramePos_(row), this.dpi, this.dpi); - } else { - this.renderPixel_(color, col, row, context); - } - this.lastRenderedFrame = frame; - }; - ns.FrameRenderer.prototype.renderPixel_ = function (color, col, row, context) { if(color != Constants.TRANSPARENT_COLOR) { context.fillStyle = color; @@ -136,23 +125,15 @@ var col = frame.getWidth(), row = frame.getHeight(); - var canvas = document.createElement("canvas"); - var pixelWidth = col * this.dpi + this.gridStrokeWidth * (col - 1); var pixelHeight = row * this.dpi + this.gridStrokeWidth * (row - 1); - canvas.setAttribute("width", pixelWidth); - canvas.setAttribute("height", pixelHeight); - var canvasClassname = "canvas"; - if(this.className) { - canvasClassname += " " + this.className; - } - canvas.setAttribute("class", canvasClassname); + var canvas = pskl.CanvasUtils.createCanvas(pixelWidth, pixelHeight, ["canvas", this.className]); + this.container.append(canvas); if(this.gridStrokeWidth > 0) { this.drawGrid_(canvas, pixelWidth, pixelHeight, col, row); } - this.canvas = canvas; this.canvasConfigDirty = false; diff --git a/js/rendering/SpritesheetRenderer.js b/js/rendering/SpritesheetRenderer.js new file mode 100644 index 00000000..805da137 --- /dev/null +++ b/js/rendering/SpritesheetRenderer.js @@ -0,0 +1,54 @@ +(function () { + + var ns = $.namespace("pskl.rendering"); + + ns.SpritesheetRenderer = function (framesheet, renderingOptions) { + this.framesheet = framesheet; + }; + + + /** + * Will open a new window displaying the spritesheet as a png + */ + ns.SpritesheetRenderer.prototype.render = function () { + var canvas = this.createCanvas_(); + for (var i = 0 ; i < this.framesheet.getFrameCount() ; i++) { + var frame = this.framesheet.getFrameByIndex(i); + var offsetWidth = i * this.framesheet.getWidth(); + var offsetHeight = 0; + this.drawFrameInCanvas_(frame, canvas, offsetWidth, offsetHeight); + } + var options = [ + "dialog=yes", "scrollbars=no", "status=no", + "width=" + this.framesheet.getWidth() * this.framesheet.getFrameCount(), + "height="+this.framesheet.getHeight() + ].join(","); + + window.open(canvas.toDataURL("image/png"), "piskel-export", options); + }; + + ns.SpritesheetRenderer.prototype.createCanvas_ = function () { + var frameCount = this.framesheet.getFrameCount(); + if (frameCount > 0){ + var width = frameCount * this.framesheet.getWidth(); + var height = this.framesheet.getHeight(); + var canvas = pskl.CanvasUtils.createCanvas(width, height); + return canvas; + } else { + throw "Cannot render empty Spritesheet" + } + }; + + ns.SpritesheetRenderer.prototype.drawFrameInCanvas_ = function (frame, canvas, offsetWidth, offsetHeight) { + var context = canvas.getContext('2d'); + for(var col = 0, width = frame.getWidth(); col < width; col++) { + for(var row = 0, height = frame.getHeight(); row < height; row++) { + var color = frame.getPixel(col, row); + if(color != Constants.TRANSPARENT_COLOR) { + context.fillStyle = color; + context.fillRect(col + offsetWidth, row + offsetHeight, 1, 1); + } + } + } + } +})(); \ No newline at end of file diff --git a/js/utils/CanvasUtils.js b/js/utils/CanvasUtils.js new file mode 100644 index 00000000..fec057a4 --- /dev/null +++ b/js/utils/CanvasUtils.js @@ -0,0 +1,22 @@ +(function () { + var ns = $.namespace("pskl"); + + ns.CanvasUtils = { + createCanvas : function (width, height, classList) { + var canvas = document.createElement("canvas"); + canvas.setAttribute("width", width); + canvas.setAttribute("height", height); + + if (typeof classList == "string") { + classList = [classList]; + } + if (Array.isArray(classList)) { + for (var i = 0 ; i < classList.length ; i++) { + canvas.classList.add(classList[i]); + } + } + + return canvas; + } + }; +})(); \ No newline at end of file From 9aba931b0aefbf46001ee27d39d3476229439fc7 Mon Sep 17 00:00:00 2001 From: juliandescottes Date: Thu, 20 Sep 2012 01:10:13 +0200 Subject: [PATCH 3/3] Cleanup of SpritesheetRenderer --- js/rendering/SpritesheetRenderer.js | 53 +++++++++++++++-------------- 1 file changed, 28 insertions(+), 25 deletions(-) diff --git a/js/rendering/SpritesheetRenderer.js b/js/rendering/SpritesheetRenderer.js index 805da137..b3581c5a 100644 --- a/js/rendering/SpritesheetRenderer.js +++ b/js/rendering/SpritesheetRenderer.js @@ -2,11 +2,10 @@ var ns = $.namespace("pskl.rendering"); - ns.SpritesheetRenderer = function (framesheet, renderingOptions) { + ns.SpritesheetRenderer = function (framesheet) { this.framesheet = framesheet; }; - /** * Will open a new window displaying the spritesheet as a png */ @@ -14,31 +13,14 @@ var canvas = this.createCanvas_(); for (var i = 0 ; i < this.framesheet.getFrameCount() ; i++) { var frame = this.framesheet.getFrameByIndex(i); - var offsetWidth = i * this.framesheet.getWidth(); - var offsetHeight = 0; - this.drawFrameInCanvas_(frame, canvas, offsetWidth, offsetHeight); - } - var options = [ - "dialog=yes", "scrollbars=no", "status=no", - "width=" + this.framesheet.getWidth() * this.framesheet.getFrameCount(), - "height="+this.framesheet.getHeight() - ].join(","); - - window.open(canvas.toDataURL("image/png"), "piskel-export", options); - }; - - ns.SpritesheetRenderer.prototype.createCanvas_ = function () { - var frameCount = this.framesheet.getFrameCount(); - if (frameCount > 0){ - var width = frameCount * this.framesheet.getWidth(); - var height = this.framesheet.getHeight(); - var canvas = pskl.CanvasUtils.createCanvas(width, height); - return canvas; - } else { - throw "Cannot render empty Spritesheet" + this.drawFrameInCanvas_(frame, canvas, i * this.framesheet.getWidth(), 0); } + this.openCanvasAsPNGInWindow_(canvas); }; + /** + * TODO : (Julz) Mutualize with code already present in FrameRenderer + */ ns.SpritesheetRenderer.prototype.drawFrameInCanvas_ = function (frame, canvas, offsetWidth, offsetHeight) { var context = canvas.getContext('2d'); for(var col = 0, width = frame.getWidth(); col < width; col++) { @@ -50,5 +32,26 @@ } } } - } + }; + + ns.SpritesheetRenderer.prototype.createCanvas_ = function () { + var frameCount = this.framesheet.getFrameCount(); + if (frameCount > 0){ + var width = frameCount * this.framesheet.getWidth(); + var height = this.framesheet.getHeight(); + return pskl.CanvasUtils.createCanvas(width, height); + } else { + throw "Cannot render empty Spritesheet" + } + }; + + ns.SpritesheetRenderer.prototype.openCanvasAsPNGInWindow_ = function (canvas) { + var options = [ + "dialog=yes", "scrollbars=no", "status=no", + "width=" + this.framesheet.getWidth() * this.framesheet.getFrameCount(), + "height=" + this.framesheet.getHeight() + ].join(","); + + window.open(canvas.toDataURL("image/png"), "piskel-export", options); + }; })(); \ No newline at end of file