Calculate number of sprite tasks by img dimensions

tasks/gulp-sprites.js

@@ -12,24 +12,22 @@ const DIST_PATH = 'common/dist/sprites/';
 
 // https://github.com/Ensighten/grunt-spritesmith/issues/67#issuecomment-34786248
 const MAX_SPRITESHEET_SIZE = 1024 * 1024 * 3;
-const SPRITESHEET_COUNT = _calculateNumberOfSpritesheets();
+const SPRITESHEET_SLICE_INDICIES = _calculateSpritesheetsSrcIndicies();
-const NUMBER_OF_SPRITES_PER_SHEET = SPRITES_SRC.length / SPRITESHEET_COUNT;
 
 let spritesTasks = ['sprites:clean'];
 
-times(SPRITESHEET_COUNT, (i) => {
+each(SPRITESHEET_SLICE_INDICIES, (start, index) => {
-  let slicedSrc = _getSliceSrc(i);
+  let slicedSrc = SPRITES_SRC.slice(start, SPRITESHEET_SLICE_INDICIES[index + 1]);
-
+  let taskName = `sprites:${index}`;
-  let taskName = `sprites:${i}`;
   spritesTasks.push(taskName);
 
   gulp.task(taskName, () => {
     let spriteData = gulp.src(slicedSrc)
       .pipe(spritesmith({
-        imgName: `spritesmith${i}.png`,
+        imgName: `spritesmith${index}.png`,
-        cssName: `spritesmith${i}.css`,
+        cssName: `spritesmith${index}.css`,
         algorithm: 'binary-tree',
-        padding:1,
+        padding: 1,
         cssTemplate: 'common/css/css.template.mustache',
         cssVarMap: _cssVarMap
       }));
@@ -72,6 +70,8 @@ gulp.task('sprites:checkCompiledDimensions', () => {
   if (numberOfSheetsThatAreTooBig > 0) {
     console.error(`${numberOfSheetsThatAreTooBig} sheets are too big :(`);
     console.error('Mobile Safari may be unhappy with you');
+  } else {
+    console.log('All images are within the correct dimensions');
   }
 });
 
@@ -79,41 +79,60 @@ gulp.task('sprites:compile', spritesTasks, () => {
   gulp.run('sprites:checkCompiledDimensions');
 });
 
-function _getSliceSrc(num) {
+function _calculateSpritesheetsSrcIndicies() {
-  let start = num * NUMBER_OF_SPRITES_PER_SHEET;
-  let end = (num + 1) * NUMBER_OF_SPRITES_PER_SHEET;
-  let src = SPRITES_SRC.slice(start, end)
-
-  return src;
-}
-
-function _calculateNumberOfSpritesheets() {
   let totalPixels = 0;
+  let slices = [0];
 
-  each(SPRITES_SRC, function(img){
+  each(SPRITES_SRC, (img, index) => {
-    totalPixels += _calculateImgDimensions(img);
+    let imageSize = _calculateImgDimensions(img, true);
+    totalPixels += imageSize;
+
+    if (totalPixels > MAX_SPRITESHEET_SIZE) {
+      slices.push(index - 1);
+      totalPixels = imageSize;
+    }
   });
 
-  let numberOfSpriteSheets = Math.ceil(totalPixels / MAX_SPRITESHEET_SIZE);
+  return slices;
-
-  return numberOfSpriteSheets;
 }
 
-function _calculateImgDimensions(img) {
+function _calculateImgDimensions(img, addPadding) {
   let dims = sizeOf(img);
 
+  let requiresSpecialTreatment = _checkForSpecialTreatment(img);
+  if (requiresSpecialTreatment) {
+    let newWidth = dims.width < 90 ? 90 : dims.width;
+    let newHeight = dims.height < 90 ? 90 : dims.height;
+    dims = {
+      width: newWidth,
+      height: newHeight
+    };
+  }
+
+  let padding = 0;
+
+  if (addPadding) {
+    padding = (dims.width * 8) + (dims.height * 8);
+  }
+
   if(!dims.width || !dims.height) console.error('MISSING DIMENSIONS:', dims);
 
-  let totalPixelSize = dims.width * dims.height;
+  let totalPixelSize = (dims.width * dims.height) + padding;
 
   return totalPixelSize;
 }
 
+function _checkForSpecialTreatment(name) {
+  let regex = /hair|skin|beard|mustach|shirt|flower|^headAccessory_special_\w+Ears/;
+  return name.match(regex) || name === 'head_0';
+}
+
 function _cssVarMap(sprite) {
   // For hair, skins, beards, etc. we want to output a '.customize-options.WHATEVER' class, which works as a
   // 60x60 image pointing at the proper part of the 90x90 sprite.
   // We set up the custom info here, and the template makes use of it.
-  if (sprite.name.match(/hair|skin|beard|mustach|shirt|flower|^headAccessory_special_\w+Ears/) || sprite.name=='head_0') {
+  let requiresSpecialTreatment = _checkForSpecialTreatment(sprite.name);
+  if (requiresSpecialTreatment) {
     sprite.custom = {
       px: {
         offset_x: `-${ sprite.x + 25 }px`,