Andy Meneely
9 years ago
89 changed files with 1151 additions and 8 deletions
@ -0,0 +1,2 @@
|
||||
*.png |
||||
!card_00_expected.png |
||||
@ -0,0 +1,29 @@
|
||||
require 'squib' |
||||
|
||||
# Here's an example of being able to scale a font |
||||
# based on the length of individual string. |
||||
# Handy for making minor font scales to fill text boxes. |
||||
def autoscale(str_array) |
||||
str_array.map do | str | |
||||
case str.length |
||||
when 0..15 |
||||
32 |
||||
when 16..20 |
||||
18 |
||||
else |
||||
12 |
||||
end |
||||
end |
||||
end |
||||
|
||||
Squib::Deck.new(width: 300, height: 100, cards: 3) do |
||||
background color: :white |
||||
rect |
||||
title = ['Short & Big', |
||||
'Medium Length & Size', |
||||
'Super duper long string here, therefore a smaller font.'] |
||||
text str: title, font: 'Arial', font_size: autoscale(title), |
||||
x: 10, y:10, align: :center, width: 280, ellipsize: false, hint: :red |
||||
|
||||
save_sheet dir: '.', columns: 3 |
||||
end |
||||
|
After Width: | Height: | Size: 5.2 KiB |
@ -0,0 +1,5 @@
|
||||
# To configure for using SVG as our backend, we need to set this option |
||||
# This will create a series of SVG files that get updated with Squib command |
||||
backend: svg |
||||
# They are auto-saved with this background |
||||
prefix: backend_vectors_ |
||||
@ -0,0 +1,33 @@
|
||||
require 'squib' |
||||
|
||||
# Our SVGs are auto-saved after each step using the configuration parameters |
||||
Squib::Deck.new(cards: 2, config: '_backend-config.yml') do |
||||
|
||||
# These are all supported by the SVG backend |
||||
background color: :gray |
||||
text str: 'Hello, world!', y: 500, width: 825, font: 'Sans bold 72', align: :center |
||||
rect x: 38, y: 38, width: 750, height: 1050, x_radius: 38, y_radius: 38 |
||||
circle x: 100, y: 400, radius: 25 |
||||
triangle x1: 100, y1: 425, x2: 125, y2: 475, x3: 75, y3: 475 |
||||
line x1: 100, y1: 620, x2: 720, y2: 620, stroke_width: 15.0 |
||||
svg file: 'spanner.svg', x: 100, y: 75 |
||||
png file: 'shiny-purse.png', x: 250, y: 75 # raster can still be used too |
||||
png file: 'shiny-purse.png', x: 250, y: 250, mask: :red # still renders as raster |
||||
# We can still rasterize whenever we want |
||||
save_png prefix: 'backend_' |
||||
|
||||
# And our PDFs will be vectorized . |
||||
save_pdf file: 'backend_vectorized.pdf', gap: 5 |
||||
|
||||
# This one is a known issue. Masking an SVG onto an SVG backend is still buggy. |
||||
# svg file: 'glass-heart.svg', x: 100, y: 200, width: 100, height: 100, mask: :sangria |
||||
|
||||
# This one is, unfortunately, not possible with svg back ends |
||||
# Cairo lacks a perspective transform (currently), so we have to |
||||
# use a striping method, which assumes raster. Fortunately, Cairo |
||||
# has perspective transforms on its roadmap, |
||||
# so perhaps this can be done someday with all vectors. |
||||
# |
||||
# showcase file: 'showcase.png', fill_color: 'white' |
||||
|
||||
end |
||||
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
@ -0,0 +1,37 @@
|
||||
require 'squib' |
||||
|
||||
Squib::Deck.new(width: 825, height: 1125, cards: 1) do |
||||
background color: :white |
||||
|
||||
y = 0 |
||||
text color: '#f00', str: '3-hex', x: 50, y: y += 50 |
||||
text color: '#f00', str: '3-hex (alpha)', x: 50, y: y += 50 |
||||
text color: '#ff0000', str: '6-hex', x: 50, y: y += 50 |
||||
text color: '#ff000099', str: '8-hex(alpha)', x: 50, y: y += 50 |
||||
text color: '#ffff00000000', str: '12-hex', x: 50, y: y += 50 |
||||
text color: '#ffff000000009999', str: '12-hex (alpha)', x: 50, y: y += 50 |
||||
text color: :burnt_orange, str: 'Symbols of constants too', x: 50, y: y += 50 |
||||
text color: '(0,0)(400,0) blue@0.0 red@1.0', str: 'Linear gradients!', x: 50, y: y += 50 |
||||
text color: '(200,500,10)(200,500,100) blue@0.0 red@1.0', str: 'Radial gradients!', x: 50, y: y += 50 |
||||
# see gradients.rb sample for more on gradients |
||||
|
||||
save_png prefix: 'colors_' |
||||
end |
||||
|
||||
# This script generates a table of the built-in constants |
||||
Squib::Deck.new(width: 3000, height: 1500) do |
||||
colors = (Cairo::Color.constants - %i(HEX_RE Base RGB CMYK HSV X11)) |
||||
colors.sort_by! {|c| Cairo::Color.parse(c).to_s} |
||||
x, y, w, h = 0, 0, 300, 50 |
||||
colors.each_with_index do |color, i| |
||||
rect x: x, y: y, width: w, height: h, fill_color: color |
||||
text str: color.to_s, x: x + 5, y: y + 13, font: 'Sans Bold 16', |
||||
color: (Cairo::Color.parse(color).to_hsv.v > 0.9) ? '#000' : '#fff' |
||||
y += h |
||||
if y > @height |
||||
x += w |
||||
y = 0 |
||||
end |
||||
end |
||||
save_png prefix: 'color_constants_' |
||||
end |
||||
@ -0,0 +1,34 @@
|
||||
require 'squib' |
||||
|
||||
Squib::Deck.new do |
||||
# Just about anywhere Squib takes in a color it can also take in a gradient too |
||||
# The x-y coordinates on the card itself, |
||||
# and then color stops are defined between 0 and 1 |
||||
background color: '(0,0)(0,1125) #ccc@0.0 #111@1.0' |
||||
line stroke_color: '(0,0)(825,0) #111@1.0 #ccc@0.0', |
||||
x1: 0, y1: 600, x2: 825, y2: 600, |
||||
stroke_width: 15 |
||||
|
||||
# Radial gradients look like this |
||||
circle fill_color: '(425,400,2)(425,400,120) #ccc@0.0 #111@1.0', |
||||
x: 415, y: 415, radius: 100, stroke_color: '#0000' |
||||
triangle fill_color: '(650,400,2)(650,400,120) #ccc@0.0 #111@1.0', |
||||
stroke_color: '#0000', |
||||
x1: 650, y1: 360, |
||||
x2: 550, y2: 500, |
||||
x3: 750, y3: 500 |
||||
|
||||
# Gradients are also good for beveling effects: |
||||
rect fill_color: '(0,200)(0,600) #111@0.0 #ccc@1.0', |
||||
x: 30, y: 350, width: 150, height: 150, |
||||
radius: 15, stroke_color: '#0000' |
||||
rect fill_color: '(0,200)(0,600) #111@1.0 #ccc@0.0', |
||||
x: 40, y: 360, width: 130, height: 130, |
||||
radius: 15, stroke_color: '#0000' |
||||
|
||||
# Alpha transparency can be used too |
||||
text str: 'Hello, world!', x: 75, y: 700, font: 'Sans Bold 72', |
||||
color: '(0,0)(825,0) #000f@0.0 #0000@1.0' |
||||
|
||||
save_png prefix: 'gradient_' |
||||
end |
||||
|
After Width: | Height: | Size: 346 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 30 KiB |
@ -0,0 +1,33 @@
|
||||
require 'squib' |
||||
|
||||
Squib::Deck.new(cards: 2) do |
||||
background color: :white |
||||
|
||||
# Outputs a hash of arrays with the header names as keys |
||||
data = csv file: 'sample.csv' |
||||
text str: data['Type'], x: 250, y: 55, font: 'Arial 54' |
||||
text str: data['Level'], x: 65, y: 65, font: 'Arial 72' |
||||
|
||||
save format: :png, prefix: 'sample_csv_' |
||||
|
||||
# You can also specify the sheet, starting at 0 |
||||
data = xlsx file: 'sample.xlsx', sheet: 2 |
||||
end |
||||
|
||||
# CSV is also a Squib-module-level function, so this also works: |
||||
data = Squib.csv file: 'quantity_explosion.csv' # 2 rows... |
||||
num_cards = data['Name'].size # ...but 4 cards! |
||||
|
||||
Squib::Deck.new(cards: num_cards) do |
||||
background color: :white |
||||
rect # card border |
||||
text str: data['Name'], font: 'Arial 54' |
||||
save_sheet prefix: 'sample_csv_qty_', columns: 4 |
||||
end |
||||
|
||||
# Additionally, CSV supports inline data specifically |
||||
data = Squib.csv data: <<-EOCSV |
||||
Name,Cost |
||||
Knight,3 |
||||
Orc,1 |
||||
EOCSV |
||||
@ -0,0 +1,55 @@
|
||||
require 'squib' |
||||
|
||||
Squib::Deck.new(cards: 3) do |
||||
background color: :white |
||||
|
||||
# Reads the first sheet by default (sheet 0) |
||||
# Outputs a hash of arrays with the header names as keys |
||||
data = xlsx file: 'sample.xlsx' |
||||
|
||||
text str: data['Name'], x: 250, y: 55, font: 'Arial 54' |
||||
text str: data['Level'], x: 65, y: 65, font: 'Arial 72' |
||||
text str: data['Description'], x: 65, y: 600, font: 'Arial 36' |
||||
|
||||
save format: :png, prefix: 'sample_excel_' # save to individual pngs |
||||
end |
||||
|
||||
# xlsx is also a Squib-module-level function, so this also works: |
||||
data = Squib.xlsx file: 'explode_quantities.xlsx' # 2 rows... |
||||
num_cards = data['Name'].size # ...but 4 cards! |
||||
|
||||
Squib::Deck.new(cards: num_cards) do |
||||
background color: :white |
||||
rect # card border |
||||
text str: data['Name'], font: 'Arial 54' |
||||
save_sheet prefix: 'sample_xlsx_qty_', columns: 4 |
||||
end |
||||
|
||||
|
||||
# Here's another example, a bit more realistic. Here's what's going on: |
||||
# * We call xlsx from Squib directly - BEFORE Squib::Deck creation. This |
||||
# allows us to infer the number of cards based on the size of the "Name" |
||||
# field |
||||
# * We make use of quantity explosion. Fields named "Qty" or "Quantity" |
||||
# (any capitalization), or any other in the "qty_header" get expanded by the |
||||
# number given |
||||
# * We also make sure that trailing and leading whitespace is stripped |
||||
# from each value. This is the default behavior in Squib, but the options |
||||
# are here just to make sure. |
||||
|
||||
resource_data = Squib.xlsx(file: 'sample.xlsx', sheet: 2, strip: true) do |header, value| |
||||
case header |
||||
when 'Cost' |
||||
"$#{value}k" # e.g. "3" becomes "$3k" |
||||
else |
||||
value # always return the original value if you didn't do anything to it |
||||
end |
||||
end |
||||
|
||||
Squib::Deck.new(cards: resource_data['Name'].size) do |
||||
background color: :white |
||||
rect width: :deck, height: :deck |
||||
text str: resource_data['Name'], align: :center, width: :deck, hint: 'red' |
||||
text str: resource_data['Cost'], align: :right, width: :deck, hint: 'red' |
||||
save_sheet prefix: 'sample_excel_resources_' # save to a whole sheet |
||||
end |
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
|
After Width: | Height: | Size: 8.5 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 9.4 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 18 KiB |
@ -0,0 +1,7 @@
|
||||
*.png |
||||
!ball.png |
||||
!grit.png |
||||
!sprites.png |
||||
!with-alpha.png |
||||
!_images_00_expected.png |
||||
!shiny-purse.png |
||||
@ -0,0 +1,104 @@
|
||||
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 |
||||
|
After Width: | Height: | Size: 312 KiB |
@ -0,0 +1,99 @@
|
||||
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 |
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 9.9 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
@ -0,0 +1,9 @@
|
||||
require 'squib' |
||||
|
||||
Squib::Deck.new cards: 1 do |
||||
background color: 'pink' |
||||
rect |
||||
text str: 'Draw two cards.' |
||||
save_png prefix: 'part1_', dir: '.' |
||||
end |
||||
|
||||
@ -0,0 +1,15 @@
|
||||
require 'squib' |
||||
|
||||
Squib::Deck.new cards: 1 do |
||||
background color: '#252322' |
||||
rect fill_color: '#0B3736', |
||||
x: 38, y: 38, width: 750, height: 1050, radius: 38 |
||||
text str: 'Robot Golem', font: 'True Crimes, Sans 72', |
||||
align: :center, x: 75, width: :deck, color: '#DFDFE1', y: 90 |
||||
svg file: 'auto-repair.svg', x: 75, y: 75, width: 100, height: :scale |
||||
svg file: 'robot-golem.svg', x: 75, y: 300, width: 675, height: :scale |
||||
text str: 'Draw two cards', font: 'Serif 36', |
||||
align: :center, width: :deck, color: '#DFDFE1', y: 1000 |
||||
save_png prefix: 'part2_', dir: '.' |
||||
end |
||||
|
||||
@ -0,0 +1,12 @@
|
||||
require 'squib' |
||||
|
||||
Squib::Deck.new cards: 1, layout: 'part3_layout.yml' do |
||||
background color: '#252322' |
||||
rect layout: 'backdrop' |
||||
text str: 'Robot Golem', layout: 'title' |
||||
svg layout: 'drone' |
||||
svg file: 'robot-golem.svg', layout: 'art' |
||||
text str: 'Draw two cards.', layout: 'power' |
||||
save_png prefix: 'part3_', dir: '.' |
||||
end |
||||
|
||||
@ -0,0 +1,16 @@
|
||||
require 'squib' |
||||
|
||||
Squib::Deck.new cards: 2, layout: 'part3_layout.yml' do |
||||
background color: '#252322' |
||||
rect layout: 'backdrop' |
||||
text str: ['Robot Golem', 'Ninja'], |
||||
layout: 'title' |
||||
svg layout: ['drone', 'human'] |
||||
svg file: ['robot-golem.svg','ninja-mask.svg'], |
||||
layout: 'art' |
||||
text str: ['Draw two cards', |
||||
'Use the power of another player'], |
||||
layout: 'power' |
||||
save_png prefix: 'part4_', dir: '.' |
||||
end |
||||
|
||||
@ -0,0 +1,15 @@
|
||||
require 'squib' |
||||
|
||||
Squib::Deck.new cards: 4, layout: 'part3_layout.yml' do |
||||
background color: '#252322' |
||||
rect layout: 'backdrop' |
||||
data = xlsx file: 'data.xlsx' |
||||
text str: data['name'], layout: 'title' |
||||
svg layout: data['class'] |
||||
svg file: data['art'], layout: 'art' |
||||
text str: data['power'], layout: 'power' |
||||
save_png prefix: 'part5_', dir: '.' |
||||
hand file: 'part5_hand.png', dir: '.', trim_radius: 38 |
||||
showcase file: 'part5_showcase.png', dir: '.' |
||||
end |
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
|
After Width: | Height: | Size: 61 KiB |
|
After Width: | Height: | Size: 61 KiB |
@ -0,0 +1,34 @@
|
||||
backdrop: |
||||
fill_color: '#0B3736' |
||||
x: 38 |
||||
y: 38 |
||||
radius: 38 |
||||
width: 750 |
||||
height: 1050 |
||||
title: |
||||
font: 'True Crimes, Sans 72' |
||||
align: center |
||||
color: '#DFDFE1' |
||||
x: 75 |
||||
y: 90 |
||||
width: 825 |
||||
drone: |
||||
file: auto-repair.svg |
||||
x: 75 |
||||
y: 75 |
||||
width: 100 |
||||
height: 100 |
||||
human: |
||||
extends: drone |
||||
file: humans.svg |
||||
art: |
||||
x: 75 |
||||
y: 300 |
||||
width: 675 |
||||
height: 675 |
||||
power: |
||||
font: 'Serif 36' |
||||
align: center |
||||
width: 825 |
||||
color: '#DFDFE1' |
||||
y: 1000 |
||||
|
After Width: | Height: | Size: 61 KiB |
|
After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 52 KiB |
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 61 KiB |
|
After Width: | Height: | Size: 306 KiB |
|
After Width: | Height: | Size: 548 KiB |
@ -0,0 +1,54 @@
|
||||
require 'squib' |
||||
|
||||
Squib::Deck.new do |
||||
background color: :white |
||||
|
||||
grid x: 10, y: 10, width: 50, height: 50, stroke_color: '#0066FF', stroke_width: 1.5, angle: 0.1 |
||||
grid x: 10, y: 10, width: 200, height: 200, stroke_color: '#0066FF', stroke_width: 3, angle: 0.1 |
||||
|
||||
rect x: 305, y: 105, width: 200, height: 50, dash: '4 2' |
||||
|
||||
rect x: 300, y: 300, width: 400, height: 400, |
||||
fill_color: :blue, stroke_color: :red, stroke_width: 50.0, |
||||
join: 'bevel' |
||||
|
||||
rect x: 550, y: 105, width: 100, height: 100, |
||||
stroke_width: 5, stroke_color: :orange, angle: -0.2 |
||||
|
||||
ellipse x: 675, y: 105, width: 65, height: 100, |
||||
stroke_width: 5, stroke_color: :orange, angle: -0.2 |
||||
|
||||
circle x: 600, y: 600, radius: 75, |
||||
fill_color: :gray, stroke_color: :green, stroke_width: 8.0 |
||||
|
||||
triangle x1: 50, y1: 50, |
||||
x2: 150, y2: 150, |
||||
x3: 75, y3: 250, |
||||
fill_color: :gray, stroke_color: :green, stroke_width: 3.0 |
||||
|
||||
line x1: 50, y1: 550, |
||||
x2: 150, y2: 650, |
||||
stroke_width: 25.0 |
||||
|
||||
curve x1: 50, y1: 850, cx1: 150, cy1: 700, |
||||
x2: 625, y2: 900, cx2: 150, cy2: 700, |
||||
stroke_width: 12.0, stroke_color: :cyan, |
||||
fill_color: :burgundy, cap: 'round' |
||||
|
||||
ellipse x: 50, y: 925, width: 200, height: 100, |
||||
stroke_width: 5.0, stroke_color: :cyan, |
||||
fill_color: :burgundy |
||||
|
||||
star x: 300, y: 1000, n: 5, inner_radius: 15, outer_radius: 40, |
||||
fill_color: :cyan, stroke_color: :burgundy, stroke_width: 5 |
||||
|
||||
# default draw is fill-then-stroke. Can be changed to stroke-then-fill |
||||
star x: 375, y: 1000, n: 5, inner_radius: 15, outer_radius: 40, |
||||
fill_color: :cyan, stroke_color: :burgundy, |
||||
stroke_width: 5, stroke_strategy: :stroke_first |
||||
|
||||
polygon x: 500, y: 1000, n: 5, radius: 25, angle: Math::PI / 2, |
||||
fill_color: :cyan, stroke_color: :burgundy, stroke_width: 2 |
||||
|
||||
save_png prefix: 'shape_' |
||||
end |
||||
|
After Width: | Height: | Size: 39 KiB |
@ -0,0 +1,47 @@
|
||||
require 'squib' |
||||
require 'squib/sample_helpers' |
||||
|
||||
Squib::Deck.new(width: 1000, height: 1250) do |
||||
draw_graph_paper width, height |
||||
|
||||
sample 'Font strings are quite expressive. Specify family, modifiers, then size. Font names with spaces in them should end with a comma to help with parsing.' do |x, y| |
||||
text font: 'Arial bold italic 32', str: 'Bold and italic!', x: x, y: y - 50 |
||||
text font: 'Arial weight=300 32', str: 'Light bold!', x: x, y: y |
||||
text font: 'Times New Roman, 32', str: 'Times New Roman', x: x, y: y + 50 |
||||
text font: 'NoSuchFont,Arial 32', str: 'Arial Backup', x: x, y: y + 100 |
||||
end |
||||
|
||||
sample 'Specify width and height to see a text box. Also: set "hint" to see the extents of your text box' do |x, y| |
||||
text str: 'This has fixed width and height.', x: x, y: y, |
||||
hint: :red, width: 300, height: 100, font: 'Serif bold 24' |
||||
end |
||||
|
||||
sample 'If you specify the width only, the text will ellipsize.' do |x, y| |
||||
text str: 'The meaning of life is 42', x: x - 50, y: y, |
||||
hint: :red, width: 350, font: 'Serif bold 22' |
||||
end |
||||
|
||||
sample 'If you specify the width only, and turn off ellipsize, the height will auto-stretch.' do |x, y| |
||||
text str: 'This has fixed width, but not fixed height.', x: x, y: y, |
||||
hint: :red, width: 300, ellipsize: false, font: 'Serif bold 24' |
||||
end |
||||
|
||||
sample 'The text method returns the ink extents of each card\'s rendered text. So you can custom-fit a shape around it.' do |x, y| |
||||
['Auto fit!', 'Auto fit!!!!' ].each.with_index do |str, i| |
||||
text_y = y + i * 50 |
||||
extents = text str: str, x: x, y: text_y, font: 'Sans Bold 24' |
||||
|
||||
# Extents come back as an array of hashes, which can get split out like this |
||||
text_width = extents[0][:width] |
||||
text_height = extents[0][:height] |
||||
rect x: x, y: text_y, width: text_width, height: text_height, radius: 10, |
||||
stroke_color: :purple, stroke_width: 3 |
||||
end |
||||
end |
||||
|
||||
sample 'Text can be rotated about the upper-left corner of the text box. Unit is in radians.' do |x, y| |
||||
text str: 'Rotated', hint: :red, x: x, y: y, angle: Math::PI / 6 |
||||
end |
||||
|
||||
save_png prefix: '_text_', dir: '.' |
||||
end |
||||
|
After Width: | Height: | Size: 92 KiB |
Loading…
Reference in new issue