78 lines
No EOL
2.3 KiB
JavaScript
78 lines
No EOL
2.3 KiB
JavaScript
(function () {
|
|
|
|
var ns = $.namespace("pskl.rendering");
|
|
|
|
ns.SpritesheetRenderer = function (framesheet) {
|
|
this.framesheet = framesheet;
|
|
};
|
|
|
|
ns.SpritesheetRenderer.prototype.renderAsImageDataSpritesheetPNG = function () {
|
|
var canvas = this.createCanvas_();
|
|
for (var i = 0 ; i < this.framesheet.getFrameCount() ; i++) {
|
|
var frame = this.framesheet.getFrameByIndex(i);
|
|
this.drawFrameInCanvas_(frame, canvas, i * this.framesheet.getWidth(), 0);
|
|
}
|
|
return canvas.toDataURL("image/png");
|
|
};
|
|
|
|
ns.SpritesheetRenderer.prototype.blobToBase64_ = function(blob, cb) {
|
|
var reader = new FileReader();
|
|
reader.onload = function() {
|
|
var dataUrl = reader.result;
|
|
cb(dataUrl);
|
|
};
|
|
reader.readAsDataURL(blob);
|
|
};
|
|
|
|
ns.SpritesheetRenderer.prototype.renderAsImageDataAnimatedGIF = function(fps, cb) {
|
|
var dpi = 10;
|
|
var gif = new window.GIF({
|
|
workers: 2,
|
|
quality: 10,
|
|
width: 320,
|
|
height: 320
|
|
});
|
|
|
|
for (var i = 0; i < this.framesheet.frames.length; i++) {
|
|
var frame = this.framesheet.frames[i];
|
|
var renderer = new pskl.rendering.CanvasRenderer(frame, dpi);
|
|
gif.addFrame(renderer.render(), {
|
|
delay: 1000 / fps
|
|
});
|
|
}
|
|
|
|
gif.on('finished', function(blob) {
|
|
this.blobToBase64_(blob, cb);
|
|
}.bind(this));
|
|
|
|
gif.render();
|
|
};
|
|
|
|
|
|
/**
|
|
* TODO(juliandescottes): 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++) {
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
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";
|
|
}
|
|
};
|
|
})(); |