Using %s to generate Images for sprites and more
Posted: Wed Feb 28, 2018 12:42 am
This script is a little dated now. Renpy still knows how to do this, but instead of using %s you can simple use the variable within brackets. So for example if you use for an image you can write
Same principle, easier coding.
The original post from 2018
I wanted to share my own experience with using %s to create custom overlays and character creation. For those who don't know %s is used for formatting strings in python. It acts as a placeholder for a string, and their associated values are passed in via a tuple using the % operator.
This means you can do things like this in renpy.
When the image is displayed it will choose from your images folder the cg that matches the value. So it displays cg1.png when cg = 1. If cg = "date" it will look and display a file with the name "cgdate.png". Stick to numbers, because it can save you a lot of time coding.
Most of the time the images have specific names that you would have to write out each time and couldn't reuse the same lines of codes to display different items. With %s you can simply add or subtract the value to change the displayed image. You can even set it to equals to show whichever numbered CG you want.
So let's look at this for a calendar. You could easily code 12 months and 31 days with something like this;
In your Image folder you would have your twelve months and 31 days. You'd then only need to add or subtract to the variable to change the image. If it's February 1st then you'd change your variable in game to "$ month = 2" and "day = 1".
You could also use it to make a quick gallery with characters. You're not limited to just one %s. You can write them twice in a row and then define the variables in parentheses separated by spaces. Say you have 5 images for each character in your game. One quick way to show their images could be to write this;
Now instead of writing a thousand if then statement you have a simple way to display your images. You then can make buttons with SetVariable() to change the actively displayed picture on screen.
Let's say you can change your main character's appearance in your game. By defining the different types of changes you can make and using %s we can easily set up a custom character. To do this you'll need to know about LiveComposite(). Think of it as a program that layers. I'll only cover LiveComposite() and one face, but you can use this with a ConditionSwitch() to change expressions of the character within it.
To start you define the variables that can be changed in your character. For my character I decided that her skin, clothes, eyes, hair color, and hair style can be changed.
Next I take my layered file from my prefered photo editing software and save them individually using my naming scheme of name#. I have seven different eye colors, 5 hairstyles, 7 hair colors, 3 skin tones, and two outfits. (i.e. eyes1.png, hair_color1.png, hair_style1.png)
To set up the code you write the live composite placing everything in order.
So that's my LiveComposite and it will replace the %s with the appropriate value. If the image is missing or misspelled you will generate an error saying it can't find the file. So be careful when adding or subtracting the value.
So the reason that my "eyes" don't have a image tag on it is because I actually use a basic animation. I define an image like so:
You can use LiveComposite() by adding it to a screen, a image side, or image itself. To add it to a screen you simple write "add" in front of the LiveCompite() as if you were adding an image. To position you add it immediately afterwards or use an "at" transform to place it on your screen.
Here's a text snippet of how to make a random button that will change the display of your LiveComposite(). The first number in randinit is your first display and the second is the max number. I only have three skin tones so I set the second number to 3 and I start with 1 instead of 0.
Anyways, If you use it as a side image you can write it like this;
Otherwise it can be used as just an image too;
I hope this helps someone. You can find more information on character customization and other examples of how %s is used in these cookbook tutorials:
Messy character customization - Rinamaru (viewtopic.php?f=51&t=30878#p360602)
Rinamaru has a great working demo on different poses.
How To Doll in Renpy, with attributes, clothes, animation and blinking (viewtopic.php?f=51&t=45589)- CorruptedPants Show how to do some customization possible with ConditionSwitch and can be useful as well.
Also read up on LiveComposite() it through the documentation https://renpy.org/doc/html/displayables ... eComposite
Code: Select all
default bg = "room"
image setting = "backgrounds_[bg].png"
The original post from 2018
I wanted to share my own experience with using %s to create custom overlays and character creation. For those who don't know %s is used for formatting strings in python. It acts as a placeholder for a string, and their associated values are passed in via a tuple using the % operator.
This means you can do things like this in renpy.
Code: Select all
default cg = 1
image current_cg = "cg%s.png"%cg
Most of the time the images have specific names that you would have to write out each time and couldn't reuse the same lines of codes to display different items. With %s you can simply add or subtract the value to change the displayed image. You can even set it to equals to show whichever numbered CG you want.
So let's look at this for a calendar. You could easily code 12 months and 31 days with something like this;
Code: Select all
default month = 1
default day = 1
screen overlay:
frame:
hbox:
add "month%s.png"%month
add "day%s.png"%day
You could also use it to make a quick gallery with characters. You're not limited to just one %s. You can write them twice in a row and then define the variables in parentheses separated by spaces. Say you have 5 images for each character in your game. One quick way to show their images could be to write this;
Code: Select all
default character = "eileen"
default photo = 1
screen camera:
frame xalign 0.5 yalign 0.5:
add "%s%s.png"%(character, photo)
Let's say you can change your main character's appearance in your game. By defining the different types of changes you can make and using %s we can easily set up a custom character. To do this you'll need to know about LiveComposite(). Think of it as a program that layers. I'll only cover LiveComposite() and one face, but you can use this with a ConditionSwitch() to change expressions of the character within it.
To start you define the variables that can be changed in your character. For my character I decided that her skin, clothes, eyes, hair color, and hair style can be changed.
Code: Select all
default eye_color = 1
default hair_style = 1
default hair_color = 1
default skin = 2
default clothes = 1
To set up the code you write the live composite placing everything in order.
Code: Select all
LiveComposite(
(596,998), #Size of the original image
(0,0), "images/skin%s.png"%skin, #My skin is the first layer on the bottom (0,0) are the coordinate within (596, 996)
(0,0), "images/clothes%s.png"%clothes, #Clothes
(0,0), "eyes", #Is the name of a defined image that blinks
(0,0), "images/hair%s%s.png"%(hair_style, hair_color), #I saved my hair_style and color as one image. (i.e hair11.png)
(0,0), "images/face.png", #Using a static image for eyebrows and mouth
)
So the reason that my "eyes" don't have a image tag on it is because I actually use a basic animation. I define an image like so:
Code: Select all
image eyes:
"images/eyes%s.png"%eye_color # Tells renpy what image to display to reflect the eye color chosen
choice: #Randomly waits 4, 6, or 10 seconds
pause 6
choice:
pause 10
choice:
pause 4
"images/eyes_blink.png" # A common image of a blink
pause 0.1
"images/eyes_blink%s.png"%eye_color #And the color of the eyes blinking in half.
pause 0.1
repeat #I repeat the animation to get my eyes to blink
Here's a text snippet of how to make a random button that will change the display of your LiveComposite(). The first number in randinit is your first display and the second is the max number. I only have three skin tones so I set the second number to 3 and I start with 1 instead of 0.
Code: Select all
textbutton "Random" action [
SetVariable('skin', renpy.random.randint(1,3)),
SetVariable('clothes', renpy.random.randint(1,2)),
SetVariable('hair_color', renpy.random.randint(1,7)),
SetVariable('hair_style', renpy.random.randint(1,5)),
SetVariable('eye_color', renpy.random.randint(1,5))
]
Code: Select all
image side mc_face:
xalign 0.0 yalign 1.0 zoom 0.55 # Comment out your SideImage() xalign and yalign in the screens.rpy to place it with these instead.
LiveComposite(
(596,998),
(0,0), "images/skin%s.png"%skin,
(0,0), "images/clothes%s.png"%clothes,
(0,0), "eyes",
(0,0), "images/hair%s%s.png"%(hair_style, hair_color),
(0,0), "images/face.png",
)
Code: Select all
image eileen = LiveComposite(
(596,998),
(0,0), "images/skin%s.png"%skin,
(0,0), "images/clothes%s.png"%clothes,
(0,0), "eyes",
(0,0), "images/hair%s%s.png"%(hair_style, hair_color),
(0,0), "images/face.png",
)
Messy character customization - Rinamaru (viewtopic.php?f=51&t=30878#p360602)
Rinamaru has a great working demo on different poses.
How To Doll in Renpy, with attributes, clothes, animation and blinking (viewtopic.php?f=51&t=45589)- CorruptedPants Show how to do some customization possible with ConditionSwitch and can be useful as well.
Also read up on LiveComposite() it through the documentation https://renpy.org/doc/html/displayables ... eComposite