Image Tags Explained With Example On Sprites [Tutorial]
Posted: Sun Nov 05, 2017 3:42 am
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:
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:
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:
and would show it in game:
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:
So if we have:
in game, the game knows which image to show example. And afterwards, is we use:
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:
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.
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:
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:
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:
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.
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:
Or underscores:
Additionally, since words seperated by underscores are still treated as 'one' you can use:
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:
And you show:
then you cannot change with into
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:
and afterwards only the tag and changing attribute are enough:
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!
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"
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
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"
Code: Select all
show timmy
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"
Code: Select all
show timmy one
Code: Select all
show timmy two
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"
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
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
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
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
Code: Select all
hide timmy
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"
Code: Select all
image timmy_one happy = "timmy_one_happy.png"
image timmy_two happy = "timmy_two_happy.png"
Code: Select all
image timmy happy = "timmy_one_happy.png"
image timmy_two happy = "timmy_two_happy.png"
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"
Code: Select all
show timmy one happy
Code: Select all
show timmy two
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
Code: Select all
show hanna sad
If something is explained wrong, please feel free to correct me. Of course, if you have questions feel free to ask!