Simple script to check the resulting size of the spritesheet dataURI generated by the brower

piskel_compare_layouts.js

(function () {
  var verticalSize = pskl.app.piskelController.getPiskel().getLayers().reduce(function (total, layer) {
    var renderer = new pskl.rendering.FramesheetRenderer(layer.getFrames());
    total += renderer.renderAsCanvas(1).toDataURL().length;
    return total;
  }, 0);

  console.log("Vertical size:", verticalSize);

  var frameCount = pskl.app.piskelController.getFrameCount();
  var ratio = pskl.app.piskelController.getWidth() / pskl.app.piskelController.getHeight();
  var bestFit = Math.round(Math.sqrt(frameCount / ratio));
  var columns = pskl.utils.Math.minmax(bestFit, 1, frameCount);
  var squareSize = pskl.app.piskelController.getPiskel().getLayers().reduce(function (total, layer) {
    var frames = layer.getFrames();
    var renderer = new pskl.rendering.FramesheetRenderer(frames);
    total += renderer.renderAsCanvas(columns).toDataURL().length;
    return total;
  }, 0);

  console.log("Square size (" + columns + "):", squareSize);

  var horizontalSize = pskl.app.piskelController.getPiskel().getLayers().reduce(function (total, layer) {
    var renderer = new pskl.rendering.FramesheetRenderer(layer.getFrames());
    total += renderer.renderAsCanvas().toDataURL().length;
    return total;
  }, 0);

  console.log("Horizontal size:", horizontalSize);

  if (verticalSize < horizontalSize) {
    console.log("Vertical size is smaller than horizontal size by " +
      (100 * (horizontalSize - verticalSize)/horizontalSize) + "%");
  } else if (verticalSize > horizontalSize) {
    console.log("Horizontal size is smaller than vertical size by " +
      (100 * (verticalSize - horizontalSize)/verticalSize) + "%");
  } else {
    console.log("Vertical and horizontal sizes are identical");
  }

  var bestSize = Math.min(verticalSize, horizontalSize);
  if (squareSize < bestSize) {
    console.log("Square size is smaller than best size by " +
      (100 * (bestSize - squareSize)/bestSize) + "%");
  } else if (squareSize > bestSize) {
    console.log("Best size is smaller than square size by " +
      (100 * (squareSize - horizontalSize)/squareSize) + "%");
  } else {
    console.log("Square and best sizes are identical");
  }
})()