Image Tags Explained With Example On Sprites [Tutorial]

A place for Ren'Py tutorials and reusable Ren'Py code.
Forum rules
Do not post questions here!

This forum is for example code you want to show other people. Ren'Py questions should be asked in the Ren'Py Questions and Announcements forum.
Post Reply
Message
Author
User avatar
mitoky
Veteran
Posts: 316
Joined: Sat Feb 07, 2015 9:12 pm
Projects: The Purring Demon's Love, circus eterie
Contact:

Image Tags Explained With Example On Sprites [Tutorial]

#1 Post by mitoky »

While bascially something simple, it can get very confusing to understand image tags for sprites, especially as beginner. Hence, i want to explain it in a “from beginner to beginner” way and give a few tips.

There are two methods to use images. One is to simply have them in the images folder and the other is to make an image statement.
I would advice to always use image statements since its easier to organize in the long run.

Also, image tags work the same way for bg's, cg's etc, i am only using sprites as an example in this tutorial!

Part 1
First of all, what is an image tag?
The tag is always the first word after ‘image’ in an image statement. Its basically a name you give to an image, same as giving a name to a person.

Hence, if we have:

Code: Select all

image timmy = "timmy.png"
then ‘timmy’ is our tag, or to say it with diffrent words, our name assignet to that file.

What does a tag do?
A tag has 2 functions.
The first function is that we can show images by their calling their ‘name’ , hence tag, in game.

So if we use:

Code: Select all

show timmy
in game, then the image with the tag ‘timmy’ is shown in game.

The second use of tag’s is to replace images of the same tag.

Imagine it as two people with the same name in a classroom. At the beginning the first student is tasked to read soemthing out loud and afterwards the second with the same name is supposed to do that, replacing him in the task.

And that’s were the problem lies with only using tag’s.
If we ‘were’ to have two images with the same tag:

Code: Select all

image timmy = "timmy_one.png"
image timmy = "timmy_two.png"
and would show it in game:

Code: Select all

show timmy
how would we know which ‘timmy’ is meant?
To say it in the example, how would we know which student with the name ‘timmy’ is the first and which the second?

Basically, we need something like a surname.
So what we need is called an attribute. An attribute is what comes after the tag, there can be one or many.

So instead of naming both with ‘timmy’ we do this instead:

Code: Select all

image timmy one = "timmy_one.png"
image timmy two = "timmy_two.png"
So if we have:

Code: Select all

show timmy one
in game, the game knows which image to show example. And afterwards, is we use:

Code: Select all

show timmy two
then the game recognizes the same tag, hence it knows that the image is being replaced. And due to the attribute it knows what is being replaced.

And that can be complicated more.

Let say we have a smiling and a sad version of both. Since we learned we can do more than one attribute, we do this:

Code: Select all

image timmy one happy = "timmy_one_happy.png"
image timmy one sad = "timmy_one_sad.png"
image timmy two happy= "timmy_two_happy.png"
image timmy two sad = "timmy_one_sad.png"
We simply add an attribute more for each. And now we learn one of important things we need for sprites.
What happens to the remaining attributes if only one changes?

When first showing an image we always need the full name. Hence the tag and all attributes as its our starting point.

Code: Select all

show timmy one happy
Now, we want to change only the expression, not which timmy we mean.
First, the tag is something which always needs to be used, since it replaces the image. So we definitely will always need the tag ‘timmy’.
However, for attributes the same thing doenst counts, for them, we only need the attribute which changes.

Summed up that means:
tag + changing attribute.

Hence we do:

Code: Select all

show timmy sad
Since the attribute "one" wasnt changed, it remains. Hence the image which is shown is ‘timmy one sad’

Afterwards, lets assume we want to change the timmy we mean, not the expression. Hence we do the same thing:

tag + changing attribute

So we use:

Code: Select all

show timmy two
And now ‘timmy two sad’ will appear, since ‘sad’ wasnt changed.

Now, we want to get back to the start, hence show ‘timmy one happy’, we need to do the same again, tag + changing attributes.
This time all attributes change, hence we need to use the tag and all attributes.

So we do:

Code: Select all

show timmy one happy
Since we are at the end of our explanation part, we hide all images with the hide statement. Here, only the tag is needed, automatically hiding whatever image under that tag is currently showing.

Code: Select all

hide timmy
And that concludes the explanation part!

Notes:
Goes without saying that i left the two names ‘timmy’ on purpose for tutorial’s sake, but of course there are other solutions too, like simply naming the tags diffrently:

By adding numbers:

Code: Select all

image timmy1 happy = "timmy_one_happy.png"
image timmy2 happy = "timmy_two_happy.png"
Or underscores:

Code: Select all

image timmy_one happy = "timmy_one_happy.png"
image timmy_two happy = "timmy_two_happy.png"
Additionally, since words seperated by underscores are still treated as 'one' you can use:

Code: Select all

image timmy happy = "timmy_one_happy.png"
image timmy_two happy = "timmy_two_happy.png"
The two timmy’s wouldnt clash, since in this case, ‘timmy_two’ is treated like one name/tag , hence using ‘timmy’ only is fine too.

Of course, you cant change the attributes into something which doenst exists.
Lets say you have:

Code: Select all

image timmy one sad = "timmy_one_sad.png"
image timmy one happy = "timmy_one_happy.png"
image timmy two sad = "timmy_two_sad.png"
And you show:

Code: Select all

show timmy one happy
then you cannot change with into

Code: Select all

show timmy two
since there is no existing 'timmy two happy' image.

Part 2
Now we get to our final part: example of a sprite.

Instead of using attributes to seperate two characters (since we can just change the tag as explained in above) we use them usually for the sprites expression, clothes, etc etc.

So lets do an example again.
We have an sprite, lets say, named hanna. Hanna has the following version for her sprites:

- A day and night version.
- 3 Poses
- 2 oufits, with one outfit having a varation (hat/no hat)
- expressions (happy, happy blush, sad)

The best is to always make an ‘order’, no real priority needed but i always start from the least to the most changing, since the images files are named that way too and its easier to sort.

So for the example, we set on the order:

image hanna time pose outfits_extra expression_detail

Some examples when filled out: [imagefile name left out since you can simply imagine the filename there (; ]

image hanna day one outfit1_nohat happy = "imagefile.png"
image hanna day one outfit1_nohat sad = "imagefile.png"
image hanna night two outfit2 happy_blush = "imagefile.png"
image hanna day three outfit1_hat happy_blush = "imagefile.png"
image hanna night one outfit2 sad = ”imagefile.png”

Of course, since this is just an example, there are more ways, like seperating outfits & extra and expression & detail from each other, like this:

image hanna time pose outfits extra expression detail
or however you want, it serves as an example only after all.

However, for it to work properly when completly seperatly, in case outfit has no 'extra' or an expression no 'detail', you need to use something else instead (like example: 'outfit1 normal' or 'outfit1 noextra'') since its treated as a seperate attribute.

If you have many expressions with, for example, blush, then it makes sense to make blush maybe a seperate attribute, otherwise simply make an underbar between the expression and blush and its treated as one (as explained above).

Anyways, let get back to our example.
Same as before, the rule is always:
When first showing always the whole name:

Code: Select all

show image hanna day one outfit1_nohat happy
and afterwards only the tag and changing attribute are enough:

Code: Select all

show hanna sad 
And that concludes the example.

If something is explained wrong, please feel free to correct me. Of course, if you have questions feel free to ask!

Post Reply

Who is online

Users browsing this forum: No registered users