[CS2] Templating Cookbook

This is an archive of recipes to solve common problems using the templating language in Component.Studio.

Referring to Images By Name

Instead of putting the URL of images into your dataset, it's way more flexible to refer to images by their name. So instead of putting " {{images.sword.url}}" into a column in your dataset, put just "sword". 

Then assuming you put that into a column called "weapon_image" you could reference it like this:

{{ images[row.weapon_image].url }}

Or if you have enabled the inline icon button on the image, then you could use it in an image tag like this:

<{{row.weapon_image}}/>

Odd Numbers of Enumerations

If you're using enumerations you might have noticed that the quantity field always gives you the same quantity for each enumeration. So if had standard playing card suits you were enumerating on, and you set the quantity to "3", and the enumerated field to "diamond, club" then you'd get 3 of each. But let's say you wanted 3 diamonds, and only 2 clubs. The good news is that you can still do it, you just can't do it with the quantity field. Instead you'd use the split() function as a helper.

Leave your quantity field at 1, and let's assume your enumeration field is called " suit". To each suit you'd add a dash and then a number. So in that field you would type:

diamond-1, diamond-2, diamond-3, club-1, club-2

This would result in 5 total enumerations, 3 diamonds and 2 clubs. 

Then whenever you wish to use the enumerated field, instead of typing:

{{row.suit}}

You'd type:

{{split(row.suit)}}

This will remove the dash and the number from the end. So instead of getting " diamond-1" or "diamond-2" out, you'd just get "diamond". 

Global Color Palette

In most game designs you'll have colors that you wish to use through-out your designs. The templating system can save you a lot of time if you set up those colors as game variables! Click on the Game icon in the toolbar.

Then add a variable for your specific shade and give it a color name.

Now you can use that color anywhere in the system like this:

{{ game.vars.red }}

And if you need to update the color shade, you only have to do it in one place.

You can take this a bit further and use it in a style that is also called red. 

And then you can easily apply that color to any text.

This is <red>red</red>.