(Solved) How to combine "zorder" with the Function command

[Lucascraft]

Hiya! I need help with some syntax.

I have a custom UI screen that is a character profile screen. I want to add unlockable character images to my game that the player will earn as they play. Then they can view the unlocked character images on the character profile screen.

I have a screen established and it works perfectly as a static display with the character bio, likes, dislikes, etc. But now I'm trying to take it from a static window to one that has some imagebuttons on it and dynamic image swapping.

My problem is that it is placing my character images behind the open profile screen. I would like to have it display the character image on top of the open window.

This is what my code looks like for the imagebutton:

Code: Select all

        imagebutton:
            xalign 0.700 yalign 0.800
            idle "profile_pic_01_idle.png"
            hover "profile_pic_01_hover.png"
            action Function(renpy.show, "jenny_profile_pic_01")

This button is working to the extent that when I click button labeled "1" it displays profile pic 1 on the screen. But it is placing the profile pic behind the window. I know I need to combine the above "action" line with zorder or layer or something, but I'm not sure how to combine that with the Function command that I'm using.

There will be multiple of these image buttons on the screen, so my example is for the first button, but I might have 4 or 5 (or more) unlockable images for a character so I will have multiple image buttons on the screen, each linked to showing a specific picture.

I'd love some help with how to display my character pic over the top of the window. Or if there's a different/better way to do it than what I'm doing above, I'm open to suggestions.

Oh! And a bonus question! Is there an efficient/quick way to hide any other profile images that might be displayed already? Like what if I have profile_pic_02 displayed and I click the button for profile_pic_01, I need to hide profil_pic_02 but also any other potential numbers. Basically I'm looking for a catch-all way to hide all other profile pic images except the one I clicked the button for.

Edit: I'm actually also having trouble with positioning. It is placing the image at the bottom-center of the screen by default and I'm trying to move it, but I keep getting a traceback error with "invalid syntax" on the line for my "action Function..." command.

Thanks!

[Lucascraft]

Replying to my original post with a couple quick mockups to help visualize what I'm trying to do.

In example 1, there is a screen open. This will be my full character profile page. Then on that character profile screen window, there will be buttons to display a different picture of the character whose profile it is. I want the the button to do the following:

1) Place the image (in the example it's the stick person drawing) on TOP of the open screen window
2) Hide any potential images that might be showing right now

In example 2 I have pressed the 2nd imagebutton, and so the picture that is being displayed has changed to profile_pic_02.

[m_from_space]

There is a very easy way to make sure that a screen is not shown when another is. It is called a "tag".

Put your characters (or even part of it, if it refers to clothing or stuff) into a screen each and give it the same tag. Whenever you show one of the screens, the others are automatically hidden.

Code: Select all

screen character1:
    tag char
    add "profile_pic_01_idle.png"
    
screen character2:
    tag char
    add "profile_pic_02_idle.png"
    
label start:
    "Here is character 1:"
    show screen character1
    "Here is character 2:"
    show screen character2

Another way would be calling the screen with arguments instead, so you don't have to make multiple screens:

Code: Select all

screen characterprofile(name):
    if name == "jenny":
        add "profile_pic_01_idle.png"
    elif name == "bob":
        add "profile_pic_02_idle.png"

label start:
    "Here is character 1:"
    show screen characterprofile("jenny")
    "Here is character 2:"
    show screen characterprofile("bob")

Z-Orders is determined inside of each screen, so the body should have a lower z-order than clothing and since some clothes are always in the front, you can arrange them via the different screens and renpy takes care of it when drawing. If you want some screen to be in front of others, just give it a higher zorder inside the screen definition.

[Lucascraft]

Thanks for the reply. I was definitely not aware of “tag” and I might be able to work with that.

However, I’m still not sure how to make this work with buttons. In my mock-ups I only illustrated the small portion where the character picture is displayed. There is a lot more to the profile page than that. It will have a bio, some stats, and other information.

My goal is to load the screen of the profile window, and then change the image that is being overlayed on top of the window. I can do this easily by just making it a static window with a single picture.

The problem I’m having is making a dynamic window where the picture is a user picked variable with button presses.

[philat]

Any reason you're not using add (screen language) and trying to use show (renpy statement)?

[Lucascraft]

Any reason you're not using add (screen language) and trying to use show (renpy statement)?

I don’t know what this means. That’s the reason. Lol!

I’m using “add image_name” to start the page as the initial load. So the first picture that always pops up will be “character_profile_pic_01”.

But you can’t used add statements with the action command on a button, which is where I’m struggling.

[m_from_space]

However, I’m still not sure how to make this work with buttons. In my mock-ups I only illustrated the small portion where the character picture is displayed. There is a lot more to the profile page than that. It will have a bio, some stats, and other information.

I didn't assume otherwise, I just wanted to show you a way to make things work regarding screens automatically hiding and stuff. You can put anything you want inside a screen and use buttons on other screens to change that information.

Here is a list of all the functions you can put behind the "action" keyword of a button: https://www.renpy.org/doc/html/screen_actions.html

You don't have to write "Function(renpy.show, ...)" by the way, just use "Show(...)" for example.

Feel free to post stuff you managed to code and we can help out.

[philat]

Code: Select all

screen profile(char):
    default pic= 1
    vbox:
        hbox:
            textbutton "1" action SetScreenVariable("pic", "01")
            textbutton "2" action SetScreenVariable("pic", "02")
            textbutton "3" action SetScreenVariable("pic", "03")
        add "{}_profile_pic_{}".format(char, pic)

label start:
    show screen profile("jenny")

[Lucascraft]

That got me going. Thanks!