Custom Option Buttons

Discuss how to use the Ren'Py engine to create visual novels and story-based games. New releases are announced in this section.
Forum rules
This is the right place for Ren'Py help. Please ask one question per thread, use a descriptive subject like 'NotFound error in option.rpy' , and include all the relevant information - especially any relevant code and traceback messages. Use the code tag to format scripts.
Post Reply
Message
Author
User avatar
neometalero
Regular
Posts: 107
Joined: Sun Oct 23, 2016 3:51 am
Deviantart: neometalero
Contact:

Custom Option Buttons

#1 Post by neometalero » Wed Apr 03, 2019 9:14 pm

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.

Image

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

Any idea on how to do this? Tks!
Working on Attack Helicopter Dating Simulator

Image

User avatar
namastaii
Eileen-Class Veteran
Posts: 1300
Joined: Mon Feb 02, 2015 8:35 pm
Projects: Template Maker for Ren'Py, What Life, Coffea Beans
Github: namastaii
Skype: Discord: lunalucid#7684
Soundcloud: deadseed
itch: lunalucid
Location: USA
Contact:

Re: Custom Option Buttons

#2 Post by namastaii » Thu Apr 04, 2019 7:32 pm

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.

User avatar
neometalero
Regular
Posts: 107
Joined: Sun Oct 23, 2016 3:51 am
Deviantart: neometalero
Contact:

Re: Custom Option Buttons

#3 Post by neometalero » Sat Apr 06, 2019 3:19 pm

namastaii wrote:
Thu Apr 04, 2019 7:32 pm
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.
Working on Attack Helicopter Dating Simulator

Image

User avatar
neometalero
Regular
Posts: 107
Joined: Sun Oct 23, 2016 3:51 am
Deviantart: neometalero
Contact:

Re: Custom Option Buttons

#4 Post by neometalero » Sat Apr 06, 2019 3:34 pm

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???
Working on Attack Helicopter Dating Simulator

Image

User avatar
namastaii
Eileen-Class Veteran
Posts: 1300
Joined: Mon Feb 02, 2015 8:35 pm
Projects: Template Maker for Ren'Py, What Life, Coffea Beans
Github: namastaii
Skype: Discord: lunalucid#7684
Soundcloud: deadseed
itch: lunalucid
Location: USA
Contact:

Re: Custom Option Buttons

#5 Post by namastaii » Sat Apr 06, 2019 3:54 pm

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.

User avatar
neometalero
Regular
Posts: 107
Joined: Sun Oct 23, 2016 3:51 am
Deviantart: neometalero
Contact:

Re: Custom Option Buttons

#6 Post by neometalero » Sat Apr 06, 2019 4:11 pm

namastaii wrote:
Sat Apr 06, 2019 3:54 pm
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.
Working on Attack Helicopter Dating Simulator

Image

Post Reply

Who is online

Users browsing this forum: No registered users