In-line Icons – The Indie Game Report (TIGR)


Final week, Fairway wrote a tutorial for Element.Studio that showed off the energy of layers, variables, and other components in generating the cards for Sneeze. This week, he’s hunting at one more energy: variables to build in-line icons.

In my game, Cards of Olympus, players gather “Tribute” and “Drachmas” and “Points.” Like a lot of styles, these are represented on cards by icons. The Tribute and Drachmas are spent to activate actions: blessings, quests, and “conversions.”  In every of these situations, the icons show up inside the text as properly. You can see this in different places, but specifically in the “Bless” and “Quest” action text of these cards:

This Element.Studio tutorial will take you by way of an efficient way to include things like these “icons” inside your design and style, but managed in a way that lets you rapidly make alterations and does not clutter your content material.

Uploading your icons ^

There’s a quantity of techniques to do this, but I’m going to use the native, Element.Studio file storage functionality.  Making use of the “Images &amp Icons” solution, I made a folder for my icons.

Inside there, I uploaded every of my icon pictures. Each and every icon is the identical image dimension. I utilised 100×100 pixels. As you will see under, Element.Studio will do some automatic resizing. Beginning with a bigger image also let me re-objective the icons for use on other components of the cards and in text headers.

Like in the earlier tutorial, we’re going to use the “copy URL to clipboard” button to get direct hyperlinks to the icons for use when generating our variables in the subsequent section.  So, you may well want to open one more tab and preserve this a single handy so you can very easily copy and paste.

Let’s make Icon Variables ^

In Element.Studio, you can build “Data Set Variables” that function convert a unique set of characters inside your “Data Set” into some other specified output.  If you are familiar with any other programming language, these are just truly easy “variables.” To use them, we very first have to build a information set.

Go to “Data Sets” at the best.  Then build a name and click the green “Create Element Information Set” button:

The very first time you build a information set, it’ll be mainly empty. For our objective, we’re going to build 3 various icon variables: D, T and V, for drachma, tribute and victory, respectively.

We’ll do “D” very first. To build a Information Set Variable, scroll to the bottom, form “D” in the name.

Subsequent, we want to form in the “value” of our new variable. The worth is going to be the unique “inline image” code and the URL to our drachma icon. The Element.Studio assist states that to add pictures inline with text you form: &lt|URL TO IMAGE Right here|&gt. Copying the URL from the icon folder, our “value” appears like this:


We can add this line to our variable and click the green “+” sign:

This offers us a “data set variable” of “{$D}” that we can use by way of out our information. We can repeat this identical procedure for “T” and “V” till all the variables are made:

Making use of our inline variables ^

For Cards of Olympus, I utilised the Google Sheets system I described in the earlier tutorial — for brevity, I’m not going to repeat the import measures. In my information set, two of the columns, Quest and Energy, make in depth use of the variables. I have bolded the variables in the screenshot under. The energy, right here, is that when these are at some point resolved in our design and style, the variables will be replaced with pictures.

You can use this in any fields that you will reference out of your information set. So, for instance, physique text, headers, and so forth.  The “data set” variables will not extend to the styles themselves only to the components of the styles that rely upon the information set.

To see what I imply, let’s build a design and style primarily based on our new information set.

Styles applying our Information Set ^

We’ll start out by generating a new design and style by clicking “Design” at the best and then naming the design and style, choosing a poker card, and applying our newly made information set:

On our blank card, we’ll add a “Text” box.  Inside the “Text” section, we’re going to reference a single of the columns that utilizes the inline variables “DemiGodQuest”:

As you can see, without the need of carrying out something else, the “Victory” icon is inserted inline with the rest of the text.  Altering the font and scaling the font will auto-scale the inline image as properly.

[Update: ] Altering the “size” of your inline pictures ^

A single other significantly less clear point that is worth thinking of: you can modify the “size” of your inline icons relative to the size of your typical text by applying the “Alternate” font functionality.

For instance, if we modify the above text to include things like *s about 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 bigger than the normal text.  This outcomes in the icon receiving larger:

Conclusion ^

The strategy of applying variables and inline pictures performs to build some pretty vivid outcomes:


Latest posts