fix(spritesmith): split spritesheets in to multiple files to remove the

blurry iOS issue. Fixes
https://github.com/HabitRPG/habitrpg/issues/2510, see
http://goo.gl/IwxdI4 . Note, this commit isn't smart/dynamic, there's
commented-out code for handling dynamic splitting, but I couldn't get it
working - static 4 sheets for now

Gruntfile.js

@@ -1,49 +1,69 @@
+//var sizeOf = require('image-size');
+var _ = require('lodash');
+
 module.exports = function(grunt) {
 
   var timestamp = +new Date;
 
+  // So this sucks. Mobile Safari can't render image files > 1024x1024*3, so we have to break it down to multiple
+  // files in this hack approach. See https://github.com/Ensighten/grunt-spritesmith/issues/67#issuecomment-34786248
+  var images = grunt.file.expand('img/sprites/spritesmith/**/*.png');
+//  var totalDims = {width:0,height:0};
+//  _.each(images, function(img){
+//    var dims = sizeOf(img);
+//    if(!dims.width || !dims.height) console.log(dims);
+//    totalDims.width += dims.width;
+//    totalDims.height += dims.height;
+//  })
+  var COUNT = 4;//Math.ceil( (totalDims.width * totalDims.height) / (1024*1024*3) );
+  //console.log({totalDims:totalDims,COUNT:COUNT});
+
+  var sprite = {};
+  _.times(COUNT, function(i){
+    var sliced = images.slice(i * (images.length/COUNT), (i+1) * images.length/COUNT)
+    sprite[''+i] = {
+      src: sliced,
+      destImg: 'dist/spritesmith'+i+'.png',
+      destCSS: 'dist/spritesmith'+i+'.css',
+      algorithm: 'binary-tree',
+      padding:1,
+      cssTemplate: 'css/css.template.mustache',
+      cssVarMap: function (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/) || sprite.name=='head_0') {
+          sprite.custom = {
+            px: {
+              offset_x: "-" + (sprite.x + 25) + "px",
+              offset_y: "-" + (sprite.y + 15) + "px",
+              width: "" + 60 + "px",
+              height: "" + 60 + "px"
+            }
+          }
+        }
+        if (~sprite.name.indexOf('shirt'))
+          sprite.custom.px.offset_y = "-" + (sprite.y + 30) + "px"; // even more for shirts
+      }
+      /*,cssOpts: {
+       cssClass: function (item) {
+       return '.' + item.name; //'.sprite-' + item.name;
+       }
+       }*/
+    }
+  })
+
   grunt.initConfig({
 
     // Cleanup previous spritesmith files
     clean: {
-      main: ['dist/spritesmith.png']
+      main: ['dist/spritesmith*.*']
     },
 
     /**
      * Converts our individual image files in img/spritesmith into a unified spritesheet.
      */
-    sprite:{
+    sprite: sprite,
-      main: {
-        src: 'img/sprites/spritesmith/**/*.png',
-        destImg: 'dist/spritesmith.png',
-        destCSS: 'dist/spritesmith.css',
-        algorithm: 'binary-tree',
-        padding:1,
-        cssTemplate: 'css/css.template.mustache',
-        cssVarMap: function (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/) || sprite.name=='head_0') {
-            sprite.custom = {
-              px: {
-                offset_x: "-" + (sprite.x + 25) + "px",
-                offset_y: "-" + (sprite.y + 15) + "px",
-                width: "" + 60 + "px",
-                height: "" + 60 + "px"
-              }
-            }
-          }
-          if (~sprite.name.indexOf('shirt'))
-            sprite.custom.px.offset_y = "-" + (sprite.y + 30) + "px"; // even more for shirts
-        }
-        /*,cssOpts: {
-          cssClass: function (item) {
-            return '.' + item.name; //'.sprite-' + item.name;
-          }
-        }*/
-      }
-    },
 
     cssmin: {
       dist: {
@@ -52,7 +72,7 @@ module.exports = function(grunt) {
         },
         files:{
           "dist/habitrpg-shared.css": [
-            "dist/spritesmith.css",
+            "dist/spritesmith*.css",
             "css/backer.css",
             "css/Mounts.css",
             "css/index.css"

css/css.template.mustache

@@ -4,7 +4,6 @@
   background-position: {{px.offset_x}} {{px.offset_y}};
   width: {{px.width}};
   height: {{px.height}};
-  background-size: {{px.total_width}} {{px.total_height}};
 }
 {{#custom}}
 .customize-option.{{name}} {
@@ -12,7 +11,6 @@
   background-position: {{custom.px.offset_x}} {{custom.px.offset_y}};
   width: {{custom.px.width}};
   height: {{custom.px.height}};
-  background-size: {{px.total_width}} {{px.total_height}};
 }
 {{/custom}}
 {{/items}}

package.json

@@ -17,7 +17,8 @@
     "grunt-contrib-cssmin": "~0.8.0",
     "grunt-browserify": "~1.3.1",
     "grunt-contrib-clean": "~0.5.0",
-    "habitrpg": "git://github.com/HabitRPG/habitrpg.git#develop"
+    "habitrpg": "git://github.com/HabitRPG/habitrpg.git#develop",
+    "image-size": "~0.3.2"
   },
   "scripts": {
     "test": "mocha"