How to create my own button on the main menu

[Deleted member 833183]

Hi,
I'm trying to make a Patreon button on the game main menu that connects the user to my patron page.
Is there an easy way to do it?

 

[Epadder]

In screens.rpy you need to find screen main_menu():
and add somewhere within something like the following.

screen main_menu():
    #### OTHER SCREEN CODE
    imagebutton:
        idle "AnImageWhenTheMouseIsn'tOverIt.EXT"
        hover "AnImageWhenTheMouseIsHoveringOverIt.EXT"
        action OpenURL("http://yoururlhere")
        xalign 0.99
        yalign 0.99

At minimum you need 1 image for this to work and have it as the 'idle' image, hover is only if you want to have the image change when you mouse over the image.
The current xalign and yalign values will place the button in the bottom right corner.
You can read up more on screen language in the Ren'py Documentation on

You must be registered to see the links

 

[Winterfire]

You can also have a textbutton, same code as above but instead of imagebutton, you'd have:
textbutton "Patreon":

 

[HiEv]

Hi,
I'm trying to make a Patreon button on the game main menu that connects the user to my patron page.
Is there an easy way to do it?

Which game engine are you using?

You should probably tag your post for that game engine and mention that somewhere in the first post.

 

[Deleted member 833183]

Which game engine are you using?

You should probably tag your post for that game engine and mention that somewhere in the first post.

i'm using renpy

 

[Deleted member 833183]

In screens.rpy you need to find screen main_menu():
and add somewhere within something like the following.

screen main_menu():
    #### OTHER SCREEN CODE
    imagebutton:
        idle "AnImageWhenTheMouseIsn'tOverIt.EXT"
        hover "AnImageWhenTheMouseIsHoveringOverIt.EXT"
        action OpenURL("http://yoururlhere")
        xalign 0.99
        yalign 0.99

At minimum you need 1 image for this to work and have it as the 'idle' image, hover is only if you want to have the image change when you mouse over the image.
The current xalign and yalign values will place the button in the bottom right corner.
You can read up more on screen language in the Ren'py Documentation on

You must be registered to see the links

It works! however I cannot see the button why is that? I'am using the button in the attachment

 

[Epadder]

It works, but you can't see it.... Anyway...
Using this code:

screen main_menu():

    ## This ensures that any other menu screen is replaced.
    tag menu

    style_prefix "main_menu"

    add gui.main_menu_background

    ## This empty frame darkens the main menu.
    frame:
        pass

    ## The use statement includes another screen inside this one. The actual
    ## contents of the main menu are in the navigation screen.
    use navigation
    imagebutton:
        idle "Button.PNG"
        action OpenURL("http://www.youtube.com")
        xalign 0.99
        yalign 0.99

    if gui.show_name:

        vbox:
            text "[config.name!t]":
                style "main_menu_title"

            text "[config.version]":
                style "main_menu_version"


style main_menu_frame is empty
style main_menu_vbox is vbox
style main_menu_text is gui_text
style main_menu_title is main_menu_text
style main_menu_version is main_menu_text

style main_menu_frame:
    xsize 420
    yfill True

    background "gui/overlay/main_menu.png"

style main_menu_vbox:
    xalign 1.0
    xoffset -30
    xmaximum 1200
    yalign 1.0
    yoffset -30

style main_menu_text:
    properties gui.text_properties("main_menu", accent=True)

style main_menu_title:
    properties gui.text_properties("title")

style main_menu_version:
    properties gui.text_properties("version")

With that Image I get this:

 

[JohnDupont]

In screens.rpy you need to find screen main_menu():
and add somewhere within something like the following.

screen main_menu():
    #### OTHER SCREEN CODE
    imagebutton:
        idle "AnImageWhenTheMouseIsn'tOverIt.EXT"
        hover "AnImageWhenTheMouseIsHoveringOverIt.EXT"
        action OpenURL("http://yoururlhere")
        xalign 0.99
        yalign 0.99

At minimum you need 1 image for this to work and have it as the 'idle' image, hover is only if you want to have the image change when you mouse over the image.
The current xalign and yalign values will place the button in the bottom right corner.
You can read up more on screen language in the Ren'py Documentation on

You must be registered to see the links

Wouldn't it be better to put the imagebutton in 'screen navigation():' with all the other buttons rather than in 'screen main_menu():'?

 

[Epadder]

Navigation on an unedited UI is both the Title Screen (Main Menu) and The In-Game Menu, if you always wanted that link there then sure?
I'd just make it a textbutton in that case like so:

screen navigation():

    vbox:
        style_prefix "navigation"

        xpos gui.navigation_xpos
        yalign 0.5

        spacing gui.navigation_spacing
        if main_menu:

            textbutton _("Start") action Start()

        else:
            textbutton _("History") action ShowMenu("history")

            textbutton _("Save") action ShowMenu("save")

        textbutton _("Load") action ShowMenu("load")

        textbutton _("Config") action ShowMenu("preferences")

        if _in_replay:

            textbutton _("End Replay") action EndReplay(confirm=True)

        elif not main_menu:

            textbutton _("Main Menu") action MainMenu()

        textbutton _("Renpy") action ShowMenu("about")
        ### EDITED PART OF NAVIGATION###
        textbutton _("Patreon") action action OpenURL("THEURLHERE")

        if renpy.variant("pc"):

            ## Help isn't necessary or relevant to mobile devices.
            textbutton _("Controls") action ShowMenu("help")

            ## The quit button is banned on iOS and unnecessary on Android.
            textbutton _("Exit") action Quit(confirm=not main_menu)


style navigation_button is gui_button
style navigation_button_text is gui_button_text

style navigation_button:
    size_group "navigation"
    properties gui.button_properties("navigation_button")

style navigation_button_text:
    properties gui.button_text_properties("navigation_button")

I also defaulted to not using Navigation because in my project the Main Menu and Navigation are styled differently.

 

[JohnDupont]

Navigation on an unedited UI is both the Title Screen (Main Menu) and The In-Game Menu, if you always wanted that link there then sure?
I'd just make it a textbutton in that case like so:

screen navigation():

    vbox:
        style_prefix "navigation"

        xpos gui.navigation_xpos
        yalign 0.5

        spacing gui.navigation_spacing
        if main_menu:

            textbutton _("Start") action Start()

        else:
            textbutton _("History") action ShowMenu("history")

            textbutton _("Save") action ShowMenu("save")

        textbutton _("Load") action ShowMenu("load")

        textbutton _("Config") action ShowMenu("preferences")

        if _in_replay:

            textbutton _("End Replay") action EndReplay(confirm=True)

        elif not main_menu:

            textbutton _("Main Menu") action MainMenu()

        textbutton _("Renpy") action ShowMenu("about")
        ### EDITED PART OF NAVIGATION###
        textbutton _("Patreon") action action OpenURL("THEURLHERE")

        if renpy.variant("pc"):

            ## Help isn't necessary or relevant to mobile devices.
            textbutton _("Controls") action ShowMenu("help")

            ## The quit button is banned on iOS and unnecessary on Android.
            textbutton _("Exit") action Quit(confirm=not main_menu)


style navigation_button is gui_button
style navigation_button_text is gui_button_text

style navigation_button:
    size_group "navigation"
    properties gui.button_properties("navigation_button")

style navigation_button_text:
    properties gui.button_text_properties("navigation_button")

I also defaulted to not using Navigation because in my project the Main Menu and Navigation are styled differently.

It's not really a problem if you're using the condition "if main_menu:", is it? I mean, if you aren't using 2 customised screens, I find it easier to have all the buttons in a single navigation screen.

 

[Epadder]

If you wanted it in the lower right corner and as an image, if the button is put in navigation even with "if main_menu:" this happens when you choose any of the options (besides Start).



You could make sure the image is correctly sized and placed specifically to avoid this of course, but that is creating more potential problems when you could just avoid them by putting it on the screen where the button is most relevant.

For me my main_menu and my navigation are so different I wouldn't just try and use a condition to control something showing up.

 

[Deleted member 833183]

It works, but you can't see it.... Anyway...
Using this code:

screen main_menu():

    ## This ensures that any other menu screen is replaced.
    tag menu

    style_prefix "main_menu"

    add gui.main_menu_background

    ## This empty frame darkens the main menu.
    frame:
        pass

    ## The use statement includes another screen inside this one. The actual
    ## contents of the main menu are in the navigation screen.
    use navigation
    imagebutton:
        idle "Button.PNG"
        action OpenURL("http://www.youtube.com")
        xalign 0.99
        yalign 0.99

    if gui.show_name:

        vbox:
            text "[config.name!t]":
                style "main_menu_title"

            text "[config.version]":
                style "main_menu_version"


style main_menu_frame is empty
style main_menu_vbox is vbox
style main_menu_text is gui_text
style main_menu_title is main_menu_text
style main_menu_version is main_menu_text

style main_menu_frame:
    xsize 420
    yfill True

    background "gui/overlay/main_menu.png"

style main_menu_vbox:
    xalign 1.0
    xoffset -30
    xmaximum 1200
    yalign 1.0
    yoffset -30

style main_menu_text:
    properties gui.text_properties("main_menu", accent=True)

style main_menu_title:
    properties gui.text_properties("title")

style main_menu_version:
    properties gui.text_properties("version")

With that Image I get this:
View attachment 183525

Thanks for the help! I managed it.

 

[macadam]

just in case for who want to know...

you can use imagemap too.. wich is wayyy more easy than the complicated imagebutton.
you just have to script the position of the active spot, and when your mouse hover the button it change, and if you clic on it, it link to whatever you want.
( that's what i based my sandbox stuff on.. my sandbox stuff is way more complicated than that, but standard imagemap is extremly easy to use and create.

 

[Deleted member 833183]

Do you mean the developers menu?

 

[macadam]

Do you mean the developers menu?

you asked for main menu right ?
where they are the "start, continu, load,etc..

then its possible to make imagemap too.

here a bit of explication.

You must be registered to see the links

you just put your 2 screen and you add the hotspot area on the button place and its done. then you just link thoses hotspot to whatever you want to link them on (the game, the setting menu, patreon or whatever..)

way more easy than creating a bunch of imagebutton.

just my opinion.. ( i m pretty noob too, and for me, it was more easy that way )

 

[TessSadist]

I'm seeing this two years later but this really really helped me!! Thank you very late!

 

[Lucrezia&Augusto]

I'm seeing this two years later but this really really helped me!! Thank you very late!

TessSadist
I saw your congratulations game is very beautiful.

 

[Deleted member 576146]

Thank You,
This topic/thread has helped me