Last week, Fairway wrote a tutorial for Component.Studio that showed off the power of layers, variables, and other elements in creating the cards for Sneeze. This week, he’s looking at another power: variables to create in-line icons.
In my game, Cards of Olympus, players collect “Tribute” and “Drachmas” and “Points.” Like many designs, these are represented on cards by icons. The Tribute and Drachmas are spent to activate actions: blessings, quests, and “conversions.” In each of these cases, the icons show up within the text as well. You can see this in various locations, but especially in the “Bless” and “Quest” action text of these cards:
This Component.Studio tutorial will take you through an effective way to include these “icons” within your design, but managed in a way that lets you quickly make changes and doesn’t clutter your content.
Uploading your icons ^
There’s a number of ways to do this, but I’m going to use the native, Component.Studio file storage functionality. Using the “Images & Icons” option, I created a folder for my icons.
Within there, I uploaded each of my icon images. Each icon is the same image dimension. I used 100×100 pixels. As you’ll see below, Component.Studio will do some automatic resizing. Starting with a larger image also let me re-purpose the icons for use on other parts of the cards and in text headers.
Like in the previous tutorial, we’re going to use the “copy URL to clipboard” button to get direct links to the icons for use when creating our variables in the next section. So, you might want to open another tab and keep this one handy so you can easily copy and paste.
Let’s make Icon Variables ^
In Component.Studio, you can create “Data Set Variables” that function convert a special set of characters within your “Data Set” into some other specified output. If you’re familiar with any other programming language, these are just really simple “variables.” To use them, we first have to create a data set.
Go to “Data Sets” at the top. Then create a name and click the green “Create Component Data Set” button:
The first time you create a data set, it’ll be mostly empty. For our purpose, we’re going to create three different icon variables: D, T and V, for drachma, tribute and victory, respectively.
We’ll do “D” first. To create a Data Set Variable, scroll to the bottom, type “D” in the name.
Next, we need to type in the “value” of our new variable. The value is going to be the special “inline image” code and the URL to our drachma icon. The Component.Studio help states that to add images inline with text you type: <|URL TO IMAGE HERE|>. Copying the URL from the icon folder, our “value” looks like this:
<|https://s3.amazonaws.com/files.component.studio/C19D99D6-CD18-11E9-9662/drachme.png|>
We can add this line to our variable and click the green “+” sign:
This gives us a “data set variable” of “{$D}” that we can use through out our data. We can repeat this same process for “T” and “V” until all the variables are created:
Using our inline variables ^
For Cards of Olympus, I used the Google Sheets method I described in the previous tutorial — for brevity, I’m not going to repeat the import steps. In my data set, two of the columns, Quest and Power, make extensive use of the variables. I have bolded the variables in the screenshot below. The power, here, is that when these are eventually resolved in our design, the variables will be replaced with images.
You can use this in any fields that you will reference out of your data set. So, for example, body text, headers, etc. The “data set” variables will not extend to the designs themselves only to the parts of the designs that rely upon the data set.
To see what I mean, let’s create a design based on our new data set.
Designs using our Data Set ^
We’ll start by creating a new design by clicking “Design” at the top and then naming the design, selecting a poker card, and using our newly created data set:
On our blank card, we’ll add a “Text” box. Within the “Text” section, we’re going to reference one of the columns that uses the inline variables “DemiGodQuest”:
As you can see, without doing anything else, the “Victory” icon is inserted inline with the rest of the text. Changing the font and scaling the font will auto-scale the inline image as well.
[Update: ] Changing the “size” of your inline images ^
One other less obvious point that is worth considering: you can change the “size” of your inline icons relative to the size of your regular text by using the “Alternate” font functionality.
For example, if we change the above text to include *s around the variable, we can separately adjust the size of the icon:
Then, in the Text section, we can set the Alternate Font to have a size larger than the standard text. This results in the icon getting bigger:
Conclusion ^
The technique of using variables and inline images works to create some very vivid results:
