Making Imagebuttons disappear upon clicking them

[plulovi]

Hey guys. I was wondering how I could make an imagebutton disappear from off of a screen after it has been clicked? In this case, I'm using it to make an item that the player picks up. It will be a small png of a, in this case, slip of paper that the player picks up, reads, and then takes with. But that would mean it's gone from the screen (and preferably with a fade, instead of just disappearing off the screen unsmoothly. Of course if that's not possible that's totally okay). When the player presses the slip of paper (imagebutton), I would like it to not only disappear, but jump to another label, where I can display what the writing says to the player so that the player can read it along with the character.

Thank you all! You guys are always a big help

[Alex]

The way to achieve this may vary... One of them is something like

Code: Select all

transform cd_transform:
    on appear:
        alpha 1.0
    on show:
        zoom .75
        linear .25 zoom 1.0 alpha 1.0
    on hide:
        linear .25 zoom 1.25 alpha 0.0

image red:
    Solid("c00")
    size(200, 200)

image green:
    Solid("0c0")
    size(200, 200)

image blue:
    Solid("00c")
    size(200, 200)

image white:
    Solid("fff")
    size(200, 200)

screen test_scr():
    modal True
    
    textbutton "Done" action Hide("test_scr") align (0.95, 0.05)
    
    showif not item_1:
        imagebutton:
            idle "red"
            hover "blue"
            action SetVariable("item_1", True)
            align(0.3, 0.5)
            at cd_transform
            
    showif not item_2:
        imagebutton:
            idle "green"
            hover "white"
            action SetVariable("item_2", True)
            align(0.7, 0.5)
            at cd_transform

default item_1 = False
default item_2 = False

label start:
    "..."
    show screen test_scr
    "?!"

https://www.renpy.org/doc/html/atl.html
https://www.renpy.org/doc/html/screens.html
https://www.renpy.org/doc/html/screens. ... -statement
https://www.renpy.org/doc/html/screen_actions.html
https://www.renpy.org/doc/html/python.h ... -statement

[plulovi]

That works perfectly! Thanks so much!! Also, is there also a way to make them pictures? If it's possible, is there a way to replace the colored squares with an image (with both an idle version of the image and a hovered one)? It'll be like an item the player interacts with, in this case, a slip of paper. So I have that image drawn + the hovered version of that image. Is there a specific way it should be coded?

[Alex]

... is there also a way to make them pictures? ...

You easily can change

Code: Select all

image red:
    Solid("c00")
    size(200, 200)

Code: Select all

            idle "red"

to

Code: Select all

image paper:
    "images/paper.png"

Code: Select all

            idle "paper"

and so on.

[plulovi]

Yup that works Is it possible to have this screen be displayed over another screen/at the same time as a different screen? I have a screen for the surroundings and a screen just for that slip of paper in particular. I want to display it so that the background screen (where you can interact with the surroundings as many times as you want) is the first layer and over it would be the paper screen (which you can only interact with once, since it's an item that you basically "pick up")

Thank you !

[Alex]

...

You can do it several ways.
One would be to add some conditions to show different items into the environment screen. So if conditions don't met items wouldn't be visible.

Another way would be to have separate screen with item(s). Then note the modal and zorder properties of screen - https://www.renpy.org/doc/html/screens. ... -statement
The zorder property sets the order of screens onscreen - screen with the largest zorder will always be over others. Screens with the same zorder will be shawn in order you've coded their appearing (screen you show last will be shawn over others). The modal property forces player to interact with this screen only (untill it will be hiden).

Also, you can 'use' screen in another screen - https://www.renpy.org/doc/html/screens.html#use (this might be handy for you or may be not).

[plulovi]

Oh okay I see. I believe I did it right, however when I jump to a label in a screen that has a hotspot, aka the interact-able background screen, the slip of paper screen disappears until I call the background interact-able screen again. Do you know how I can have the slip of paper stay on the screen, even when jumping from label to label, until the paper has been clicked on and disappears?

[Alex]

Hm, screens should be onscreen until you hide them (if you've showed them not called).
So, what's the actual code you use to show bg screen, paper and for labels to jump to/from? Without seeing it it's hard to tell what should be changed.

[plulovi]

so this is the code I have. Scene3 is the background scene and I tried to use the "use" code to insert the paper screen.

Code: Select all

screen scene3():
    imagemap:
        ground "003.png"
        idle "003.png"
        hover "hovered_02.png"
        hotspot (576, 6, 122, 118) action Jump("window_2")
        hotspot (967, 522, 120, 116) action Jump("mess")
        hotspot (292, 504, 122, 119) action Jump("leave")
    use ppr_scr()

Each label looks something like this:

Code: Select all

label window_2:
    "it's just an old looking window."
call screen scene3
return

So every time it goes to a label, in this case "window_2", the "ppr_scr" screen disappears, and reappears once I'm done with that label and call the scene3 screen again.

[Alex]

... So every time it goes to a label, in this case "window_2", the "ppr_scr" screen disappears, and reappears once I'm done with that label and call the scene3 screen again.

Well, yes - that's how it works.
When you 'use' your screen inside another screen, your screen will be shown only if this another screen is shown. When you call the screen, Ren'Py is showing it and waiting for some value returned from this screen, then Ren'Py hides this screen.

So, if you need your 'paper' screen to be onscreen constantly and independent from other screens, then just show it

Code: Select all

show screen ppr_scr

Also, since you jump to labels in your scene3 screen, it might be better not to call it, but show and hide, like

Code: Select all

screen scene3():
    modal True # to prevent farther progress in game
    imagemap:
        ground "003.png"
        idle "003.png"
        hover "hovered_02.png"
        hotspot (576, 6, 122, 118) action [Jump("window_2"), Hide("scene3")] # hide the screen when choice is made
        hotspot (967, 522, 120, 116) action [Jump("mess"), Hide("scene3")]
        hotspot (292, 504, 122, 119) action [Jump("leave"), Hide("scene3")]

label window_2:
    "it's just an old looking window."
    show screen scene3
    $ renpy.pause() # here the game will wait player's choice

https://www.renpy.org/doc/html/screens. ... -statement
https://www.renpy.org/doc/html/screen_actions.html
https://www.renpy.org/doc/html/other.html#renpy.pause

[plulovi]

I think I'm still having trouble. With calling the screen, it does what I want it to. It hides the dialogue window, and it lets me click on hotspots (that jump to labels) without automatically jumping to another label after. I'll put my entire code for this scene here if it helps, as well as some notes.

This first one is what ppr_scr looks like and what scene3 looks like:

Code: Select all

screen ppr_scr():
    modal False

    showif not item_1:
        imagebutton:
            idle "idle"
            hover "hvr"
            action [ SetVariable("item_1", True), Jump("ppr") ]
            align(0.6, 0.5)
            at cd_transform

Code: Select all

screen scene3():
    modal True
    use ppr_scr
    imagemap:
        ground "003.png"
        idle "003.png"
        hover "hovered_02.png"
        hotspot (576, 6, 122, 118) action Jump("window_2")
        hotspot (967, 522, 120, 116) action Jump("mess")
        hotspot (292, 504, 122, 119) action Jump("leave")

Next, this is what the scene looks like entirely with labels in my script file:

Code: Select all

label scene3:
    scene bg black with fade
    with Pause(0.5)
    scene 003 with fade
    show screen ppr_scr #here is where I showed the screen.
    with Pause(0.5)
    ##For all of this dialogue, the ppr_scr stays just fine.
    "..."
    "It's... Really dark in here..."
    ""
    "And cold all of a sudden? {w=1.0}I'm getting the chills..."
    play music "Music/dark.ogg"

    call screen scene3 ##But here is where I need the ppr_scr to stay on screen.
    #The problem with showing the screen is that it just jumps to the next label, and calling the screen
    #hides the dialogue window automatically and doesn't jump to labels... I like it that way, so is there
    #a way I can attempt that with showing the screen?

label window_2:
    ##for labels like these, the ppr_scr shows up fine once again.
    "it's just an old looking window."
    call screen scene3
    return
label mess:
    "Jeez, this attic is so messy.."
    call screen scene3
    return
label ppr:
    "What's this?"
    "Some old piece of paper? I guess I'll take it with me."
    call screen scene3
    return
call screen scene3
return

[pyPat]

Thanks Plulovi and Alex for this post, it corresponds to a problem that I hadn't really solved: animating a button and play sound when and only when I click on it. In my case, the button wasn't supposed to disappear. (A padlock that was supposed to move and squeak when you click it. But unfortunately for the player he didn't open anything! )
In Alex's first answer is the code:

Code: Select all

transform cd_transform:
    on appear:
        alpha 1.0
    on show:
        zoom .75
        linear .25 zoom 1.0 alpha 1.0
    on hide:
        linear .25 zoom 1.25 alpha 0.0

I didn't find out what the appear event corresponds to and the difference with show doc

Thank you. Thank you.

[Alex]

...#The problem with showing the screen is that it just jumps to the next label, and calling the screen
#hides the dialogue window automatically and doesn't jump to labels... I like it that way, so is there
#a way I can attempt that with showing the screen?...

Yes, try it like

Code: Select all

label window_2:
    "it's just an old looking window."
    show screen scene3
    $ renpy.pause() # here the game will wait player's choice

[Alex]

... I didn't find out what the appear event corresponds to ...

Here it is - https://www.renpy.org/doc/html/screens. ... -statement

[plulovi]

Right, I've done that. Though, when I do

Code: Select all

label window_2:
    "it's just an old looking window."
    show screen scene3
    $ renpy.pause()

It keeps the dialogue window on screen. Can I hide the dialogue box window somehow after the label has finished whatever was in quotes?

If I have, for instance:

Code: Select all

label window_2:
    "it's just an old looking window."
    show screen scene3
    $ renpy.pause()

It just keeps "It's just an old looking window" on screen, and I'd like it if it weren't on screen, including the dialogue box window.

One more thing; The ppr_scr still disappears and then reappears when jumping from label to label. I took screenshots of the actual game, so maybe it will clarify some things.

Here is the examples in order of what happens with every click.
First is the beginning of label scene3, and you'll notice now the ppr_scr is displayed and the little paper is on screen:
https://i.ibb.co/ysbDXpq/ex.png

Next, clicking one more time will give me the screen that I can interact with my surroundings, however the paper is gone now for some reaosn:
https://i.ibb.co/7yBdKym/ex2.png

Next, say I clicked on the window at the top. It should jump to the label "window", which it does. Suddenly, the paper's back on screen:
https://i.ibb.co/JF5Y3dB/ex3.png

lastly, clicking again on the dialogue box brings me back to the interact able part of the screen, but the paper is still gone, and now the dialogue box won't disappear:
https://i.ibb.co/wzT5sjN/ex4.png