diff --git a/src/css/settings.css b/src/css/settings.css index 17a4c6e2..0a16c425 100644 --- a/src/css/settings.css +++ b/src/css/settings.css @@ -35,7 +35,7 @@ .drawer-content { overflow: hidden; background-color: #444; - height: 550px; + height: 650px; max-height: 100%; width: 280px; border-top-left-radius: 4px; diff --git a/src/js/controller/settings/exportimage/CExportController.js b/src/js/controller/settings/exportimage/CExportController.js new file mode 100644 index 00000000..b46f61a3 --- /dev/null +++ b/src/js/controller/settings/exportimage/CExportController.js @@ -0,0 +1,81 @@ +(function () { + var ns = $.namespace('pskl.controller.settings.exportimage'); + + var BLACK = '#000000'; + + ns.CExportController = function (piskelController) { + this.piskelController = piskelController; + }; + + pskl.utils.inherit(ns.CExportController, pskl.controller.settings.AbstractSettingController); + + ns.CExportController.prototype.init = function () { + + var downloadButton = document.querySelector('.c-download-button'); + this.addEventListener(downloadButton, 'click', this.onCDownloadButtonClick_); + }; + + ns.CExportController.prototype.onCDownloadButtonClick_ = function (evt) { + var fileName = this.getPiskelName_() + '.c'; + var cName = this.getPiskelName_().replace(" ","_"); + var outputCanvas = this.getFramesheetAsCanvas(); + var width = this.piskelController.getWidth(); + var height = this.piskelController.getHeight(); + + // Create a background canvas that will be filled with the transparent color before each render. + var background = pskl.utils.CanvasUtils.createCanvas(width, height); + var context = background.getContext('2d'); + context.fillStyle = BLACK; + + // Useful defines for C routines + var frameStr = '#include \n\n'; + frameStr += '#define '+ cName.toUpperCase() + '_FRAME_COUNT ' + this.piskelController.getFrameCount() + '\n'; + frameStr += '#define '+ cName.toUpperCase() + '_WIDTH ' + width + '\n'; + frameStr += '#define '+ cName.toUpperCase() + '_HEIGHT ' + height + '\n\n'; + + frameStr += '/* Piskel \"' + this.getPiskelName_() + '\" */\n\n'; + + frameStr += 'uint32_t ' + this.getPiskelName_().toLowerCase(); + frameStr += '_data[' + this.piskelController.getFrameCount() + '][' + width * height + '] = {\n'; + + for (var i = 0 ; i < this.piskelController.getFrameCount() ; i++) { + var render = this.piskelController.renderFrameAt(i, true); + context.clearRect(0, 0, width, height); + context.fillRect(0, 0, width, height); + context.drawImage(render, 0, 0, width, height); + var imgd = context.getImageData(0, 0, width, height); + var pix = imgd.data; + + frameStr += '{\n'; + for (var i = 0; i < pix.length; i += 4) { + frameStr += this.rgbToCUint(pix[i], pix[i+1], pix[i+2]); + if (i != pix.length - 4) + frameStr += ', '; + if (i % (width * 4) == 0) + frameStr += '\n'; + } + frameStr += '\n}'; + + } + + frameStr += '};' + pskl.utils.BlobUtils.stringToBlob(frameStr, function(blob) { + pskl.utils.FileUtils.downloadAsFile(blob, fileName); + }.bind(this), 'application/text'); + + }; + + ns.CExportController.prototype.getPiskelName_ = function () { + return this.piskelController.getPiskel().getDescriptor().name; + }; + + ns.CExportController.prototype.rgbToCUint = function (r, g, b) { + return '0x' + r.toString(16).slice(-2) + g.toString(16).slice(-2) + b.toString(16).slice(-2); + }; + + ns.CExportController.prototype.getFramesheetAsCanvas = function () { + var renderer = new pskl.rendering.PiskelRenderer(this.piskelController); + return renderer.renderAsCanvas(); + }; + +})(); diff --git a/src/js/controller/settings/exportimage/ImageExportController.js b/src/js/controller/settings/exportimage/ImageExportController.js index 193ece6f..9a589187 100644 --- a/src/js/controller/settings/exportimage/ImageExportController.js +++ b/src/js/controller/settings/exportimage/ImageExportController.js @@ -5,6 +5,7 @@ this.piskelController = piskelController; this.pngExportController = new ns.PngExportController(piskelController); this.gifExportController = new ns.GifExportController(piskelController); + this.cExportController = new ns.CExportController(piskelController); }; pskl.utils.inherit(ns.ImageExportController, pskl.controller.settings.AbstractSettingController); @@ -19,11 +20,13 @@ this.pngExportController.init(); this.gifExportController.init(); + this.cExportController.init(); }; ns.ImageExportController.prototype.destroy = function () { this.pngExportController.destroy(); this.gifExportController.destroy(); + this.cExportController.destroy(); this.superclass.destroy.call(this); }; diff --git a/src/piskel-script-list.js b/src/piskel-script-list.js index 144895b7..a43b144d 100644 --- a/src/piskel-script-list.js +++ b/src/piskel-script-list.js @@ -117,6 +117,7 @@ "js/controller/settings/exportimage/ImageExportController.js", "js/controller/settings/exportimage/GifExportController.js", "js/controller/settings/exportimage/PngExportController.js", + "js/controller/settings/exportimage/CExportController.js", "js/controller/settings/resize/AnchorWidget.js", "js/controller/settings/resize/ResizeController.js", "js/controller/settings/resize/DefaultSizeController.js", diff --git a/src/templates/settings/export.html b/src/templates/settings/export.html index b842615f..5fabdb71 100644 --- a/src/templates/settings/export.html +++ b/src/templates/settings/export.html @@ -61,5 +61,12 @@
+
+ Export as C File +
+
+
C file with frame rendered as array.
+ +