[tutorial] Dress up game

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.
Message
Author
User avatar
leon
Miko-Class Veteran
Posts: 554
Joined: Sun Oct 09, 2011 11:15 pm
Completed: Visual Novel Tycoon, Night at the Hospital, Time Labyrinth, The Buried Moon, Left of Center, Super Otome Quest
Projects: Lemon Project, Porcelain Heart, Dream's Dénouement
Organization: Team ANARKY
Contact:

[tutorial] Dress up game

#1 Post by leon » Tue Mar 27, 2012 6:05 am

Here is a code for a very simple dress up game. I hope someone can make use of it.

Download example with images included

Code: Select all

init python:
    dressup_show = False
    dressup_button_show = False
    hair, glasses, tie, vest, skirt = 1, 1, 1, 1, 1 # default dressup items
    hair_styles_num, glasses_styles_num, tie_styles_num, vest_styles_num, skirt_styles_num = 8, 3, 6, 3, 3 # number of styles (files) for each dressup item
    # define images as:
    # "base.png" for the base image
    # "hair1.png", "hair2.png", "hair3.png", ... - start with 1 and end with (hair_styles_num)
    # "glasses1.png", "glasses2.png", "glasses3.png", ... "tie1.png", "tie2.png", ... "vest1.png", "vest2.png", ... "skirt1.png", "skirt2.png", ...

    def draw_girl(st, at): # combine the dressup items into one displayable
        return LiveComposite(
            (257, 560), # image size
            (0, 0), "base.png",
            (0, 0), "hair%d.png"%hair, # (0, 0) is the position of each dressup item. Because these images are saved with spacing around them, we don't need to position them.
            (0, 0), "glasses%d.png"%glasses,
            (0, 0), "tie%d.png"%tie,
            (0, 0), "vest%d.png"%vest,
            (0, 0), "skirt%d.png"%skirt
            ),.1

    def draw_girl_side(st, at): # same thing as above, just scaled and positioned for the sideimage; there's probably more elegant solution than this...
        return LiveComposite(
            (257, 560),
            (10, 400), im.FactorScale("base.png", .45, .45),
            (10, 400), im.FactorScale("hair%d.png"%hair, .45, .45),
            (10, 400), im.FactorScale("glasses%d.png"%glasses, .45, .45),
            (10, 400), im.FactorScale("tie%d.png"%tie, .45, .45),
            (10, 400), im.FactorScale("vest%d.png"%vest, .45, .45),
            (10, 400), im.FactorScale("skirt%d.png"%skirt, .45, .45)
            ),.1

init:
    image girl = DynamicDisplayable(draw_girl) # using DynamicDisplayable ensures that any changes are visible immedietly
    $ girl = Character('Girl', color="#c8ffc8", window_left_padding=120, show_side_image=DynamicDisplayable(draw_girl_side))
    
screen dressup_button: # a button to call the dressup game
    if dressup_button_show and not dressup_show:
        vbox xalign 0.01 yalign 0.01:
            textbutton "Change look." action SetVariable("dressup_show", True)

screen dressup:
  if dressup_show:
    add "girl" xalign 0 yalign 0 xpos 60
    python:
        # set all the values to change styles to previous / next version:
        hair_n = hair + 1 # if next hair is chosen
        hair_p = hair - 1 # if previous hair is chosen
        if hair_p < 1: # making sure we don't get out of index range (index 0 is not allowed)
            hair_p = hair_styles_num
        if hair_n > hair_styles_num: # making sure we don't get out of index range (index musn't be bigger than hair_styles_num)
            hair_n = 1

        glasses_n = glasses + 1
        glasses_p = glasses - 1
        if glasses_p < 1:
            glasses_p = glasses_styles_num
        if glasses_n > glasses_styles_num:
            glasses_n = 1

        tie_n = tie + 1
        tie_p = tie - 1
        if tie_p < 1:
            tie_p = tie_styles_num
        if tie_n > tie_styles_num:
            tie_n = 1

        vest_n = vest + 1
        vest_p = vest - 1
        if vest_p < 1:
            vest_p = vest_styles_num
        if vest_n > vest_styles_num:
            vest_n = 1

        skirt_n = skirt + 1
        skirt_p = skirt - 1
        if skirt_p < 1:
            skirt_p = skirt_styles_num
        if skirt_n > skirt_styles_num:
            skirt_n = 1
            
        # display the arrows for changing the dress (we could also use one imagemap, instead of a bunch of imagebuttons):
        y = 50
        ui.imagebutton("arrowL.png", "arrowL.png", clicked=SetVariable("hair", hair_p), ypos=y, xpos=50)
        ui.imagebutton("arrowR.png", "arrowR.png", clicked=SetVariable("hair", hair_n), ypos=y, xpos=250)
        y += 80
        ui.imagebutton("arrowL.png", "arrowL.png", clicked=SetVariable("glasses", glasses_p), ypos=y, xpos=50)
        ui.imagebutton("arrowR.png", "arrowR.png", clicked=SetVariable("glasses", glasses_n), ypos=y, xpos=250)
        y += 80
        ui.imagebutton("arrowL.png", "arrowL.png", clicked=SetVariable("tie", tie_p), ypos=y, xpos=50)
        ui.imagebutton("arrowR.png", "arrowR.png", clicked=SetVariable("tie", tie_n), ypos=y, xpos=250)
        y += 80
        ui.imagebutton("arrowL.png", "arrowL.png", clicked=SetVariable("vest", vest_p), ypos=y, xpos=50)
        ui.imagebutton("arrowR.png", "arrowR.png", clicked=SetVariable("vest", vest_n), ypos=y, xpos=250)
        y += 80
        ui.imagebutton("arrowL.png", "arrowL.png", clicked=SetVariable("skirt", skirt_p), ypos=y, xpos=50)
        ui.imagebutton("arrowR.png", "arrowR.png", clicked=SetVariable("skirt", skirt_n), ypos=y, xpos=250)
        ui.textbutton("Return", clicked=SetVariable("dressup_show", False))

label start:
   show screen dressup_button
   show screen dressup
   $ dressup_button_show = True
   $ dressup_show = False

label cont:
    girl "La, la, la!"
    girl "La, la, la."    
    jump cont
return
Last edited by leon on Sun Jun 02, 2013 11:26 am, edited 2 times in total.

User avatar
Camille
Eileen-Class Veteran
Posts: 1227
Joined: Sat Apr 23, 2011 2:43 pm
Completed: Please see http://trash.moe
Projects: the head well lost
Organization: L3
Tumblr: narihira
Deviantart: crownwaltz
itch: lore
Contact:

Re: [tutorial] Dress up game

#2 Post by Camille » Tue Mar 27, 2012 3:03 pm

Ooh this is awesome and potentially very useful. Thanks for taking the time to share this with everyone!

CheeryMoya
Miko-Class Veteran
Posts: 892
Joined: Sun Jan 01, 2012 4:09 am

Re: [tutorial] Dress up game

#3 Post by CheeryMoya » Wed Mar 28, 2012 7:31 pm

Wow, I asked you to make this 2 days ago, and you certainly delivered :D You're awesome leon, did you know that? Hopefully others can use this code to make more interesting games too.

But quick question: will the options that are chosen be saved so that they'll show on a sideimage during dialogue?

User avatar
leon
Miko-Class Veteran
Posts: 554
Joined: Sun Oct 09, 2011 11:15 pm
Completed: Visual Novel Tycoon, Night at the Hospital, Time Labyrinth, The Buried Moon, Left of Center, Super Otome Quest
Projects: Lemon Project, Porcelain Heart, Dream's Dénouement
Organization: Team ANARKY
Contact:

Re: [tutorial] Dress up game

#4 Post by leon » Thu Mar 29, 2012 3:50 am

Thank you both of you. I hope to see more dress up mini-games in the future. :)

Yes, the options stay stored. The sideimage will automatically show the latest dressup selection, even if you change clothes during conversation.

shuen
Regular
Posts: 72
Joined: Tue Mar 22, 2011 2:36 pm
Contact:

Re: [tutorial] Dress up game

#5 Post by shuen » Thu Mar 29, 2012 11:20 am

It is a very useful tutorial, ThX for sharing!
I think you should put it in Cookbook^_^
Image
.Traditional Chinese Site.
~Illustrator+Graphic/Web Designer~

User avatar
leon
Miko-Class Veteran
Posts: 554
Joined: Sun Oct 09, 2011 11:15 pm
Completed: Visual Novel Tycoon, Night at the Hospital, Time Labyrinth, The Buried Moon, Left of Center, Super Otome Quest
Projects: Lemon Project, Porcelain Heart, Dream's Dénouement
Organization: Team ANARKY
Contact:

Re: [tutorial] Dress up game

#6 Post by leon » Fri Mar 30, 2012 3:19 pm

Thanks shuen. I think I'll wait a little bit before requesting access to the Cookbook, in case someone finds any bugs.

User avatar
OokamiKasumi
Eileen-Class Veteran
Posts: 1777
Joined: Thu Oct 14, 2010 3:53 am
Completed: 14 games released -- and Counting.
Organization: DarkErotica Games
Deviantart: OokamiKasumi
Location: NC, USA
Contact:

Re: [tutorial] Dress up game

#7 Post by OokamiKasumi » Mon Jul 30, 2012 2:32 pm

This really needs to go into the Renpy Cookbook part of the Forum.
Ookami Kasumi ~ Purveyor of fine Smut.
Most recent Games Completed: For ALL my completed games visit: DarkErotica Games

"No amount of great animation will save a bad story." -- John Lasseter of Pixar

User avatar
Starshine
Veteran
Posts: 247
Joined: Mon Jan 30, 2012 7:50 am
Completed: http://berry-melon.blogspot.co.uk/2016/ ... -2016.html
Projects: Pancake Surprise (2016)
Tumblr: http://bettybooplover.tumblr.com
Deviantart: berry-melon
Soundcloud: sweepea-1
Contact:

Re: [tutorial] Dress up game

#8 Post by Starshine » Mon Jul 30, 2012 6:12 pm

I just simply love dress up games this is awesome <3
http://berry-melon.blogspot.com
I'm not resting until I find
What would make your eyes
Glisten like mine
With loves divine!

Boo-Boo I couldn't aspire....to anything...
Higher...than to fill that one desire to make it
My own....Bop-Bop-a-Dop-Boop-Oop-a-Doop honey?

User avatar
Kuroneko_rg
Veteran
Posts: 294
Joined: Sat Oct 22, 2011 8:39 pm
Projects: Dark Pleasures, Kiss of Blood, Midnight Park
Organization: Black Cat Alleyway
Location: Yomi
Contact:

Re: [tutorial] Dress up game

#9 Post by Kuroneko_rg » Mon Jul 30, 2012 10:51 pm

It really seems like a fun thing to make. I'll give it a try if I manage to get some free time.

Thank you for sharing this.

User avatar
PyTom
Ren'Py Creator
Posts: 15468
Joined: Mon Feb 02, 2004 10:58 am
Completed: Moonlight Walks
Projects: Ren'Py
IRC Nick: renpytom
Github: renpytom
itch: renpytom
Location: Kings Park, NY
Contact:

Re: [tutorial] Dress up game

#10 Post by PyTom » Mon Jul 30, 2012 11:00 pm

Someone requested that this be put in the cookbook. I'm all for it, but I'll wait for leon to request it before making the move.
Supporting creators since 2004
(When was the last time you backed up your game?)
"Do good work." - Virgil Ivan "Gus" Grissom
"Silly and fun things are important." - Elon Musk
Software > Drama • https://www.patreon.com/renpytom

User avatar
leon
Miko-Class Veteran
Posts: 554
Joined: Sun Oct 09, 2011 11:15 pm
Completed: Visual Novel Tycoon, Night at the Hospital, Time Labyrinth, The Buried Moon, Left of Center, Super Otome Quest
Projects: Lemon Project, Porcelain Heart, Dream's Dénouement
Organization: Team ANARKY
Contact:

Re: [tutorial] Dress up game

#11 Post by leon » Wed Aug 01, 2012 9:48 am

@PyTom: Go ahead.

I also attached a working sample with images included.
Attachments
Dressup.rar
Sample code with images.
(886.84 KiB) Downloaded 4471 times

User avatar
TrickWithAKnife
Eileen-Class Veteran
Posts: 1261
Joined: Fri Mar 16, 2012 11:38 am
Projects: Rika
Organization: Solo (for now)
IRC Nick: Trick
Location: Tokyo, Japan
Contact:

Re: [tutorial] Dress up game

#12 Post by TrickWithAKnife » Wed Oct 03, 2012 12:39 pm

This is genius.

Is there a way to incorporate IM.flip so all the images can easily be flipped at the same time?
"We must teach them through the tools with which they are comfortable."
The #renpy IRC channel is a great place to chat with other devs. Due to the nature of IRC and timezone differences, people probably won't reply right away.

If you'd like to view or use any code from my VN PM me. All code is freely available without restriction, but also without warranty or (much) support.

User avatar
leon
Miko-Class Veteran
Posts: 554
Joined: Sun Oct 09, 2011 11:15 pm
Completed: Visual Novel Tycoon, Night at the Hospital, Time Labyrinth, The Buried Moon, Left of Center, Super Otome Quest
Projects: Lemon Project, Porcelain Heart, Dream's Dénouement
Organization: Team ANARKY
Contact:

Re: [tutorial] Dress up game

#13 Post by leon » Thu Oct 04, 2012 11:08 am

TrickWithAKnife wrote:This is genius.

Is there a way to incorporate IM.flip so all the images can easily be flipped at the same time?
Do you mean flip the character or individual dressup items? To flip the character, you could just flip all the images like this:

Code: Select all

    def draw_char(st, at):
        return LiveComposite(
            (257, 560),
            (0, 0), im.Flip("base.png",horizontal=True), 
            (0, 0), im.Flip("glasses%d.png"%glasses,horizontal=True), 
            (0, 0), im.Flip("hair%d.png"%hair,horizontal=True),
            (0, 0), im.Flip("shirt%d.png"%shirt,horizontal=True),
            (0, 0), im.Flip("tie%d.png"%tie,horizontal=True),
            (0, 0), im.Flip("pants%d.png"%pants,horizontal=True)
            ),.1

User avatar
TrickWithAKnife
Eileen-Class Veteran
Posts: 1261
Joined: Fri Mar 16, 2012 11:38 am
Projects: Rika
Organization: Solo (for now)
IRC Nick: Trick
Location: Tokyo, Japan
Contact:

Re: [tutorial] Dress up game

#14 Post by TrickWithAKnife » Sun Oct 07, 2012 6:57 am

Thanks. I modified that code a little, and thought I might show you what I've done.

Code: Select all

    def draw_girl(st, at): # combine the dressup items into one displayable
        return LiveComposite(
            (349, 700), # image size
            (0, 0), ConditionSwitch(
                "direction == 'left'", "base.png",
                "direction == 'right'", im.Flip("base.png", horizontal=True)),

            (0, 0), ConditionSwitch(
                "direction == 'left'", "hair%d.png"%hair,
                "direction == 'right'", im.Flip("hair%d.png"%hair, horizontal=True)),

            (0, 0), ConditionSwitch(
                "direction == 'left'", "pants%d.png"%pants,
                "direction == 'right'", im.Flip("pants%d.png"%pants, horizontal=True)),

            (0, 0), ConditionSwitch(
                "direction == 'left'", "tshirt%d.png"%tshirt,
                "direction == 'right'", im.Flip("tshirt%d.png"%tshirt, horizontal=True)),

            (0, 0), ConditionSwitch(
                "direction == 'left'", "jacket%d.png"%jacket,
                "direction == 'right'", im.Flip("jacket%d.png"%jacket, horizontal=True)),

            (0, 0), ConditionSwitch(
                "direction == 'left'", "scarf%d.png"%scarf,
                "direction == 'right'", im.Flip("scarf%d.png"%scarf, horizontal=True)),

            ),.1
The only difference to what you posted above is that the direction is changed through a variable called direction.
This means the direction can be set at any point, and all images will face that direction until the variable is changed again.
"We must teach them through the tools with which they are comfortable."
The #renpy IRC channel is a great place to chat with other devs. Due to the nature of IRC and timezone differences, people probably won't reply right away.

If you'd like to view or use any code from my VN PM me. All code is freely available without restriction, but also without warranty or (much) support.

User avatar
Arowana
Miko-Class Veteran
Posts: 531
Joined: Thu May 31, 2012 11:17 pm
Completed: a2 ~a due~
Projects: AXIOM.01, The Pirate Mermaid
Organization: Variable X, Navigame
Tumblr: navigame-media
itch: navigame
Contact:

Re: [tutorial] Dress up game

#15 Post by Arowana » Sun Oct 07, 2012 8:27 pm

(Migrating here from TrickWithAKnife's previous cookbook thread, since it's been marked for deletion)

I still think that using "xzoom -1.0" may be more efficient than writing a separate ConditionSwitch/im.Flip statement for each layer. This is especially true if you have a lot of layers (I think have upwards of 40 layers on my MC sprite, for instance - imagine how much of a pain writing 40 im.Flip statements would be!).

Taking the code in the previous post as an example. First, you can write the draw_girl code without Condition Switch and im.Flip, just like in the original example:

Code: Select all

init python:
    def draw_girl(st, at): # combine the dressup items into one displayable
        return LiveComposite(
            (349, 700), # image size
            (0, 0), "base.png",
            (0, 0), "hair%d.png"%hair,
            (0, 0), "pants%d.png"%pants,
            (0, 0), "tshirt%d.png"%tshirt,
            (0, 0), "jacket%d.png"%jacket,
            (0, 0), "scarf%d.png"%scarf
            ),.1
Now under the init block, you can add a few lines:

Code: Select all

init:
    image girl_unflipped = DynamicDisplayable(draw_girl) # from the original code

    image girl_flipped: # now create the flipped version
        "girl_unflipped"
        xzoom -1.0 # flips sprite
        xpos 0.25 # shifts flipped sprite, if needed

    image girl = ConditionSwitch("direction == 'left'", "girl_unflipped", "direction == 'right'", "girl_flipped")
Now, the image "girl" will be shown as unflipped when "direction" is set to "left" and flipped when "direction is set to "right."

In this case, we only needed to add a few short lines under the init block to create a flipped version, instead of having to add a ConditionSwitch/im.Flip line for every layer. I personally find this method a lot easier, especially when working with a large number of layers (speaking from personal experience here ;) ).

(now if only I could find a more efficient way to tint layered sprites lol)
Complete: a2 ~a due~ (music, language, love)
In progress: The Pirate Mermaid (fairytale otome)
On hold: AXIOM.01 (girl detective game)

Image

Post Reply

Who is online

Users browsing this forum: No registered users