Character Bio Screen Assistance

[Skiegh]

Hello, hello again.

I'm trying to make a character bio screen, which people can go to when they interact with a new character. Said screen I want to be split between a viewport for the character model, which I'd like to have buttons to zoom it in or out (full size images are pretty big), and possibly to change outfits one day too. On the right, it would just be basic text info about the character. I also need an exit button which goes back to where you were (seems simply enough), and possibly another one which will jump you to a small path snippet flashback-style in how the main character relates to said character (this scene is mandatory upon first playing, but would be able to seen again here).

When I do finally get around to editing my main menu, you can do this sort stuff there too, but that's another day.

So right now, I find the viewports to be mostly easy enough to understand. This is what I have so far...

Code: Select all

screen char_bio:
    frame:
        background "gui/Bio_Back.jpg"
        xpos 0
        
        side "c b r":
             area (0, 0, 388, 600)
    
             viewport id "vp":
                 draggable True
    
                 add "Characters/Mika/Mika_Base_Full_001.png"
    
         
    frame:
        background "gui/Bio_Back.jpg"
        xpadding 10
        ypadding 10
        xpos 400
        
        side "c r":
            area (0, 0, 390, 600)

            viewport id "vp2":
                draggable True

                vbox:
                    text "{b}Name:{/b} Character Name"
                    text "{b}Age:{/b} 17"
                    text "{b}Background:{/b} This is where I do long rambling stuff about a character and their relationship to the main character and all that sort of stuff."

            vbar value YScrollValue("vp2") xsize (10)

--

Things to note: My project file is very old, so some things may not work entirely correctly. Been meaning to ask about such things. My project is 800x600 as a result and I don't have any in-built gui stuff, it would seem. So i'll have to make a graphic for the Vbar at some point (if I even include it). I'm using this test image as my backer, which is 400x600, so half the screen, and I'm using one for each viewport.

So my issues so far are thusly:

1) The character seems to be cropped fine in the viewport after I made it (0, 0, 388, 600). I find it weird the character seems to crop around the borders of the test image I'm using fine, except on the right side, which I fixed by making it 388 instead of 400. The black border around the image is 6 pixels right now, so I found it weird I needed to double that, but whatever. Right now, the character viewport seems to work fine. Except the character is always positioned (before you move it around) off to the right. I'd like it to be centered in the viewport, but using Xcenter on it didn't seem to do anything.

2) My characters are layered, with a base sprite and an expression sprite. I used "add" here, but is it possible to simply "show" a character in the viewport?

3) While I think I could manage an exit button and a jump button. A button for zooming the sprite in or out is something I wasn't sure how/if you could do. It's not necessary, but I think it would be nice.

4) The vbar seems to accept size changes, but positional changes like xpos and such don't seem to work too well on it for some reason.

5) The text in the second viewport seems to be mostly fine as it is. So no help there.

6) I would like to use this screen for multiple characters, and while I could just copy and paste this screen and alter it for each character, I was wondering if it would be better to edit this one for each character somehow.

7) I'll be honest, I have no idea what the "side" thing for frames really do, hahahaha. I tried finding it in the ol' wiki, but all of the info on it was kind of vague. Loose testing didn't give me many results either. So if someone wants to explain those, that'd be nice, but not necessary, hehe.

---

Thanks in advance for any/all assistance.

[Alex]

1) You need to set xinitial 0.5 for viewport to show its content centered by x-axis - https://www.renpy.org/doc/html/screens.html#viewport

2) Change your characters to be a single displayable to just "add" it to the screen. Try Layered images - https://www.renpy.org/doc/html/layeredimage.html#

3) 4) The solution depends of how you coded your screen.

6) You can create a template screen and pass all the nessecary variables to it when calling/showing to fill it in. Or create kind of pages to show character's info in screen, like

Code: Select all

###
#
#
default eileen_points = 0
default eileen_max_points = 10
default eileen_fact_1 = None
default eileen_fact_2 = None

default lucy_points = 0
default lucy_max_points = 10
default lucy_fact_1 = None
default lucy_fact_2 = None
#
#
###

screen one_button_scr():
    textbutton "Info" action ToggleScreen("profiles_scr") align (0.95, 0.05)
    
screen profiles_scr():
    default page = "Eileen"
    
    frame:
        align(0.05, 0.05)
        xsize(config.screen_width//3)
        
        vbox:
            xfill True
            text page size 35 xalign 0.5
            
            null height 10
            
            hbox:
                xalign 0.0
                if page == "Eileen":
                    bar value eileen_points range eileen_max_points xsize (config.screen_width//6)
                    null width 5
                    text "[eileen_points]/[eileen_max_points]"
                    
                    
                elif page == "Lucy":
                    bar value lucy_points range lucy_max_points xsize (config.screen_width//6)
                    null width 5
                    text "[lucy_points]/[lucy_max_points]"
            
            side "c r":
                area (0, 0, config.screen_width//3, config.screen_height//3)

                viewport id "vp":
                    draggable True
                    mousewheel True
                    yinitial 1.0

                    vbox:
                        if page == "Eileen":
                            if eileen_fact_1:
                                text eileen_fact_1
                                null height 5
                            else:
                                text "~Locked~"
                                
                            if eileen_fact_2:
                                text eileen_fact_2
                                null height 5
                            else:
                                text "~Locked~"
                                
                        elif page == "Lucy":
                            if lucy_fact_1:
                                text lucy_fact_1
                                null height 5
                            else:
                                text "~Locked~"
                                
                            if lucy_fact_2:
                                text lucy_fact_2
                                null height 5
                            else:
                                text "~Locked~"


                vbar value YScrollValue("vp")
                
            null height 10
            
            hbox:
                xfill True
                textbutton "Eileen" xalign 0.5 action SetScreenVariable("page", "Eileen")
                textbutton "Lucy" xalign 0.5 action SetScreenVariable("page", "Lucy")
            

label start:
    scene black
    show screen one_button_scr
    "..."
    menu:
        "Who do you like most?"
        "Eileen":
            $ eileen_points += 7
        "Lucy":
            $ lucy_points += 7
            
    menu:
        "Talk to ..."
        "Eileen":
            $ eileen_fact_1 = "Eileen is a Ren'Py mascot."
        "Lucy":
            $ lucy_fact_1 = "Lucy always behind the scene..."
            
    menu:
        "Search some info about..."
        "Eileen":
            $ eileen_fact_2 = "Eileen was created by PyTom (himself)."
        "Lucy":
            $ lucy_fact_2 = "Lucy was created by Uncle Mugen."
            
    "Characters info has changed."
    "?"
    return

7) "Side" sets the positions for its elements. In your sample <<side "c b r":>> will place the content of the viewport at (C)enter and you must add two bars - bar and vbar respectively to be shown at (B)ottom and (R)ight sides of the content. See the sample in a viewport docs.

[Skiegh]

Oooh, this is a very detailed response and very helpful already. I was going to ask about unlocking details, and you went ahead and already did so. I have only just begun sort of piecing together your example and learning from it. Sort of working from left to right, but I think I got the character viewer working fine now. The xinitial worked well. I also (for whatever reason), thought the "add" statement added in an image from your folder (as I did), not a displayable, so now I have it working just fine with the layers I normally use.

I have a lot to tinker with, but I think I seem to mostly know how to get this working to a reasonable degree, but I do have some extended questions...

8.) Now that I know my displayables work and such, how does one go about effecting them if say, I wanted to change outfits or expressions? Or would it be more like creating a variable which showed a different image of such depending on that, rather than changing it after the fact? To be more precise, and this is me theory crafting code which I have no idea how to do but...

There's a couple ways I could see doing this, but, let's say my average expression set runs from 1~12. Characters are displayed with their name, size, outfit, expression, so: "Show mika full gym 1"

In game, character's displayables are all tied to a variable, Mika for instance, it's simple "m.display" All characters using their variable are shown using their name plus a d. So, "Show mikad 6" Would show mika with expression 6 using whatever displayable is in the variable.

Now if I wanted to bring up a prompt to let people input a number, or maybe just show a list of buttons to press for those numbers or outfits. We'll stick with expression numbers for now, cause that's easier. What would be the easiest way to go about it? Using the variable version or something else?

Is it possible for the "add" statement to fill in portions and default to expression 1 if not? Like, say... add "mika _" where the blank would be filled in by a variable chosen inside the screen and defaulted to 1?

9) Old question again, but can you alter the size of an already added image? Sort of ties into the last question now, on if you can modify an already added image. This feature is more fluff than the others, but one I am curious about from a technical standpoint.

----------

This has been very helpful. The logistics of screens confuse me a bit, like sizing them and positioning, but I'll figure that out eventually -- maybe. Sort of using your example to add onto my own in pieces, so I can see how things work out.

Thanks a bunch for taking the time responding.

[Alex]

Depends of how you've made your charcter's displayables.
You can add a displayable stored in a variable to the screen. And if you want to let player change characters outfit not only to check it in screen but to see it in farther game, you need to store it in a variable(s) somehow.

Code: Select all

screen char_scr():
    default zoom_var = 1.0
    vbox:
        textbutton "Zoom" action ToggleScreenVariable("zoom_var", 1.0, 1.3)
        textbutton "Outfit" action ToggleVariable("outfit", "suit", "jeans")
    
    # construct the name of displayable to show out of tags (just 1 in this sample)
    $ char_img = "mika " + outfit # don't forget spaces between image tags
    
    add char_img align (0.5, 1.0) zoom zoom_var

label start:
    
    "..."
    show screen char_scr
    "?"

[Skiegh]

Fantastic info like before. Despite positional stuff, which I will work on after everything is in order, I have most of my screen working about how I want it, aesthetics aside. I do have a few more questions though, in regards to your last post.

The toggle option for Zoom works great, because I really only wanted 2 sizes, 0.5 and 1.0. However for expressions and outfits, while I think just a toggle you can sift through is fine, is it possible to have more than two? Adding more to the list seems to cause it to crash for me. It being called a "toggle" makes me think it is limited to two. I am currently trying other options like a button that brings up another vbox with buttons will have a bunch of names of outfits or numbers for expressions. For reference, this is my code so far...

Code: Select all

screen one_button_scr():
    textbutton "Info" action Show("profiles_scr", transition=tran_rot) align (0.95, 0.05)
            
screen profiles_scr():
    modal True
    default page = "mika"
    default zoom_var = 1.0
    default profile_ex = "1"
    default profile_out = ""
    $ char_img = page + " full " + profile_out + profile_ex
    
    frame:
        background "gui/Bio_Back.jpg"
        xpos 0
        
        side "c b r":
             area (0, 0, 388, 600)
    
             viewport id "vp":
                 xinitial 0.5
                 yinitial 0.0
                 draggable True
    
                 if page == "mika":
                     add char_img align (0.5, 1.0) zoom zoom_var
                     
                 elif page == "main":
                     add char_img align (0.5, 1.0) zoom zoom_var
    
         
    frame:
        background "gui/Bio_Back.jpg"
        xpadding 10
        ypadding 10
        xpos 400
        
        side "c r":
            area (0, 0, 390, 600)

            viewport id "vp2":
                draggable True

                vbox:
                    if page == "mika":
                        text "{b}Name:{/b} Mika Greenfield"
                        text "{b}Age:{/b} 17"
                        text "{b}Background:{/b} Filler~"

                    elif page == "main":
                        text "{b}Name:{/b} Main Character"
            
        hbox:
            textbutton "Zoom" action ToggleScreenVariable("zoom_var", 1.0, 0.5)
            textbutton "Expression" action ToggleScreenVariable("profile_ex", "1", "2")
            textbutton "Outfit" action ToggleScreenVariable("profile_out", "", "cas ")
            textbutton "Exit" action Hide("profiles_scr", transition=tran_rot)
            
        vbox: 
            xalign 0.0 yalign 0.5
            textbutton "Mika" action SetScreenVariable("page", "mika")
            textbutton "Calvin" action SetScreenVariable("page", "main")     

--

Right now everything works properly. I used the page variable to determine the character being displayed, as it can easily be the same name as the character displayable. Base outfit isn't specified so I leave the outfit variable empty at first.

Another question in regards to the button which shows this screen: I mentioned how I wanted this button to display itself when you interact with another character for the first time. Is it possible for the button which shows this screen, to also set the page variable to the character you are interacting with? I guess that question is just asking if you can have one button do two actions. I suppose I could just make the "page" variable a non-screen variable and set it that way, maybe.

--

One last thing I need to do is include that sort of "history" button which will send you to a scene. My only concern there would be logistics, as I am new to using screens. If you are in a certain part of the game, open this screen, click a button on that screen to go to a label, play out that section, what would be the best way to return to the intial location? Just a label at every character introduction location to jump them back to? Can I merely return them to that point with the profile page up all clean like?

--

Thanks as always, this has actually been very helpful and informative.

[Alex]

...

Well, yes - toggle action toggles the two values of the variable. To use more values you can create several buttons and make each of them set the variable to a certain value, or create construction like this (or something else)

Code: Select all

screen testscr():
    default outfits_list = ["out_1", "out_2", "out_3", "out_4"]
    default out_ind = 0
    text outfits_list[out_ind] align (0.5,0.5)
    
    textbutton "Click Me!" action If(out_ind < (len(outfits_list)-1), SetScreenVariable("out_ind", out_ind+1), SetScreenVariable("out_ind", 0)) align (0.5, 0.05)

https://www.renpy.org/doc/html/screen_actions.html#

You can use global (not screen) variable - set its value outside of a screen (remove default page = "mika" line from screen). Then you could change its value like using SetVariable action.

Since you show only a character in a first viewport and don't need scrollbars, you can leave just

Code: Select all

side "c":

And you don't need to check page-variable to show character 'cause you already use it to create char_img.

You can pass the values to the screen when showing them like

Code: Select all

screen profiles_scr(page="mika"): # list of screen vars in brackets (with default values if needed)
#code for screen

default page = "main" #default value of a global var
label start:
    show screen profiles_scr(page=page) # shows the screen with screen var "page" having value of a global var "page"

Also, buttons and other interactive elements of screens can do several actions - just place them in square brackets

Code: Select all

textbutton "Click Me!" action [Show("some_scr"), Hide("other_scr")]

As for "history" system - check this sample viewtopic.php?f=8&t=50621&p=489679#p489679

[Skiegh]

Beautifully helpful as always.

I am currently trying to finish up something else, and this is something I am working on on the side, so I haven't gotten to tinkering with your latest advice yet. Though I absolutely will. I will let you know if I have anymore questions, but I think this mostly explains everything.

Mostly just popped in to thank you again. I will test your advice soon, but I am busy lately. Thanks again, Alex.

Once it's all done, I'll probably post my end results for any one else who might go searching for such things.

[Skiegh]

Here I am again, back to working on this between other things. I have it mostly working and looking how I want, but in response to your latest post suggestions, I do have a couple questions if you don't mind indulging me yet again.

Upon your suggestion of putting the variables into the screen itself...

Code: Select all

screen bio_scr(page="main", outfits_list=[""]):

This allows me to set those variables when using a showing the screen manually, but I have a few problems regarding it. One is that those two variables that I have set in the () for the screen don't seem able to be changed once the screen is loaded, I seem to have to show it again. That's not horrible, but prior to that (and in the code I'll give below), I had test buttons to switch to pages on the fly, but that doesn't seem to work. Easy work around seems to be just showing the screen again and putting in the proper variables with the button.

That segues into my next (and seemingly stupid) question of... I can't seem to figure out how to show a screen from a screen "Show" statement as opposed to using the standard one. So while...

Code: Select all

## This works

show screen bio_scr(page="mika", outfits_list=["", "cas ", "gym "]

## I do not know how to make this work from a button...

screen one_button_scr():
    textbutton "Info" action Show("bio_scr", transition=tran_rot) align (0.95, 0.05)
    
# This shows the screen just fine, but because I seem to need the screen in quotes, I am unsure of how to manipulate it to place the parameters following it without getting some sort of error about bio_scr not existing or what have you.    
    
    

Thanks a bunch for all of the help. For reference, here is all of the code I'm using so far with the screen -- some of it is fluff stuff for testing and things I need to remove still, but otherwise it seems to work properly. A bit finicky when going over the hump of the beginning/end of the emotional set, but otherwise fine.

Bonus points if you can tell me specifically why putting the screen variables inside the parenthesis makes them unable to be changed later on. It was not a problem I was anticipating.

Code: Select all

## MY SCREEN             


            
screen bio_scr(page="main", outfits_list=[""]):
    modal True
    default page = "main"
    default zoom_var = 1.0
    default profile_out = ""
    default outfits_list = [""]
    default out_ind = 0
    default profile_ex = "1"
    default profile_ex_num = 0
    default profile_ex_list = ["1", "1 smile", "1 neutral", "1 empty", "2", "2 smile", "2 open", "3", "3 open", "3 open2", "3 irked", "3 irked2", "3 grit", "3 grin", "3 grin2", "4", "4 open", "4 open2", "4 smile", "5", "5 open", "5 open2", "5 smile", "5 smile2", "5 aroused", "5 aroused2", "6", "6 open", "6 open2", "6 smile", "6 smile2", "7", "7 open", "8", "8 open", "9", "9 closed", "10", "11", "12"]
    $ char_img = page + " full " + profile_out + profile_ex
    
    frame:
        background "gui/Bio_View.jpg"
        xpos 0
        xpadding 0
        ypadding 0
        
        side "c":
             area (0, 0, 394, 600)
    
             viewport id "vp":
                 xinitial 0.5
                 yinitial 0.0
                 draggable True
                 
                 add char_img align (0.5, 1.0) zoom zoom_var
    
         
    frame:
        background "gui/Bio_Back.jpg"
        xpadding 15
        ypadding 42
        xpos 394
        
        #text outfits_list[out_ind] align (0.25,0.25)
        text "[out_ind]" align (0.25,0.25)
        #text "[profile_ex_num]" align (0.25,0.25)
        
        
        side "c r":
            area (0, 0, 406, 600)

            viewport id "vp2":
                draggable True

                vbox:
                    if page == "mika":
                        text "{b}Name:{/b} Mika Greenfield"
                        text "{b}Age:{/b} 17"
                        text "{b}Background:{/b} Filler~"

                    elif page == "main":
                        text "{b}Name:{/b} Calvin Hintre"
            
        vbox: 
            xalign 0.0 yalign 0.5
            textbutton "Mika" action SetScreenVariable("page", "mika"), SetScreenVariable("out_ind", 0), SetScreenVariable("profile_out", "")
            textbutton "Calvin" action SetScreenVariable("page", "main"), SetScreenVariable("out_ind", 0), SetScreenVariable("profile_out", ""), SetScreenVariable("outfits_list", ["", "under ", "naked "])
    hbox:
        yalign 0.0
        xalign 1.0
        
        imagebutton auto "gui/Bio_Button_Zoom_%s.png" action ToggleScreenVariable("zoom_var", 1.0, 0.5)
        imagebutton auto "gui/Bio_Button_Exup_%s.png" action If(profile_ex_num < (len(profile_ex_list)-1), SetScreenVariable("profile_ex_num", profile_ex_num+1), SetScreenVariable("profile_ex_num", 0)), SetScreenVariable("profile_ex", profile_ex_list[profile_ex_num])
        imagebutton auto "gui/Bio_Button_Exdown_%s.png" action If(profile_ex_num < (len(profile_ex_list)-1), SetScreenVariable("profile_ex_num", profile_ex_num-1), SetScreenVariable("profile_ex_num", 0)), SetScreenVariable("profile_ex", profile_ex_list[profile_ex_num])
        imagebutton auto "gui/Bio_Button_Outfit_%s.png" action If(out_ind < (len(outfits_list)-1), SetScreenVariable("out_ind", out_ind+1), SetScreenVariable("out_ind", 0)), SetScreenVariable("profile_out", outfits_list[out_ind])
        imagebutton auto "gui/Bio_Button_Exit_%s.png" action Hide("bio_scr", transition=tran_rot)
        
            
            
###

#
default bio_page = "main"

screen one_button_scr():
    textbutton "Info" action Show("bio_scr", transition=tran_rot) align (0.95, 0.05)

[Alex]

...

Mmm, well, it looks like in parenthesis should be placed vars that will be constants. If you need to change some vars in a screen don't put them in parenthesis - just use global vars (and change them using SetVariable action) or set default values for screen vars (and change them using SetScreenVariable action).
https://www.renpy.org/doc/html/screen_o ... tion.html#

If you'll need to show screen with some constants (like title of the screen), put them in parenthesis and show this screen like

Code: Select all

Show("bio_scr", my_var="Title", transition=dissolve)