Ren'Py Help making custom Return button

[moose_puck]

I'm just starting to learn Ren'py and I was wondering if someone could help me with something that should be simple, but seems overly complicated?

What i am trying to do is replace the "Return" text button from the game menu, with a custom image (basically the back arrow you see in many games) I've found some good tutorials on using the imagebutton function but they all assume you are using it on a custom screen - while the basic Ren'Py tutorial scripts use some sort of Style formatting, which is making me scratch my head.

So, instead of the the normal game menus (Load, Save, Preferences, About Help..) showing the "Return" at the bottom in the normal game overlay text box, I instead want to put an arrow graphic over in the right-lower corner of the screen (exact position to be determined later but around xpos 1700 and ypos 900) The images are called "gui/gm_return_idle.png" and "gui/gm_return_hover.png"

The renpy tutorial screens.rpy file references "return_button" four times...

line 388

#style return_button
# is gui_button
style navigation_button_text is gui_button_text

line 476

    textbutton _("Return"):
        style "return_button"

        action Return()

line 496

style return_button is navigation_button
style return_button_text is navigation_button_text

... and line 532

style return_button:
    xpos gui.navigation_xpos
    yalign 1.0
    yoffset -45

Can anyone give me basic directions on how to replace the stock return text button with my image and put it in that lower-right position?

Thanks

 

[79flavors]

Keep in mind that all screens are custom screens. It's just that some of them were written by someone else (and sometimes a little overly complex). There are very few screens in RenPy that you couldn't entirely replace with something of your own.

In this case, all you need to do is swap any textbutton _("Return") for an imagebutton with your custom images.
I wrote a guide for a Discord/Patreon button a while ago. 99% of that solution is probably valid here too. At least, the basics.

You might need to tweak the style options a bit, since some style of an imagebutton is different from a textbutton. But a lot of the values (like yalign and xpos) are valid for both.

Also keep in mind that you don't need to use style. It's just a way of avoiding repeated use of the same options for very similar screen elements. But there's nothing wrong ignoring (or removing) the style completely for things you add and coding everything inline with the screen element you're adding. In some ways, it's simpler - since you can play around with options more until you are happy with them. Then when things settle down, there's always the choice to go back and convert things into a style. I say this, as it's very easy to get lost in style parameters and become unsure if the thing you are adding isn't working right due to an actual option and something you hadn't understood about the style statements.

Perhaps just write some imagebutton code you are happy with on a screen of it's own... to test you've coded the button correctly. When you are happy with it, copy/paste it where the textbutton _("Return") statements currently are.

 

[moose_puck]

Keep in mind that all screens are custom screens. It's just that some of them were written by someone else (and sometimes a little overly complex). There are very few screens in RenPy that you couldn't entirely replace with something of your own.

In this case, all you need to do is swap any textbutton _("Return") for an imagebutton with your custom images.
I wrote a guide for a Discord/Patreon button a while ago. 99% of that solution is probably valid here too. At least, the basics.

You might need to tweak the style options a bit, since some style of an imagebutton is different from a textbutton. But a lot of the values (like yalign and xpos) are valid for both.

Also keep in mind that you don't need to use style. It's just a way of avoiding repeated use of the same options for very similar screen elements. But there's nothing wrong ignoring (or removing) the style completely for things you add and coding everything inline with the screen element you're adding. In some ways, it's simpler - since you can play around with options more until you are happy with them. Then when things settle down, there's always the choice to go back and convert things into a style. I say this, as it's very easy to get lost in style parameters and become unsure if the thing you are adding isn't working right due to an actual option and something you hadn't understood about the style statements.

Perhaps just write some imagebutton code you are happy with on a screen of it's own... to test you've coded the button correctly. When you are happy with it, copy/paste it where the textbutton _("Return") statements currently are.

Thanks for the tips. I'm gonna read through that other post of yours and play with it in the morning, when I am fresh. I spent the morning doing graphics and most of the afternoon screwing with Ren'py, lol.

I'm not a coder by any stretch... in fact I feel more like a script kiddie with Python and Ren'py. The only coding I ever really did was way back when I made some websites ... when HTML 4.0 was the current standard. I remember that when CSS started getting popular, it gave me the same headache then as learning Ren'py is doing to me now, lol.

I think I will probably do as you suggest though and redo some of the pages the way I want them. I'll work bit by bit, with the simplest code at first, then when I am comfortable with navigating things, I'll go back and clean things up.

 

[moose_puck]

I did the following change and it's working now....

I changed this section

    textbutton _("Return"):
        style "return_button"

        action Return()

to this ...

    imagebutton:
        yalign 0.95
        xalign 0.95
        auto ("gui/gm_arrow_%s.png")
        action Return()

I had tried something very much like this before my original post but I was getting errors. Now that I took a fresh look, I found that I had commented out a line while troubleshooting and forgot to uncomment it back afterwards. That's what happens when you get tired eyes.

So I downloaded a code diff checker and I am keeping a working copy of all the script files to compare my changes too, so I can catch when I make errors like that again.

 

[79flavors]

    imagebutton:
        yalign 0.95
        xalign 0.95
        auto ("gui/gm_arrow_%s.png")
        action Return()

You might want to change this to:

    imagebutton:
        auto ("gui/gm_arrow_%s.png")
        xpos gui.navigation_xpos
        yalign 1.0
        yoffset -45
        action Return()

Which is closer to the original textbutton.

You might need to tweak the yoffset a bit, depending on the size of your replacement image.
The yalign 1.0 is effectively "put this at the bottom of the screen". Then the yoffset -45 moves it up by 45 units.

Honestly, I doubt you'd see much difference. Except the use of xpos gui.navigation_xpos allows for the menu bar to be moved around a bit. That is, if the menu bar is moved... the [Return] button would move with it. If you're happy with what you already have... stick with it. I mention it, only to draw a direct line between the original and it's replacement.

 

[moose_puck]

Thanks for the tip about navigation_xpos. I'll remember that one. But for my return button, I actually moved it off the navigation menu to the lower right corner of the screen. Seems more intuitive to me, as you select one of the buttons on the left (for example - Save, then you move right to pick the save slot, then you can hit the nice return arrow there in the corner)

0.95 seemed to be my sweet spot for positioning when i tried in different sized windows.