A simple wardrobe (and expression changer) using variable tags

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
+mike
Newbie
Posts: 7
Joined: Sat Oct 07, 2017 1:50 pm
Contact:

A simple wardrobe (and expression changer) using variable tags

#1 Post by +mike » Sat Nov 25, 2017 6:56 pm

I needed a simple wardrobe for my own project.
Something like a menu to instantly switch a character outfit.
The selected outfit should turn the new outfit from that point on.
At first it seemed to be easy but soon I realised it was quite difficult to achieve.
I searched and found many helpfull tutorials despite none of them fullfill my needs.
So I started to write my own script step by step and tested the result.
Now I share this script as it may be helpfull to some of you guys.

For my wardrobe I have one character (eileen) and two tags (mood and outfit).
For the mood I have three variables - happy, vhappy and concerned.
For the outfit I have three variables - blue, green and red.

In total I have 9 images of eileen as follow:
eileen happy blue.png
eileen happy green.png
eileen happy red.png
eileen vhappy blue.png
eileen vhappy green.png
eileen vhappy red.png
eileen concerned blue.png
eileen concerned green.png
eileen concerned red.png




First things first - RenPy scripting:

•as for now, you no longer need to declare images - just leave them in your Images folder
•for this to work you have to rename your images acording to the mood and outfit tags:
example: eileen happy blue.png -> this is the image of eileen happy in blue outfit
example: eileen vhappy red.png -> this is the image of eileen very happy in red outfit

•then to show up in the game you can call your images by their names as usual:
example: show eileen happy blue -> shows eileen happy in blue outfit
example: show eileen vhappy red -> shows eileen very happy in red outfit
example: show eileen green -> shows eileen very happy (mood did not change) in green outfit
example: show eileen concerned -> shows eileen concerned in green outfit (outfit did not change)

•I think you get it, right? That's the usual procedure, no big deal!
•also for this wardrobe to work you have to make use of variables (tags).
•the use of variables allows to set attributes to a given tag:
example: $ outfit = "blue" -> this sets the tag outfit to be blue
example: $ mood = "happy" -> this sets the tag mood to be happy



Next big thing - LiveComposite and ConditionSwitch are your friends:

There's too much talk about the use of LiveComposite and ConditionSwitch.
They seem to be a pain in the ass for most of us...
but not that much!
LiveComposite allows to instantly compose and update an image - that's what I need.
ConditionSwitch allows to select a choice (tag) depending on the condition rules.
Let's see how I used them in my script:

Code: Select all

image eileen:
    LiveComposite (
      (320,720),
      (0,0), ConditionSwitch (
          "store.mood == 'happy' and store.outfit == 'blue'", "eileen happy blue.png",
          "store.mood == 'happy' and store.outfit == 'green'", "eileen happy green.png",
          "store.mood == 'happy' and store.outfit == 'red'", "eileen happy red.png",
          "store.mood == 'vhappy' and store.outfit == 'blue'", "eileen vhappy blue.png",
          "store.mood == 'vhappy' and store.outfit == 'green'", "eileen vhappy green.png",
          "store.mood == 'vhappy' and store.outfit == 'red'", "eileen vhappy red.png",
          "store.mood == 'concerned' and store.outfit == 'blue'", "eileen concerned blue.png",
          "store.mood == 'concerned' and store.outfit == 'green'", "eileen concerned green.png",
          "store.mood == 'concerned' and store.outfit == 'red'", "eileen concerned red.png",
          "True", Null(),
          )
      )
Hummm! Quite self explanatory, right?
Anyway let me explain the script code:

image eileen: -> declare the name of the image (eileen)
LiveComposite ( -> this starts LiveComposite, of course
(320, 720), -> the size of image to display
(0,0), ConditionSwitch ( -> the origin of image and start of ConditionSwitch
"store.mood == 'happy' and store.outfit == 'blue'", "eileen happy blue.png", -> the rule to condition switch and the location of the image
- it means if $ mood = happy and $ outfit = blue then use the image eileen happy blue.png and the same for the other choices
"True", Null(), -> if something wrong, show nothing


•The code must be in your script.rpy file before the label start.
You also have to declare the initial state of variables (tags):

Code: Select all

$ mood = happy
$ outfit = blue
•Now if you type show eileen you get the image eileen happy blue.png on the screen.
•Next if you type $ mood = concerned it instantly change the image to eileen concerned blue.png
•Also if you type $ outfit = red it instantly change the image to eileen concerned red.png

•You can change the images by only changing the variable tags mood and outfit
•Of course you still can use the usual show eileen vhappy green to change the image, but if you next
type show eileen it will remember the variable tags and will change to the previous image.

•Pretty fancy HUH!

You may notice there's a lot of repeated code - store.mood, store.outfit, happy, blue, and so on...
It's a long code and doesn't seem nice.
Imagine if you have more tags and images, like showing eileen by side or being angry...
the amount of code would be huge!!!
To avoid this you can optimize the same code as follow:

Code: Select all

image eileen:
    LiveComposite (
      (320,720),
      (0,0), ConditionSwitch (
          "store.mood == '%s' %mood and store.outfit == '%s' %outfit", "eileen [mood] [outfit].png",
          "True", Null(),
          )
      )
WOW! The same effect with only a few lines of code!
Very clean and straight code.


Let me explain the new code:
store.mood == '%s' %mood' -> if variable mood has the content of whatever you chose then use that content
and -> the previous condition AND the next one (both have to be true)
store.outfit == '%s' %outfit -> also if variable outfit has the content of your choice then use that content
"eileen [mood] [outfit].png" -> if the rule is True then use image eileen with the content of mood and outfit tags
"True", Null -> if none of the rules are valid then do nothing (show nothing)

Now if you change the tag $ mood = "vhappy" the code will check the rule and change the image acording to the chosen tag (vhappy).
Also if you change the tag $ outfit = "green" the code will check and change the image acording to the chosen tag (green).



The last thing - what about the wardrobe?

For the wardrobe I use the following code:

Code: Select all

label wardrobe:
    $ mood = "happy"                # this forces mood to be happy
    show eileen                     # shows eileen happy with the previous chosen outfit
    menu:
        "Select your choice"
        "BLUE":
            $ outfit = "blue"       # instantly change to the blue outfit
            jump wardrobe           # a loop to stay in the wardrobe allows to make other choices
        "GREEN":
            $ outfit = "green"      # change to the green outfit
            jump wardrobe
        "RED":
            $ outfit = "red"        # change to the red outfit
            jump wardrobe
        "QUIT":
            jump start              # when you finish you can jump to whatever label you want
That's it!
Hope someone can find this code usefull.
• make it simple, it should work! •

User avatar
wyverngem
Miko-Class Veteran
Posts: 613
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:

Re: A simple wardrobe (and expression changer) using variable tags

#2 Post by wyverngem » Mon Dec 04, 2017 8:18 pm

Question, what would be the line if you didn't want to have an outfit or if you had more then two variables?

User avatar
+mike
Newbie
Posts: 7
Joined: Sat Oct 07, 2017 1:50 pm
Contact:

Re: A simple wardrobe (and expression changer) using variable tags

#3 Post by +mike » Fri Dec 08, 2017 7:34 am

-edit-

Have to think about it!
There's some issues I have to check...
• make it simple, it should work! •

Ishigreensa
Newbie
Posts: 17
Joined: Sun Jul 06, 2014 8:11 am
Contact:

Re: A simple wardrobe (and expression changer) using variable tags

#4 Post by Ishigreensa » Sat May 12, 2018 11:10 pm

First of all, There is a really simple way to do this without even using condition switch.

Start with init python:
indent- set all your variables to an example variable that actually exists in your folders or it won't work.

init python:
girl = "Anna"
clothing = "School skirt"
express = "happy"
hand = "normal side"

Then define your image:

init python:
girl = Anna
clothing = "school skirt"
etc

def draw_g(st,at):
indent return LiveComposite(
indent indent (size, size),
(0,0),("images/girls/%s"%girl + "clothing %s"%clothing + "mood %s"%express + "hand %s.png"%hand)
),.1

then initiate your image
init:
image girl1 = DynamicDisplayable(draw_g)

start:
show girl1
Then it should change almost instantly when call for the show girl1 anytime you change the variables just before showing her again.

example:
$ girl = "Bridget"
show girl1
Now, Anna won't be shown, but Bridget will.
$ clothing = "pajamas"
show girl1
Now Bridget will be wearing pajamas...
etc.

Post Reply

Who is online

Users browsing this forum: No registered users