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

Issue #293: Add spritesheet layout options in PNG export tab

Browse Source
This commit is contained in:
Julian Descottes
2016-05-29 10:45:19 +02:00
parent 5a0d5da5f4
commit 169ce21556
11 changed files with 198 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/js/rendering/FramesheetRenderer.js
View File

@@ -13,11 +13,17 @@
}
};
ns.FramesheetRenderer.prototype.renderAsCanvas = function () {
var canvas = this.createCanvas_();
ns.FramesheetRenderer.prototype.renderAsCanvas = function (columns) {
columns = columns || 1;
var rows = Math.ceil(this.frames.length / columns);
var canvas = this.createCanvas_(columns, rows);
for (var i = 0 ; i < this.frames.length ; i++) {
var frame = this.frames[i];
this.drawFrameInCanvas_(frame, canvas, i * frame.getWidth(), 0);
var posX = (i % columns) * frame.getWidth();
var posY = Math.floor(i / columns) * frame.getHeight();
this.drawFrameInCanvas_(frame, canvas, posX, posY);
}
return canvas;
};
@@ -32,11 +38,10 @@
});
};
ns.FramesheetRenderer.prototype.createCanvas_ = function () {
ns.FramesheetRenderer.prototype.createCanvas_ = function (columns, rows) {
var sampleFrame = this.frames[0];
var count = this.frames.length;
var width = count * sampleFrame.getWidth();
var height = sampleFrame.getHeight();
var width = columns * sampleFrame.getWidth();
var height = rows * sampleFrame.getHeight();
return pskl.utils.CanvasUtils.createCanvas(width, height);
};
})();

19
src/js/rendering/PiskelRenderer.js
View File

@@ -11,11 +11,17 @@
this.frames = frames;
};
ns.PiskelRenderer.prototype.renderAsCanvas = function () {
var canvas = this.createCanvas_();
ns.PiskelRenderer.prototype.renderAsCanvas = function (columns) {
columns = columns || 1;
var rows = Math.ceil(this.frames.length / columns);
var canvas = this.createCanvas_(columns, rows);
for (var i = 0 ; i < this.frames.length ; i++) {
var frame = this.frames[i];
this.drawFrameInCanvas_(frame, canvas, i * this.piskelController.getWidth(), 0);
var posX = (i % columns) * this.piskelController.getWidth();
var posY = Math.floor(i / columns) * this.piskelController.getHeight();
this.drawFrameInCanvas_(frame, canvas, posX, posY);
}
return canvas;
};
@@ -25,10 +31,9 @@
context.drawImage(frame, offsetWidth, offsetHeight, frame.width, frame.height);
};
ns.PiskelRenderer.prototype.createCanvas_ = function () {
var count = this.frames.length;
var width = count * this.piskelController.getWidth();
var height = this.piskelController.getHeight();
ns.PiskelRenderer.prototype.createCanvas_ = function (columns, rows) {
var width = columns * this.piskelController.getWidth();
var height = rows * this.piskelController.getHeight();
return pskl.utils.CanvasUtils.createCanvas(width, height);
};
})();