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 00000000..8b1bf2cb
Binary files /dev/null and b/img/actions/image-export.png differ
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