wbrawner/piskel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add pixi export

Browse source
This commit is contained in:
Pascal Seitz 2016-12-04 23:24:03 +01:00
parent 9dd403a54e
commit 21c7425cbc
2 changed files with 61 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
src/js/controller/settings/exportimage/PngExportController.js
View file

@ -31,6 +31,7 @@
this.columnsInput = document.querySelector('#png-export-columns');
var downloadButton = document.querySelector('.png-download-button');
var downloadPixiButton = document.querySelector('.png-pixi-download-button');
var dataUriButton = document.querySelector('.datauri-open-button');
this.initLayoutSection_();
@ -38,6 +39,7 @@
this.addEventListener(this.columnsInput, 'input', this.onColumnsInput_);
this.addEventListener(downloadButton, 'click', this.onDownloadClick_);
this.addEventListener(downloadPixiButton, 'click', this.onPixiDownloadClick_);
this.addEventListener(dataUriButton, 'click', this.onDataUriClick_);
$.subscribe(Events.EXPORT_SCALE_CHANGED, this.onScaleChanged_);
};
@ -156,6 +158,52 @@
});
};
ns.PngExportController.prototype.onPixiDownloadClick_ = function () {
var zip = new window.JSZip();
// Create PNG export.
var canvas = this.createPngSpritesheet_();
var name = this.piskelController.getPiskel().getDescriptor().name;
zip.file(name + '.png', pskl.utils.CanvasUtils.getBase64FromCanvas(canvas) + '\n', {base64: true});
var width = canvas.width / this.getColumns_();
var height = canvas.height / this.getRows_();
var numFrames = this.piskelController.getFrameCount();
var frames = {};
for (var i = 0; i < numFrames; i++) {
var column = i % this.getColumns_();
var row = (i - column) / this.getColumns_();
var frame = {
'frame': {'x': width * column,'y': height * row,'w': width,'h': height},
'rotated': false,
'trimmed': false,
'spriteSourceSize': {'x': 0,'y': 0,'w': width,'h': height},
'sourceSize': {'w': width,'h': height}
};
frames[name + i + '.png'] = frame;
}
var json = {
'frames': frames,
'meta': {
'app': 'http://www.pisker.com',
'version': '1.0',
'image': name + '.png',
'format': 'RGBA8888',
'size': {'w': canvas.width,'h': canvas.height}
}
};
zip.file(name + '.json', JSON.stringify(json));
var blob = zip.generate({
type : 'blob'
});
pskl.utils.FileUtils.downloadAsFile(blob, name + '.zip');
};
ns.PngExportController.prototype.onDataUriClick_ = function (evt) {
window.open(this.createPngSpritesheet_().toDataURL('image/png'));
};

14
src/templates/settings/export/png.html
View file

@ -22,5 +22,17 @@
<button type="button" style="white-space: nowrap;" class="button button-primary datauri-open-button">To data-uri</button>
<span class="png-export-datauri-info export-info">Open the PNG export in your browser as a data-uri</span>
</div>
<div class="export-panel-section">
<div style="padding-bottom: 5px">
<span style="color: gold;" class="export-panel-row">Export for PixiJS Movie: </span>
</div>
<div class="export-panel-row">
<button type="button" class="button button-primary png-pixi-download-button"/>Download</button>
<span class="png-export-dimension-info export-info">Spritesheet with JSON metadata</span>
</div>
</div>
</div>
</script>
</script>