@ -50,16 +50,17 @@ Squib is good for supporting any kind of layout you can think of, but it's also
* :doc:`/dsl/png` method, and all of its features like blending operators, alpha transparency, and masking
* :doc:`/dsl/png` method, and all of its features like blending operators, alpha transparency, and masking
* Layout files allow multiple icons for one data column (see :doc:`/layouts`)
* Layout files allow multiple icons for one data column (see :doc:`/layouts`)
* Layout files also have the ``extends`` feature that allows icons to inherit details from each other
* Layout files also have the ``extends`` feature that allows icons to inherit details from each other
* The ``range`` option on :doc:`/dsl/text`, :doc:`/dsl/svg`, and :doc:`/dsl/png` allows you to specify text and icons for any subset of your files
* The ``range`` option on :doc:`/dsl/text`, :doc:`/dsl/svg`, and :doc:`/dsl/png` allows you to specify text and icons for any subset of your cards
* The :doc:`/dsl/text` method allows for embedded icons.
* The :doc:`/dsl/text` method allows for embedded icons.
* Ruby provides neat ways of aggregating data with ``inject``, ``map``, and ``zip`` that supports iconography
* The :doc:`/dsl/text` method allows for Unicode characters (if the font supports it).
* Ruby provides neat ways of aggregating data with ``inject``, ``map``, and ``zip`` that gives you ultimate flexibility for specifying different icons for different cards.
Back to the Example: Drones vs. Humans
Back to the Example: Drones vs. Humans
--------------------------------------
--------------------------------------
Ok, let's go back to our running example, project ``arctic-lemming`` from Part 1. We created cards for playtesting, but we never put down the faction for each card. That's a good candidate for an icon.
Ok, let's go back to our running example, project ``arctic-lemming`` from Part 1. We created cards for playtesting, but we never put down the faction for each card. That's a good candidate for an icon.
Let's get some stock icons for this exercise. For this example, I went to http://game-icons.net. I set my foreground color to black, and background to white. I then downloaded "auto-repair.svg" and "backup.svg". I'm choosing not to rename the files so that I can find them again on the website if I need to. (If you want to know how to do this process DIRECTLY from Ruby, and not going to the website, check out my *other* Ruby gem called `game_icons <https://github.com/andymeneely/game_icons>`_ - it's tailor-made for Squib!)
Let's get some stock icons for this exercise. For this example, I went to http://game-icons.net. I set my foreground color to black, and background to white. I then downloaded "auto-repair.svg" and "backup.svg". I'm choosing not to rename the files so that I can find them again on the website if I need to. (If you want to know how to do this process DIRECTLY from Ruby, and not going to the website, check out my *other* Ruby gem called `game_icons <https://github.com/andymeneely/game_icons>`_ - it's tailor-made for Squib! We've got some documentation in :doc:`/guides/game_icons`
When we were brainstorming our game, we placed one category of icons in a single column ("faction"). Presumably, one would want the faction icon to be in the same place on every card, but a different icon depending on the card's faction. There are a couple of ways of accomplishing this in Squib. First, here some less-than-clean ways of doing it::
When we were brainstorming our game, we placed one category of icons in a single column ("faction"). Presumably, one would want the faction icon to be in the same place on every card, but a different icon depending on the card's faction. There are a couple of ways of accomplishing this in Squib. First, here some less-than-clean ways of doing it::
@ -137,31 +138,85 @@ The best way to preserve this design is to try to keep the Ruby code clean. As w
Ok, let's get back to this prototype.
Ok, let's get back to this prototype.
Icons for Some, But Not All, Cards
Illustration: One per Card
----------------------------------
--------------------------
..note::
The cards are starting to come together, but we have another thing to do now. When playtesting, you need a way of visually identifying the card immediately. Reading text takes an extra moment to identify the card - wouldn't it be nice if we had some sort of artwork, individualized to the card?
Of course, we're not going to commission an artist or do our own oil paintings just yet. Let's get some placeholder art in there. Back to GameIcons, we're going to use "ninja-mask.svg", "pirate-skull.svg", "shambling-zombie.svg", and "robot-golem.svg".
Method 1: Put the file name in data
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
The difference between our Faction icon and our Illustration icon is that the Illustration needs to be different for every card. We already have a convenient way to do something different on every card - our CSV file!
Here's how the CSV would look:
..raw:: html
<code data-gist-id="d2bb2eb028b27cf1dace"
data-gist-file="data_pt2_03.csv"></code>
to be written
In our layout file we can center it in the middle of the card, nice and big. And then the Ruby & YAML would look like this:
There are some drawbacks to Method 1. First, you're putting artwork graphics info inside your game data. This can be weird and unexpected for someone new to your code (i.e. that person being you when you put your project down for a few months). Second, when you're working on artwork you'll have to look up what the name of every file is in your CSV. (Even writing this tutorial, I forgot that "zombie" is called "shambling-zombie.svg" and had to look it up, distracting me from focusing on writing.)
---------------------
Methods 3: Use range
There's another way of doing this, and it's more Ruby-like because it follows the `Convention over Configuration <https://en.wikipedia.org/wiki/Convention_over_configuration>`_ philosophy. The idea is to be super consistent with your naming so that you don't have to *configure* that, say, "pirate" has an illustration "pirate-skull". The illustration should be literally the title of the card - converted to lowercase because that's the convention for files. That means it should just be called "pirate.svg", and Squib should know to "just put an SVG that is named after the title". Months later, when you want to edit the illustration for pirate, you will probably just open "pirate.svg".
One Column per Icon
To do this, you'll need to convert an array of Title strings from your CSV (``data['title']`` to an array of file names. Ruby's ``map`` was born for this.
-------------------
..note::
..note::
to be written
If you're new to Ruby, here's a quick primer. The ``map`` method gets run on every element of an array, and it lets you specify a *block* (either between curly braces for one line or between ``do`` and ``end`` for multiple lines). It then returns another Array of the same size, but with every value mapped using your block. So::
Andy Meneely
9 years ago