mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
6528c7724b
!! NOT STABLE !! Initial implementation. No UI update yet. Check js/model/Piskel.js and js/model/Layer.js for an overview of the new API. Piskels can be saved on the existing service. Previous piskels cannot be loaded. This should be fixed soon.
67 lines
2.5 KiB
JavaScript
67 lines
2.5 KiB
JavaScript
(function () {
|
|
var ns = $.namespace("pskl.controller");
|
|
ns.AnimatedPreviewController = function (piskelController, container, dpi) {
|
|
this.piskelController = piskelController;
|
|
this.container = container;
|
|
|
|
this.elapsedTime = 0;
|
|
this.currentIndex = 0;
|
|
|
|
this.fps = parseInt($("#preview-fps")[0].value, 10);
|
|
|
|
var renderingOptions = {
|
|
"dpi": this.calculateDPI_()
|
|
};
|
|
this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions);
|
|
|
|
$.subscribe(Events.FRAME_SIZE_CHANGED, this.updateDPI_.bind(this));
|
|
};
|
|
|
|
ns.AnimatedPreviewController.prototype.init = function () {
|
|
// the oninput event won't work on IE10 unfortunately, but at least will provide a
|
|
// consistent behavior across all other browsers that support the input type range
|
|
// see https://bugzilla.mozilla.org/show_bug.cgi?id=853670
|
|
$("#preview-fps")[0].addEventListener('change', this.onFPSSliderChange.bind(this));
|
|
};
|
|
|
|
ns.AnimatedPreviewController.prototype.onFPSSliderChange = function (evt) {
|
|
this.setFPS(parseInt($("#preview-fps")[0].value, 10));
|
|
};
|
|
|
|
ns.AnimatedPreviewController.prototype.setFPS = function (fps) {
|
|
this.fps = fps;
|
|
$("#preview-fps").val(this.fps);
|
|
$("#display-fps").html(this.fps + " FPS");
|
|
};
|
|
|
|
ns.AnimatedPreviewController.prototype.render = function (delta) {
|
|
this.elapsedTime += delta;
|
|
var index = Math.floor(this.elapsedTime / (1000/this.fps));
|
|
if (index != this.currentIndex) {
|
|
this.currentIndex = index;
|
|
if (!this.piskelController.hasFrameAt(this.currentIndex)) {
|
|
this.currentIndex = 0;
|
|
this.elapsedTime = 0;
|
|
}
|
|
this.renderer.render(this.piskelController.getFrameAt(this.currentIndex));
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Calculate the preview DPI depending on the framesheet size
|
|
*/
|
|
ns.AnimatedPreviewController.prototype.calculateDPI_ = function () {
|
|
var previewSize = 200,
|
|
framePixelHeight = this.piskelController.getCurrentFrame().getHeight(),
|
|
framePixelWidth = this.piskelController.getCurrentFrame().getWidth();
|
|
// TODO (julz) : should have a utility to get a Size from framesheet easily (what about empty framesheets though ?)
|
|
|
|
//return pskl.PixelUtils.calculateDPIForContainer($(".preview-container"), framePixelHeight, framePixelWidth);
|
|
return pskl.PixelUtils.calculateDPI(previewSize, previewSize, framePixelHeight, framePixelWidth);
|
|
};
|
|
|
|
ns.AnimatedPreviewController.prototype.updateDPI_ = function () {
|
|
this.dpi = this.calculateDPI_();
|
|
this.renderer.updateDPI(this.dpi);
|
|
};
|
|
})(); |