sprite-factory 1.0.0 → 1.2.0

data/sprite_factory.gemspec

@@ -16,7 +16,11 @@ Gem::Specification.new do |s|
   s.add_development_dependency 'rmagick'
   s.add_development_dependency 'chunky_png'
 
-  s.files         = `git ls-files`.split("\n")
+  s.has_rdoc         = false
+  s.extra_rdoc_files = ["README.md"]
+  s.rdoc_options     = ["--charset=UTF-8"]
+  
+  s.files         = `git ls-files `.split("\n")
   s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
   s.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
   s.require_paths = ["lib"]

data/test/images/reference/index.html

@@ -6,12 +6,14 @@
     <link href='regular.css'              rel='stylesheet' type='text/css' media='screen'></link>
     <link href='regular.horizontal.css'   rel='stylesheet' type='text/css' media='screen'></link>
     <link href='regular.vertical.css'     rel='stylesheet' type='text/css' media='screen'></link>
+    <link href='regular.packed.css'       rel='stylesheet' type='text/css' media='screen'></link>
     <link href='regular.padded.css'       rel='stylesheet' type='text/css' media='screen'></link> 
     <link href='regular.fixed.css'        rel='stylesheet' type='text/css' media='screen'></link> 
     <link href='regular.sassy.css'        rel='stylesheet' type='text/css' media='screen'></link>
     <link href='irregular.css'            rel='stylesheet' type='text/css' media='screen'></link>
     <link href='irregular.horizontal.css' rel='stylesheet' type='text/css' media='screen'></link>
     <link href='irregular.vertical.css'   rel='stylesheet' type='text/css' media='screen'></link>
+    <link href='irregular.packed.css'     rel='stylesheet' type='text/css' media='screen'></link>
     <link href='irregular.padded.css'     rel='stylesheet' type='text/css' media='screen'></link> 
     <link href='irregular.fixed.css'      rel='stylesheet' type='text/css' media='screen'></link>
     <link href='irregular.sassy.css'      rel='stylesheet' type='text/css' media='screen'></link> 
@@ -44,6 +46,13 @@
     <img src='s.gif' class='vertical_regular4'><br>
     <img src='s.gif' class='vertical_regular5'><br>
 
+    <h1>Regular (packed)</h1>
+    <img src='s.gif' class='packed_regular1'>
+    <img src='s.gif' class='packed_regular2'>
+    <img src='s.gif' class='packed_regular3'>
+    <img src='s.gif' class='packed_regular4'>
+    <img src='s.gif' class='packed_regular5'>
+
     <h1>Regular (padded)</h1>
     <img src='s.gif' class='padded_regular1'>
     <img src='s.gif' class='padded_regular2'>
@@ -86,6 +95,13 @@
     <img src='s.gif' class='vertical_irregular4'><br>
     <img src='s.gif' class='vertical_irregular5'><br>
 
+    <h1>Irregular (packed)</h1>
+    <img src='s.gif' class='packed_irregular1'>
+    <img src='s.gif' class='packed_irregular2'>
+    <img src='s.gif' class='packed_irregular3'>
+    <img src='s.gif' class='packed_irregular4'>
+    <img src='s.gif' class='packed_irregular5'>
+
     <h1>Irregular (padded)</h1>
     <img src='s.gif' class='padded_irregular1'>
     <img src='s.gif' class='padded_irregular2'>

data/test/images/reference/irregular.packed.css

@@ -0,0 +1,24 @@
+/*
+
+        Creating a sprite from following images:
+        
+        test/images/irregular/irregular1.png (60x60)
+        test/images/irregular/irregular3.png (48x48)
+        test/images/irregular/irregular5.png (46x25)
+        test/images/irregular/irregular4.png (34x14)
+        test/images/irregular/irregular2.png (16x16)
+
+        Output files:
+          test/images/irregular.packed.png
+          test/images/irregular.packed.css
+
+        Output size:
+          108x101
+
+
+*/
+img.packed_irregular1 { width: 60px; height: 60px; background: url(irregular.packed.png) 0px 0px no-repeat; }
+img.packed_irregular3 { width: 48px; height: 48px; background: url(irregular.packed.png) -60px 0px no-repeat; }
+img.packed_irregular5 { width: 46px; height: 25px; background: url(irregular.packed.png) 0px -60px no-repeat; }
+img.packed_irregular4 { width: 34px; height: 14px; background: url(irregular.packed.png) -46px -60px no-repeat; }
+img.packed_irregular2 { width: 16px; height: 16px; background: url(irregular.packed.png) 0px -85px no-repeat; }

data/test/images/reference/regular.packed.css

@@ -0,0 +1,24 @@
+/*
+
+        Creating a sprite from following images:
+        
+        test/images/regular/regular1.png (64x64)
+        test/images/regular/regular2.png (64x64)
+        test/images/regular/regular3.png (64x64)
+        test/images/regular/regular4.png (64x64)
+        test/images/regular/regular5.png (64x64)
+
+        Output files:
+          test/images/regular.packed.png
+          test/images/regular.packed.css
+
+        Output size:
+          192x128
+
+
+*/
+img.packed_regular1 { width: 64px; height: 64px; background: url(regular.packed.png) 0px 0px no-repeat; }
+img.packed_regular2 { width: 64px; height: 64px; background: url(regular.packed.png) -64px 0px no-repeat; }
+img.packed_regular3 { width: 64px; height: 64px; background: url(regular.packed.png) 0px -64px no-repeat; }
+img.packed_regular4 { width: 64px; height: 64px; background: url(regular.packed.png) -64px -64px no-repeat; }
+img.packed_regular5 { width: 64px; height: 64px; background: url(regular.packed.png) -128px 0px no-repeat; }

data/test/integration_test.rb

@@ -21,6 +21,12 @@ module SpriteFactory
                                      :layout   => :vertical)
     end
 
+    def test_generate_packed_regular_sprite
+      integration_test(REGULAR_PATH, :output   => output_path('regular.packed'),
+                                     :selector => 'img.packed_',
+                                     :layout   => :packed)
+    end
+
     def test_generate_regular_sprite_with_padding
       integration_test(REGULAR_PATH, :output   => output_path('regular.padded'),
                                      :selector => 'img.padded_',
@@ -58,6 +64,12 @@ module SpriteFactory
                                        :layout   => :vertical)
     end
 
+    def test_generate_packed_irregular_sprite
+      integration_test(IRREGULAR_PATH, :output   => output_path('irregular.packed'),
+                                       :selector => 'img.packed_',
+                                       :layout   => :packed)
+    end
+
     def test_generate_irregular_sprite_with_padding
       integration_test(IRREGULAR_PATH, :output   => output_path('irregular.padded'),
                                        :selector => 'img.padded_',

data/test/layout/horizontal_test.rb

@@ -0,0 +1,100 @@
+require File.expand_path('test_case', File.dirname(__FILE__))
+
+module SpriteFactory
+  module Layout
+    class HorizontalTest < SpriteFactory::Layout::TestCase
+
+      #==========================================================================
+      # test REGULAR images
+      #==========================================================================
+
+      def test_horizontal_layout_of_regular_images
+        images = get_regular_images
+        expected = [
+          { :x =>  0, :y => 0 },
+          { :x => 20, :y => 0 },
+          { :x => 40, :y => 0 },
+          { :x => 60, :y => 0 },
+          { :x => 80, :y => 0 }
+        ]
+        verify_layout(100, 10, expected, images, :layout => :horizontal)
+      end
+
+      #--------------------------------------------------------------------------
+
+      def test_padded_horizontal_layout_of_regular_images
+        images = get_regular_images
+        expected = [
+          { :cssx =>   0, :cssy => 0, :cssw => 40, :cssh => 50, :x =>  10, :y => 20 },
+          { :cssx =>  40, :cssy => 0, :cssw => 40, :cssh => 50, :x =>  50, :y => 20 },
+          { :cssx =>  80, :cssy => 0, :cssw => 40, :cssh => 50, :x =>  90, :y => 20 },
+          { :cssx => 120, :cssy => 0, :cssw => 40, :cssh => 50, :x => 130, :y => 20 },
+          { :cssx => 160, :cssy => 0, :cssw => 40, :cssh => 50, :x => 170, :y => 20 }
+        ]
+        verify_layout(200, 50, expected, images, :layout => :horizontal, :hpadding => 10, :vpadding => 20)
+      end
+
+      #--------------------------------------------------------------------------
+
+      def test_fixed_horizontal_layout_of_regular_images
+        images = get_regular_images
+        expected = [
+          { :cssx =>   0, :cssy => 0, :cssw => 50, :cssh => 50, :x =>  15, :y => 20 },
+          { :cssx =>  50, :cssy => 0, :cssw => 50, :cssh => 50, :x =>  65, :y => 20 },
+          { :cssx => 100, :cssy => 0, :cssw => 50, :cssh => 50, :x => 115, :y => 20 },
+          { :cssx => 150, :cssy => 0, :cssw => 50, :cssh => 50, :x => 165, :y => 20 },
+          { :cssx => 200, :cssy => 0, :cssw => 50, :cssh => 50, :x => 215, :y => 20 }
+        ]
+        verify_layout(250, 50, expected, images, :layout => :horizontal, :width => 50, :height => 50)
+      end
+
+      #==========================================================================
+      # test IRREGULAR images
+      #==========================================================================
+
+      def test_horizontal_layout_of_irregular_images
+        images = get_irregular_images
+        expected = [
+          { :x =>   0, :y =>  0 },
+          { :x =>  20, :y =>  5 },
+          { :x =>  60, :y => 10 },
+          { :x => 120, :y => 15 },
+          { :x => 200, :y => 20 }
+        ]
+        verify_layout(300, 50, expected, images, :layout => :horizontal)
+      end
+
+      #--------------------------------------------------------------------------
+
+      def test_padded_horizontal_layout_of_irregular_images
+        images = get_irregular_images
+        expected = [
+          { :cssx =>   0, :cssy =>  0, :cssw =>  40, :cssh => 90, :x =>  10, :y => 20 },
+          { :cssx =>  40, :cssy =>  5, :cssw =>  60, :cssh => 80, :x =>  50, :y => 25 },
+          { :cssx => 100, :cssy => 10, :cssw =>  80, :cssh => 70, :x => 110, :y => 30 },
+          { :cssx => 180, :cssy => 15, :cssw => 100, :cssh => 60, :x => 190, :y => 35 },
+          { :cssx => 280, :cssy => 20, :cssw => 120, :cssh => 50, :x => 290, :y => 40 }
+        ]
+        verify_layout(400, 90, expected, images, :layout => :horizontal, :hpadding => 10, :vpadding => 20)
+      end
+
+      #--------------------------------------------------------------------------
+
+      def test_fixed_horizontal_layout_of_irregular_images
+        images = get_irregular_images
+        expected = [
+          { :cssx =>   0, :cssy => 0, :cssw => 100, :cssh => 100, :x =>  40, :y => 25 },
+          { :cssx => 100, :cssy => 0, :cssw => 100, :cssh => 100, :x => 130, :y => 30 },
+          { :cssx => 200, :cssy => 0, :cssw => 100, :cssh => 100, :x => 220, :y => 35 },
+          { :cssx => 300, :cssy => 0, :cssw => 100, :cssh => 100, :x => 310, :y => 40 },
+          { :cssx => 400, :cssy => 0, :cssw => 100, :cssh => 100, :x => 400, :y => 45 }
+        ]
+        verify_layout(500, 100, expected, images, :layout => :horizontal, :width => 100, :height => 100)
+      end
+
+      #--------------------------------------------------------------------------
+
+    end # class HorizontalTest
+  end # module Layout
+end # module SpriteFactory
+

data/test/layout/packed_test.rb

@@ -0,0 +1,221 @@
+require File.expand_path('test_case', File.dirname(__FILE__))
+
+module SpriteFactory
+  module Layout
+    class PackedTest < SpriteFactory::Layout::TestCase
+
+    #==========================================================================
+    # test REGULAR images
+    #==========================================================================
+
+    def test_packed_layout_of_regular_images
+      images = get_regular_images
+      expected = [                    # expected:  ---------
+        { :x =>  0, :y =>  0 },       #            |111|333|
+        { :x =>  0, :y => 10 },       #            ---------
+        { :x => 20, :y =>  0 },       #            |222|444|
+        { :x => 20, :y => 10 },       #            ---------
+        { :x =>  0, :y => 20 }        #            |555|   |
+      ]                               #            ---------
+      verify_layout(40, 30, expected, images, :layout => :packed)
+    end
+
+    #--------------------------------------------------------------------------
+
+    def test_padded_packed_layout_of_regular_images
+      assert_not_implemented ":packed layout does not support the :padding option" do
+        Layout::Packed.layout(get_regular_images, :padding => 10)
+      end
+    end
+
+    #--------------------------------------------------------------------------
+
+    def test_fixed_packed_layout_of_regular_images
+      assert_not_implemented ":packed layout does not support fixed :width/:height option" do
+        Layout::Packed.layout(get_regular_images, :width => 50, :height => 50)
+      end
+    end 
+
+    #==========================================================================
+    # test IRREGULAR images
+    #==========================================================================
+
+    def test_packed_layout_of_irregular_images
+      images = get_irregular_images
+                                     # expected: -----------------
+      expected = [                   #           |11111111111|444|
+        { :x =>    0, :y =>  0 },    #           ------------|444|
+        { :x =>    0, :y => 10 },    #           |2222222|   |444|
+        { :x =>    0, :y => 30 },    #           ------------|444|
+        { :x =>  100, :y =>  0 },    #           |3333|      -----
+        { :x =>    0, :y => 60 }     #           -----------------
+      ]                              #           |555|           |
+                                     #           -----------------
+      verify_layout(120, 100, expected, images, :layout => :packed)
+    end
+
+    #==========================================================================
+    # other packed algorithm test
+    #==========================================================================
+
+    def test_single_image_is_100_percent_packed
+      images = [
+        { :width => 100, :height => 100 },
+        { :width => 100, :height =>  50 },
+        { :width =>  50, :height => 100 }
+      ]
+      images.each do |image|
+        verify_layout(image[:width], image[:height], [{:x => 0, :y => 0}], [image], :layout => :packed)
+      end
+    end
+
+    #==========================================================================
+    # some test cases from original bin packing demonstration
+    #   (see http://codeincomplete.com/posts/2011/5/7/bin_packing/example/)
+    #==========================================================================
+
+    def test_packed_simple
+      images = expanded_images([
+        { :width => 500, :height => 200             },
+        { :width => 250, :height => 200             },
+        { :width =>  50, :height =>  50, :num => 20 }
+      ])
+      expected = [
+        { :x => 0,   :y => 0   },
+        { :x => 0,   :y => 200 },
+        { :x => 250, :y => 200 },
+        { :x => 300, :y => 200 },
+        { :x => 350, :y => 200 },
+        { :x => 400, :y => 200 },
+        { :x => 450, :y => 200 },
+        { :x => 250, :y => 250 },
+        { :x => 300, :y => 250 },
+        { :x => 350, :y => 250 },
+        { :x => 400, :y => 250 },
+        { :x => 450, :y => 250 },
+        { :x => 250, :y => 300 },
+        { :x => 300, :y => 300 },
+        { :x => 350, :y => 300 },
+        { :x => 400, :y => 300 },
+        { :x => 450, :y => 300 },
+        { :x => 250, :y => 350 },
+        { :x => 300, :y => 350 },
+        { :x => 350, :y => 350 },
+        { :x => 400, :y => 350 },
+        { :x => 450, :y => 350 }
+      ]
+      verify_layout(500, 400, expected, images, :layout => :packed)
+    end
+
+    #--------------------------------------------------------------------------
+
+    def test_packed_square
+      images = expanded_images([{ :width => 50, :height => 50, :num => 16 }])
+      expected = [
+        { :x =>   0, :y =>   0 },
+        { :x =>  50, :y =>   0 },
+        { :x =>   0, :y =>  50 },
+        { :x =>  50, :y =>  50 },
+        { :x => 100, :y =>   0 },
+        { :x => 100, :y =>  50 },
+        { :x =>   0, :y => 100 },
+        { :x =>  50, :y => 100 },
+        { :x => 100, :y => 100 },
+        { :x => 150, :y =>   0 },
+        { :x => 150, :y =>  50 },
+        { :x => 150, :y => 100 },
+        { :x =>   0, :y => 150 },
+        { :x =>  50, :y => 150 },
+        { :x => 100, :y => 150 },
+        { :x => 150, :y => 150 }
+      ]
+      verify_layout(200, 200, expected, images, :layout => :packed)
+    end
+
+    #--------------------------------------------------------------------------
+
+    def test_packed_tall
+      images = expanded_images([{ :width => 50, :height => 500, :num => 5 }])
+      expected = [
+        { :x =>   0, :y => 0 },
+        { :x =>  50, :y => 0 },
+        { :x => 100, :y => 0 },
+        { :x => 150, :y => 0 },
+        { :x => 200, :y => 0 }
+      ]
+      verify_layout(250, 500, expected, images, :layout => :packed)
+    end
+
+    #--------------------------------------------------------------------------
+
+    def test_packed_wide
+      images = expanded_images([{ :width => 500, :height => 50, :num => 5 }])
+      expected = [
+        { :x => 0, :y =>   0 },
+        { :x => 0, :y =>  50 },
+        { :x => 0, :y => 100 },
+        { :x => 0, :y => 150 },
+        { :x => 0, :y => 200 }
+      ]
+      verify_layout(500, 250, expected, images, :layout => :packed)
+    end
+
+    #--------------------------------------------------------------------------
+
+    def test_packed_tall_and_wide
+      images = expanded_images([
+        { :width =>  50, :height => 500, :num => 3 },
+        { :width => 500, :height =>  50, :num => 3 }
+      ])
+      expected = [
+        { :x =>   0, :y =>   0 },
+        { :x =>  50, :y =>   0 },
+        { :x => 100, :y =>   0 },
+        { :x => 150, :y =>   0 },
+        { :x => 150, :y =>  50 },
+        { :x => 150, :y => 100 }
+      ]
+      verify_layout(650, 500, expected, images, :layout => :packed)
+    end
+
+    #--------------------------------------------------------------------------
+
+    def test_packed_powers_of_2
+      images = expanded_images([
+        { :width => 64, :height => 64, :num => 2 },
+        { :width => 32, :height => 32, :num => 4 },
+        { :width => 16, :height => 16, :num => 8 }
+      ])
+      expected = [
+        { :x =>   0, :y =>   0 },
+        { :x =>  64, :y =>   0 },
+        { :x =>   0, :y =>  64 },
+        { :x =>  32, :y =>  64 },
+        { :x =>  64, :y =>  64 },
+        { :x =>  96, :y =>  64 },
+        { :x =>   0, :y =>  96 },
+        { :x =>  16, :y =>  96 },
+        { :x =>  32, :y =>  96 },
+        { :x =>  48, :y =>  96 },
+        { :x =>  64, :y =>  96 },
+        { :x =>  80, :y =>  96 },
+        { :x =>  96, :y =>  96 },
+        { :x => 112, :y =>  96 }
+      ]
+      verify_layout(128, 112, expected, images, :layout => :packed)
+    end
+
+    #--------------------------------------------------------------------------
+
+    protected
+
+    def expanded_images(images)
+      result = images.map do |i|
+        (1..(i[:num] || 1)).map{{:width => i[:width], :height => i[:height]}}
+      end.flatten
+    end
+
+    end # class PackedTest
+  end # module Layout
+end # module SpriteFactory
+