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,22 +1,30 @@
+//var sizeOf = require('image-size');
+var _ = require('lodash');
+
 module.exports = function(grunt) {
 
   var timestamp = +new Date;
 
-  grunt.initConfig({
+  // 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});
 
-    // Cleanup previous spritesmith files
+  var sprite = {};
-    clean: {
+  _.times(COUNT, function(i){
-      main: ['dist/spritesmith.png']
+    var sliced = images.slice(i * (images.length/COUNT), (i+1) * images.length/COUNT)
-    },
+    sprite[''+i] = {
-
+      src: sliced,
-    /**
+      destImg: 'dist/spritesmith'+i+'.png',
-     * Converts our individual image files in img/spritesmith into a unified spritesheet.
+      destCSS: 'dist/spritesmith'+i+'.css',
-     */
-    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',
@@ -43,8 +51,20 @@ module.exports = function(grunt) {
        }
        }*/
     }
+  })
+
+  grunt.initConfig({
+
+    // Cleanup previous spritesmith files
+    clean: {
+      main: ['dist/spritesmith*.*']
     },
 
+    /**
+     * Converts our individual image files in img/spritesmith into a unified spritesheet.
+     */
+    sprite: sprite,
+
     cssmin: {
       dist: {
         options: {
@@ -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"