Custom Option Buttons

[neometalero]

I was reading the documentation of the GUI

https://www.renpy.org/doc/html/gui.html ... ht=borders

And I can't find any way to use different styles of buttons.
I want to create an effect like this in the options.



To have the picture of the character on the side of the button.

Any idea on how to do this? Tks!

[namastaii]

You would create each button in photoshop (or another program) and define the button in the game to reference that image in your files. You can either do this replacing buttons already programmed in the game or create your own button group for this.

Here is some documentation of what that looks like:
https://videlais.com/2018/07/12/advance ... agebutton/

In this case, you'd want an imagebutton. You can even make different versions of the button to show when it's actively being clicked/hovered over.
This is more in depth about imagebuttons:
https://www.renpy.org/doc/html/screens.html#imagebutton

And this:
http://fuckyeahrenpy.tumblr.com/post/98 ... -main-menu

This is for story choice buttons specifically:
https://www.renpy.org/doc/html/gui.html#choice-menus

I hope this isn't too confusing, I think there are probably multiple ways to format this.

To clarify on the adding the small image to the side - I'd just simply do that in photoshop. Make the whole button there and have one image to reference in the game. Shouldn't need to complicate it more than that really. Trim the image so it's just the size the button needs to be besides the transparency that will be filled in on the bottom and top of the purple bar since the image you're adding to the side is taller if that makes sense.


****edit: I feel so bad for explaining this badly because I just haven't done this in forever but I've made a TON of custom imagebuttons in the past.

[neometalero]

You would create each button in photoshop (or another program) and define the button in the game to reference that image in your files. You can either do this replacing buttons already programmed in the game or create your own button group for this.

Here is some documentation of what that looks like:
https://videlais.com/2018/07/12/advance ... agebutton/

In this case, you'd want an imagebutton. You can even make different versions of the button to show when it's actively being clicked/hovered over.
This is more in depth about imagebuttons:
https://www.renpy.org/doc/html/screens.html#imagebutton

And this:
http://fuckyeahrenpy.tumblr.com/post/98 ... -main-menu

This is for story choice buttons specifically:
https://www.renpy.org/doc/html/gui.html#choice-menus

I hope this isn't too confusing, I think there are probably multiple ways to format this.

To clarify on the adding the small image to the side - I'd just simply do that in photoshop. Make the whole button there and have one image to reference in the game. Shouldn't need to complicate it more than that really. Trim the image so it's just the size the button needs to be besides the transparency that will be filled in on the bottom and top of the purple bar since the image you're adding to the side is taller if that makes sense.


****edit: I feel so bad for explaining this badly because I just haven't done this in forever but I've made a TON of custom imagebuttons in the past.

Tks a lot for responding, this is a lot of information but I will do my best. You were of great help. If I have any doubts I will post it here.

[neometalero]

One thing , after I define the buttons on the screen file, how do I write on the script that I want to use this button now for this option in this question and the other kind for the other option???

[namastaii]

Are you using the button on a screen or in an in-game choice? I think you're asking about the choices. I don't fully remember but let me look into it real quick.


edit: duh, the choice menu actually IS a screen just like the rest of them.

Code: Select all

screen choice(items):
    style_prefix "choice"

    vbox:
        for i in items:
            if " (custom)" in i.caption:
                button:
                    action i.action
                    style "menu_choice_custom_button"
                    text i.caption.replace(" (custom)", "") style "menu_choice_custom_text"

            else:
                textbutton i.caption action i.action

You could probably do something like this. but if every button is going to be different than you'll need to assign that style to each one and it could get a little confusing. My opinion would to just create a screen that opens at a certain point in the dialogue that you create in photoshop or something and have the pictures there and such for them to pick and when a button is pressed, you set that variable and close the screen. Does that make sense? This is how I would do it. It'd be more straight forward.

[neometalero]

Are you using the button on a screen or in an in-game choice? I think you're asking about the choices. I don't fully remember but let me look into it real quick.


edit: duh, the choice menu actually IS a screen just like the rest of them.

Code: Select all

screen choice(items):
    style_prefix "choice"

    vbox:
        for i in items:
            if " (custom)" in i.caption:
                button:
                    action i.action
                    style "menu_choice_custom_button"
                    text i.caption.replace(" (custom)", "") style "menu_choice_custom_text"

            else:
                textbutton i.caption action i.action

You could probably do something like this. but if every button is going to be different than you'll need to assign that style to each one and it could get a little confusing. My opinion would to just create a screen that opens at a certain point in the dialogue that you create in photoshop or something and have the pictures there and such for them to pick and when a button is pressed, you set that variable and close the screen. Does that make sense? This is how I would do it. It'd be more straight forward.

Yes, that make sense, tks a lot for your help. I think with that I will be able to do it.