Using %s to generate Images for sprites and more

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
wyverngem
Miko-Class Veteran
Posts: 615
Joined: Mon Oct 03, 2011 7:27 pm
Completed: Simple as Snow, Lady Luck's Due,
Projects: Aether Skies, Of the Waterfall
Tumblr: casting-dreams
itch: castingdreams
Location: USA
Contact:

Using %s to generate Images for sprites and more

#1 Post by wyverngem »

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

Code: Select all

default bg = "room"
image setting = "backgrounds_[bg].png"
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. :)

Code: Select all

default cg = 1
image current_cg = "cg%s.png"%cg
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;

Code: Select all

default month = 1
default day = 1

screen overlay:
    frame:
        hbox:
            add "month%s.png"%month
            add "day%s.png"%day
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;

Code: Select all

default character = "eileen"
default photo = 1
screen camera:
    frame xalign 0.5 yalign 0.5:
        add "%s%s.png"%(character, photo)
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.

Code: Select all

default eye_color = 1
default hair_style = 1
default hair_color = 1
default skin = 2
default clothes = 1
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.

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 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:

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
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.

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))
            ]
Anyways, If you use it as a side image you can write it like this;

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",
            )
Otherwise it can be used as just an image too;

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",
            )
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

Post Reply

Who is online

Users browsing this forum: No registered users