Squib sample: images

.gitignore

*.png
!ball.png
!grit.png
!sprites.png
!with-alpha.png
!_images_00_expected.png
!shiny-purse.png

_images.rb

require 'squib'
require 'squib/sample_helpers'

Squib::Deck.new(width: 1000, height: 3000) do
  draw_graph_paper width, height

  sample "This a PNG.\nNo scaling is done by default." do |x, y|
    png file: 'angler-fish.png', x: x, y: y
  end

  sample 'PNGs can be upscaled, but they will emit an antialias warning (unless you turn it off in the config.yml)' do |x,y|
    png file: 'angler-fish.png', x: x, y: y, width: 150, height: 150
  end

  sample 'SVGs can be loaded from a file (left) or from straight XML (right). They can also be scaled to any size.' do |x,y|
    svg file: 'robot-golem.svg', x: x, y: y, width: 100, height: 100
    svg data: File.read('robot-golem.svg'), width: 100, height: 100,
        x: x + 200, y: y
  end

  sample 'PNG and SVG can be auto-scaled by one side and setting the other to :scale' do |x,y|
    svg file: 'robot-golem.svg', x: x,       y: y, width: 50,     height: :scale
    svg file: 'robot-golem.svg', x: x + 50,  y: y, width: :scale, height: 50

    png file: 'angler-fish.png', x: x + 200, y: y, width: 50,     height: :scale
    png file: 'angler-fish.png', x: x + 250, y: y, width: :scale, height: 50
  end

  sample 'PNGs can be cropped. To work from sprite sheets, you can set crop coordinates to PNG images. Rounded corners supported too.' do |x,y|
    png file: 'sprites.png', x: x - 50, y: y - 50          # entire sprite sheet
    rect x: x - 50, y: y - 50, width: 100, height: 100,    # draw the crop line
         radius: 15, dash: '3 3', stroke_color: 'red', stroke_width: 3
    text str: '➜', font: 'Sans Bold 36', x: x + 150, y: y - 35
    png file: 'sprites.png', x: x + 200, y: y - 50,        # just the robot golem image
        crop_x: 0, crop_y: 0, crop_corner_radius: 15,
        crop_width: 100, crop_height: 100

    png file: 'sprites.png', x: x - 50, y: y + 50     # entire sprite sheet again
    rect x: x + 14, y: y + 50, width: 65, height: 65, # highlight the crop
         radius: 25, dash: '3 3', stroke_color: 'red', stroke_width: 3
    text str: '➜', font: 'Sans Bold 36', x: x + 150, y: y + 50
    png file: 'sprites.png', x: x + 225, y: y + 50,   # just the drakkar ship image, rotated
        crop_x: 64, crop_y: 0, crop_corner_x_radius: 25, crop_corner_y_radius: 25,
        crop_width: 64, crop_height: 64, angle: Math::PI / 6
  end

  sample 'SVGs can be cropped too.' do |x,y|
    svg file: 'robot-golem.svg', x: x, y: y, width: 100, height: 100,
        crop_x: 40, crop_y: 0, crop_width: 50, crop_height: 50
  end

  sample 'Images can be flipped about their center.' do |x,y|
    png file: 'angler-fish.png', x: x, y: y, flip_vertical: true, flip_horizontal: true
    svg file: 'robot-golem.svg', x: x + 200, y: y, width: 100, height: 100,
        flip_horizontal: true
  end

  sample 'SVG can be limited to rendering to a single object if the SVG ID is set. If you look in this SVG file, the black backdrop has ID #backdrop.' do |x,y|
    svg file: 'robot-golem.svg', id: 'backdrop', x: x, y: y, width: 100, height: 100
  end

  sample "The SVG force_id option allows use of an ID only when specified, and render nothing if empty. Useful for multiple icons in one SVG file.\nThis should show nothing." do |x,y|
    svg file: 'robot-golem.svg', x: x, y: y,
        force_id: true, id: '' # <-- the important parts
  end

  sample 'NOTE! If you render a single object in an SVG, its placement is still relative to the SVG document.' do |x,y|
    svg file: 'offset.svg', x: x, y: y
    rect x: x, y: y, width: 100, height: 100, dash: '3 1', stroke_color: 'red', stroke_width: 3

    svg file: 'offset.svg', id: 'thing',  x: x + 200, y: y, width: 100, height: 100
    rect x: x + 200, y: y, width: 100, height: 100, dash: '3 1', stroke_color: 'red', stroke_width: 3
  end

  sample 'PNGs can be blended onto each other with 15 different blending operators. Alpha transparency supported too. See http://cairographics.org/operators' do |x,y|
    png file: 'ball.png', x: x,      y: y
    png file: 'grit.png', x: x + 20, y: y + 20, blend: :color_burn, alpha: 0.75
  end

  sample 'Rotation is around the upper-left corner of the image. Unit is radians.' do |x,y|
    rect x: x, y: y, width: 100, height: 100, stroke_width: 3, dash: '3 3', stroke_color: :red
    png  x: x,  y: y, width: 100, height: 100, angle: Math::PI / 4, file: 'angler-fish.png'

    rect x: x + 250, y: y, width: 100, height: 100, stroke_width: 3, dash: '3 3', stroke_color: :red
    svg  x: x + 250, y: y, width: 100, height: 100, file: 'robot-golem.svg',
        angle: Math::PI / 2 - 0.2
  end

  sample 'SVGs and PNGs can be used as masks for colors instead of being directly rendered.' do |x,y|
    svg mask: '#00ff00', file: 'glass-heart.svg', x: x - 50, y: y - 50, width: 200, height: 200
    svg mask: '(0,0)(500,0) #eee@0.0 #111@1.0', file: 'glass-heart.svg', x: x + 150, y: y - 50, width: 200, height: 200
  end

  sample 'PNG masks are based on the alpha channel. Gradient coordinates are relative to the card.' do |x,y|
    png file: 'with-alpha.png', x: x - 50, y: y
    png file: 'with-alpha.png', mask: :magenta, x: x + 50, y: y

    mask = "(#{x+150+75}, #{y+75}, 0)(#{x+150+75}, #{y+75}, 100) #f00@0.0 #000@1.0"
    png file: 'with-alpha.png', mask: mask, x: x + 150, y: y, width: 150, height: :scale
  end


  save_png prefix: '_images_', dir: '.'
end

_images_00_expected.png

_more_load_images.rb

require 'squib'

Squib::Deck.new(width: 825, height: 1125, cards: 1, config: 'load_images_config.yml') do
  background color: '#0b7c8e'
  rect x: 38, y: 38, width: 750, height: 1050, x_radius: 38, y_radius: 38

  png file: 'shiny-purse.png', x: 620, y: 75 # no scaling is done by default
  svg file: 'spanner.svg', x: 620, y: 218

  # Can be scaled if width and height are set
  svg file: 'spanner.svg', x: 50, y: 50, width: 250, height: 250
  png file: 'shiny-purse.png', x: 305, y: 50, width: 250, height: 250
  # ...but PNGs will warn if it's an upscale, unless you disable them in config.yml

  # Can be scaled using just width or height, if one of them is set to :scale
  svg file: 'spanner.svg', x: 200, y: 350, width: 35,     height: :scale
  svg file: 'spanner.svg', x: 200, y: 390, width: :scale, height: 35
  png file: 'shiny-purse.png', x: 240, y: 350, width: 35,     height: :scale
  png file: 'shiny-purse.png', x: 240, y: 390, width: :scale, height: 35

  # You can also crop the loaded images, so you can work from a sprite sheet
  png file: 'sprites.png', x: 300, y: 350  # entire sprite sheet
  png file: 'sprites.png', x: 300, y: 425, # just the robot golem image
      crop_x: 0, crop_y: 0, crop_corner_radius: 10,
      crop_width: 64, crop_height: 64
  png file: 'sprites.png', x: 400, y: 425, # just the drakkar ship image
      crop_x: 64, crop_y: 0, crop_corner_x_radius: 25, crop_corner_y_radius: 25,
      crop_width: 64, crop_height: 64
  png file: 'sprites.png', x: 500, y: 415, # just the drakkar ship image, rotated
      crop_x: 64, crop_y: 0, crop_corner_x_radius: 25, crop_corner_y_radius: 25,
      crop_width: 64, crop_height: 64, angle: Math::PI / 6

  # Cropping also works on SVGs too
  svg file: 'spanner.svg', x: 300, y: 500, width: 64, height: 64,
      crop_x: 32, crop_y: 32, crop_width: 32, crop_height:32

  # We can flip our images too
  png file: 'sprites.png', x: 300, y: 535, flip_vertical: true, flip_horizontal: true
  svg file: 'spanner.svg', x: 300, y: 615, width: 64, height: 64,
      flip_vertical: true, flip_horizontal: true

  # We can also limit our rendering to a single object, if the SVG ID is set
  svg file: 'spanner.svg', id: '#backdrop', x: 50, y: 350, width: 75, height: 75
  # Squib prepends a #-sign if one is not specified
  svg file: 'spanner.svg', id: 'backdrop', x: 50, y: 450, width: 125, height: 125

  # We can also load SVGs as a string of XML
  svg data: File.read('spanner.svg'), x: 50, y: 600, width: 75, height: 75

  # The svg data field works nicely with modifying the SVG XML on-the-fly.
  # To run this one, do `gem install game_icons` and uncomment the following
  #
  # require 'game_icons'
  # svg data: GameIcons.get('angler-fish').recolor(fg: '#ccc', bg: '#333').string,
  #     x: 150, y: 600, width: 75, height: 75
  #
  # More examples at https://github.com/andymeneely/game_icons
  # (or `gem install game_icons`) to get & manipulate art from game-icons.net
  # Nokogiri (already included in Squib) is also great for XML manipulation.

  # WARNING! If you choose to use the SVG ID, the x-y coordinates are still
  # relative to the SVG page. See this example in an SVG editor
  svg file: 'offset.svg', id: 'thing', x: 0, y: 0, width: 600, height: 600

  # Over 15 different blending operators are supported.
  # See http://cairographics.org/operators
  # Alpha transparency too
  png file: 'ball.png', x: 50, y: 700
  png file: 'grit.png', x: 70, y: 750, blend: :color_burn, alpha: 0.75

  # Images can be rotated around their upper-left corner
  png file: 'shiny-purse.png', x: 300, y: 700, angle: 0.0 # default (no rotate)
  png file: 'shiny-purse.png', x: 300, y: 800, angle: Math::PI / 4
  svg file: 'spanner.svg',     x: 300, y: 900, angle: Math::PI / 2 - 0.1

  # Images can also be used as masks instead of being directly painted.
  # This is particularly useful for switching directly over to black-and-white for printing
  # Or, if you want the same image to be used but with different colors/gradients
  svg mask: '#00ff00',
      file: 'glass-heart.svg',
      x: 500, y: 600, width: 200, height: 200
  svg mask: '(0,0)(0,500) #ccc@0.0 #333@1.0',
      file: 'glass-heart.svg',
      x: 500, y: 800, width: 200, height: 200

  # Masks are based on the alpha channel, so this is just a magenta square
  png mask: :magenta, file: 'shiny-purse.png',
      x: 650, y: 950

  # Note that this method does nothing, even though it would normally fill up
  # the card. force_id: true looks to the id field to be non-empty to render.
  # This is useful if you have multiple different icons in one SVG file,
  # but sometimes want to use none.
  # e.g. id: [:attack, :defend, nil]
  svg file: 'spanner.svg', width: :deck, height: :deck,
      force_id: true, id: '' # <-- the important part

  save prefix: 'load_images_', format: :png
end

angler-fish.png

ball.png

glass-heart.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   viewBox="0 0 512 512"
   id="svg2"
   version="1.1"
   inkscape:version="0.91 r13725"
   sodipodi:docname="glass-heart.svg">
  <metadata
     id="metadata22">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
     id="defs20" />
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="1920"
     inkscape:window-height="1018"
     id="namedview18"
     showgrid="false"
     inkscape:zoom="1.3037281"
     inkscape:cx="399.78879"
     inkscape:cy="267.43808"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     inkscape:current-layer="svg2" />
  <path
     style="fill:#000000;stroke:#000000;stroke-width:18.68857956;stroke-opacity:1;fill-opacity:1"
     d="M 371.24414 28.179688 C 329.86691 28.096623 287.41274 51.03218 261.00391 102.875 C 196.11155 -14.027671 24.628137 13.619783 29.029297 157.66016 C 33.157605 292.77111 183.5304 347.1093 261.00391 481.30078 C 338.40266 347.24199 496.61198 301.41271 492.29492 157.66016 C 489.89034 77.591144 431.71855 28.301089 371.24414 28.179688 z M 358.9082 49.480469 C 372.3905 49.61861 388.76091 53.818062 405.73047 62.265625 C 444.51802 81.57434 471.74936 115.76108 466.55273 138.62305 C 461.3561 161.48501 425.69966 164.36536 386.91211 145.05664 C 348.12455 125.74793 320.89517 91.56314 326.0918 68.701172 C 329.0149 55.841315 341.57382 49.302858 358.9082 49.480469 z M 148.91016 49.492188 C 159.88856 49.603754 173.21708 52.996781 187.03516 59.820312 C 218.61934 75.416956 240.79389 103.02923 236.5625 121.49609 C 232.3311 139.96294 203.29706 142.29 171.71289 126.69336 C 140.12871 111.09671 117.95416 83.482482 122.18555 65.015625 C 124.56571 54.628018 134.79506 49.348745 148.91016 49.492188 z M 263.11719 179.0332 C 373.07132 179.0332 462.20703 196.90249 462.20703 218.94727 C 462.20703 223.81036 457.86399 228.46946 449.92188 232.7793 C 411.40329 313.40731 320.36729 360.01624 263.00195 457.04297 C 206.07092 360.7538 119.55662 313.16333 78.189453 235.61133 C 84.123672 237.57886 90.694402 239.43942 97.783203 241.1875 C 76.471815 234.83175 64.027344 227.18135 64.027344 218.94727 C 64.027344 196.90249 153.16306 179.0332 263.11719 179.0332 z M 97.783203 241.1875 C 133.52789 251.84773 194.23275 258.86328 263.11719 258.86328 C 348.81534 258.86328 421.8618 248.00627 449.92188 232.7793 C 450.10835 232.38896 450.30232 232.00327 450.48633 231.61133 C 365.1295 267.11537 188.10527 263.46067 97.783203 241.1875 z "
     id="path10" />
</svg>

grit.png

offset.svg

robot-golem.svg

shiny-purse.png

spanner.svg

sprites.png

with-alpha.png