[tutorial] Dress up game

[TrickWithAKnife]

I didn't get the meaning fully before, but now I do. Damn that's useful.

[Another]

Recently, it was mentioned in another thread that exporting the character from Ren'Py to a PNG file might be interesting. Here's one way to do this...

First, we'll import some modules and redefine the draw_char() functions for our purpose:

Code: Select all

    import os, time, pygame

    def draw_char(st, at): # combine the dressup items into one displayable
        globals()["doll"] = im.Composite(
            (361, 702), # image size
            (0, 0), "base.png",
            (0, 0), "glasses%d.png"%glasses, # (0, 0) is the position of a dressup item. Because these images are saved with spacing around them, we don't need to position them.
            (0, 0), "hair%d.png"%hair,
            (0, 0), "shirt%d.png"%shirt,
            (0, 0), "tie%d.png"%tie,
            (0, 0), "pants%d.png"%pants
            )
        if globals()["direction"] == -1:
            globals()["doll"] = im.Flip(globals()["doll"], horizontal=True)
        return globals()["doll"],.1

    def draw_char_side(st, at):
       return LiveComposite((361,702), (10,550), im.FactorScale(globals()["doll"], .45)),.1

Basically, we store the image in a variable each time the player modifies the dress up selection. We also use the im.Composite manipulator instead of LiveComposite because the resulting image has a load() method that will be handy later.

The variable that controls if the image is flipped will be set in the start label:

Code: Select all

label start:
    $direction = 1

Of course, we need to add some buttons:

Code: Select all

        ui.textbutton("Flip", clicked=ui.returns("flip"), ypos=0, xpos=150)
        ui.textbutton("Save as PNG", clicked=ui.returns("capture"), ypos=0, xpos=300)

Finally, inside the dressup label, we'll put the code to flip the image and export the character as a PNG file:

Code: Select all

    if picked == "flip":
        $direction = -direction
    if picked == "capture":
        $pygame.image.save(doll.load(), os.path.join(config.basedir, "c%s.png") %(str(time.time()).replace(".", ""))) # The player can create many images successively, each of them will get a unique name.
        return # This return is optional. Instead, we could play a sound and/or display the filepath.

Edit 12/31/2012 : added some code to flip the image.

[leon]

Wow, that could be very useful. Nice work!
Now we need a method for auto posting the image to Facebook, so people can spam their friends.

[AERenoir]

Ooh, this could be handy!

[CaseyLoufek]

(now if only I could find a more efficient way to tint layered sprites lol)

Well here's what I thought of..

Make some hues using the im.matrix objects. Name them, doesn't really matter what because...

Code: Select all

    hue1 = im.matrix([ 1, 0, 0, 0, 0,
                            0, 1, 0, 0, 0,
                            0.85, 0.7, 1, 0, 0,
                            0, 0, 0, 1, 0 ])

You'll be making an array (string evaluation wasn't working and I didn't feel like mucking about with it)

Code: Select all

    huearray = [hue1,hue2,hue3,hue4,hue5,hue6,hue7]

I'm just gonna do one here but you can do one for each layer of course...

Code: Select all

    dressup_show = False
    dressup_button_show = False
    hair, glasses, tie, vest, skirt, hue = 1, 1, 1, 1, 1, 0 # default dressup items
    hair_styles_num, glasses_styles_num, tie_styles_num, vest_styles_num, skirt_styles_num, hue_styles_num = 8, 3, 6, 3, 3, 6 # number of styles (files) for each dressup item

Notice how I started at 0 and ended at 6? That's an array thing, it wants to count from 0, this one of the only two places we'll have to care.

Now we change the layer we want to use the matrix we have...

Code: Select all

    def draw_girl(st, at): # combine the dressup items into one displayable
        return LiveComposite(
            (64, 64), # image size
            (100, 100), "human_f.png",
            (100, 100), im.MatrixColor("hair%d.png"%hair, huearray[hue])

Finally add the incrementer and button code for the new hue. Here we pay attention to it being an array and set it to 0 again when it runs over.

Code: Select all

        hue_n = hue + 1 # if next hair is chosen
        hue_p= hue - 1 # if previous hair is chosen
        if hue_p < 0: # making sure we don't get out of index range (index -1 is not allowed)
            hue_p = hue_styles_num
        if hue_n > hue_styles_num: # making sure we don't get out of index range (index musn't be bigger than hair_styles_num)
            hue_n = 0

Code: Select all

        y += 80
        ui.imagebutton("frame.png", "frame.png", clicked=SetVariable("hue", hue_p), ypos=y, xpos=50)
        ui.imagebutton("frame.png", "frame.png", clicked=SetVariable("hue", hue_n), ypos=y, xpos=250)

Adding more hues is just a matter of repeating the above with different names and arrays and applying them to right layers.

[kuzai]

so is there any way you can make the created character show up in big event scenes as well as in the game in normal ways? I hope i am wording this right.

[leon]

Of course, you just use "show girl", assuming you are using the original version ironically I used a guy sprite in the sample.
To use facial expressions (well one way to do it) you can copy paste the function "draw_girl" and add expressions to each copy, then add definitions like

Code: Select all

    image girl happy = DynamicDisplayable(draw_girl_happy)

[kuzai]

and this works for event scenes as well? Like I don't mean just showing up as they normally do. Like in event scenes such as this

[leon]

Oh, sorry. Didn't get what you meant before... We call these CGs around here because we are fancy like that.

Yes, it's pretty much the same concept. Just make sure to save each article of clothing/accessories from the layers with (transparent) spacing around them so you won't need to position them programmatically when using LiveComposite.

[kuzai]

Oh, sorry. Didn't get what you meant before... We call these CGs around here because we are fancy like that.

Yes, it's pretty much the same concept. Just make sure to save each article of clothing/accessories from the layers with (transparent) spacing around them so you won't need to position them programmatically when using LiveComposite.

hmm I might need a script example of it. Because you pretty much lost me xD

[TrickWithAKnife]

If the body layer is 400x600, then make the clothing layer 400x600 too. That way you can position them perfectly in photoshop, and they'll line up nicely in renpy.

[kuzai]

Hmm not exactly what I was asking but it's still helpful. Sorry for being a pest but How would one be able to make a character creator where you can choose the gender of the character?

[leon]

hmm I might need a script example of it. Because you pretty much lost me xD

Example. It doesn't include a CG, but there really isn't any difference between a character showing normally or in a CG.

How would one be able to make a character creator where you can choose the gender of the character?

A very simple way to do it would be to use two base images (like base1.png and base2.png for male and female versions) and then use them as if they were dressup items. However, if you don't want to end up with guys wearing skirts and pink ribbons in their hair, you'll need to make quite a few changes to the code...
Another very simple solution would be to have a choice to select the gender before the character creator and create one version for the character creator for each gender.

[kuzai]

ah thank you very much. I believe all of my questions are answered now. Again thank you

[noeinan]

Hello, I am trying to fit all the code discussed here into one game file since I thought it was super cool!

I was able to add the "save as .pdf" section without any errors, although I couldn't tell where the file was saved or what it was named. Is there a default location, or did I need to add extra code to make it work?

Also, when putting in the hue code into the script, I suddenly get an error message:

Code: Select all

I'm sorry, but errors were detected in your script. Please correct the
errors listed below, and try again.


File "game/script.rpy", line 42: is not terminated with a newline. (Check strings and parenthesis.)
            return LiveComposite(

Ren'Py Version: Ren'Py 6.16.0.395

If anyone could tell me what I am doing wrong, that would be greatly appreciated! Thank you. I have attached two game folders-- one before I put the hue code in and one after I put the hue code in.