ImageButton not showing idle or hover

[scarecrow-76]

Hi everyone, a really noob question here. I've spent the last few days trying to figure this out before asking anyone here. Basically, I'm having trouble setting up an image button. The good news is that I finally got it to work with no errors, but the idle and hover states are not being displayed. It seems like a lot of people go about setting this up in different ways. But here's the code that finally got me closer. Please, I am very open to suggestions, pointing out stupid mistakes in my script, or being pointed to some great learning tools. I'm an artist, use to criticism. Thanks. Also, is there a way to post the code with the indents??

label chapter_1:
scene cart_outside with dissolve

##image button
screen cart_idle():
add "cart_outside"
modal True

imagebutton:
focus_mask True
xanchor 0.5
yanchor 0.5
xpos 0.5
ypos 0.5
idle "cart_inside_idle"
hover "cart_inside_hover"
action Jump ("inside_cart")

show fallville with dissolve
$ renpy.pause(3.0)
hide fallville with dissolve
pause

jump inside_cart

return

[Alex]

...

In your code sample you've declared (created) a screen with imagebutton, but didn't show this screen.

Try it like

Code: Select all

##image button screen
screen cart_idle():
    add "cart_outside"
    modal True

    imagebutton:
        focus_mask True
        xanchor 0.5
        yanchor 0.5
        xpos 0.5
        ypos 0.5
        idle "cart_inside_idle"
        hover "cart_inside_hover"
        action Jump ("inside_cart")

label start:
    "... ..."
    "Since there is no other lines in this block of code, game will execute next block (label 'chapter_1')"

label chapter_1:
    scene cart_outside with dissolve
    "..."
    show fallville with dissolve
    $ renpy.pause(3.0)
    hide fallville with dissolve
    $ renpy.pause()
    
    call screen cart_idle
    
    "Player shouldn't get here, 'cause button in screen will transition him/her to another label"

label inside_cart:
    "done"
    return # should return player back to main menu

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

To post the code with indentation you need to put it between 'code' tags. At the top of the post form click the '</>' button to get this tags in your post.

[scarecrow-76]

Thank you so much. It mostly worked. But the other problems were my mistake. I didnt have the image buttons artwork as "define", I had them as "image". Also, the main reason it seemed to give me trouble was that I had the Fallville text appear on the side for 3 seconds, but didnt crop it out to size. Instead I had assumed that since it was a png, anything behind the transparent area would be clickable, it's obviously not.

The only problem now, is that the cart doesnt show idle or its not clickable until the Fallville title dissolves away after the 3 seconds. While the Fallville is being displayed, idle or hover wont show. Once it's gone, it works. I was thinking maybe I could add it underneath the "call screen cart_idle" and put show in front command on it, which I tried doing but failed? Thanks again.

##image button
screen cart_idle():
add "cart_outside"
modal True

imagebutton:
focus_mask True
xanchor 0.5
yanchor 0.5
xpos 0.5
ypos 0.5
idle "cart_idle"
hover "cart_hover"
action Jump ("inside_cart")


label chapter_1:
scene cart_outside with dissolve
show fallville with dissolve:
xpos 0.0
ypos 0.0
xanchor 0.0
yanchor 0.0
$ renpy.pause(3.0)
hide fallville with dissolve

call screen cart_idle


label inside_cart:
"done"
return

[Alex]

...The only problem now, is that the cart doesnt show idle or its not clickable until the Fallville title dissolves away after the 3 seconds. ...

Well, actually, you can't click on cart 'cause you didn't show it yet.
In your 'cart_idle' screen you add "cart_outside" image. And in your label 'chapter_1' you show this image. So, while 'fallville' is shown it's just a bg image with cart, not the screen with button.

To test it try

Code: Select all

label chapter_1:
    #scene cart_outside with dissolve
    "..."
    show fallville with dissolve
    $ renpy.pause(3.0)
    hide fallville with dissolve
    $ renpy.pause()
    
    call screen cart_idle
    
    "Player shouldn't get here, 'cause button in screen will transition him/her to another label"

To show 'fallville' over the button, you need to put it either in a screen with the cart button or in separate screen and show it after 'cart_idle' screen was shown.
BG images and sprites are shown on a 'master' layer while screens are shown on 'screens' layer that is shown over the 'master' layer.
https://www.renpy.org/doc/html/config.h ... fig.layers

[scarecrow-76]

Yup, that seemed to be what was happening. So I decided to add an extra image of the area with fallville appearing over that one, then dissolving into the close-up of the cart with the image button. Actually works much better as an intro to the area. Thanks so much for taking the time. I've been reading through the documentation, but a lot of it still goes over my head as to actually implement it. Hey look at that, I actually posted the code correctly this time.

Code: Select all

##create image button
screen cart_idle():
    add "cart_outside"
    modal True

    imagebutton:
        focus_mask True
        xanchor 0.5
        yanchor 0.5
        xpos 0.5
        ypos 0.5
        idle "cart_idle"
        hover "cart_hover"
        action Jump ("inside_cart")


label chapter_1:
    scene fallville_outside with dissolve
    show fallville with dissolve:
    $ renpy.pause(3.0)
    hide fallville with dissolve
    pause

#call the image button that was create
    call screen cart_idle