Stuck on ui.imagebuttons - need help!

[Bryy]

Okay, so I was making my game's menu look all pretty, and I went to test my new menu that I just did up using ui.imagebutton, and thank the Gods I did not get an error, but I got this:



So obviously it's still taking cues from my theme. And no matter where I click, it always starts the game.

This is my code:



So, the problems are:

1) how do i get rid of the green borders
2) how do I get the images to properly jump to their right spots

At this point, I don't care about looking like an idiot or a n00b (I'm both). I just need help!

[Chrizine]

Try to add a background None to your frame and see if it helps against the green borders:

Code: Select all

# The main menu buttons.
frame background None:

I'm not quite sure what you mean by
2) how do I get the images to properly jump to their right spots
- Could you explain what you want it to look like or draw a mock-up?

[Elmiwisa]

Uh, why do you decide to take screenshot of your code, instead of pasting it? Someone who want to fix your code directly will need to re-type everything.
Why using ui.imagebutton when there is a perfectly serviceable imagebutton around? Both are the same anyway, but ui.imagebutton don't look as nice.
I am not sure why you think ui.returns would do what you want. Look at the original menu (which you commented out below). It uses action like Start() and ShowMenu("load") and such, which is why they do the correct action. Simply mimic them would have done the job.
I am not sure what green border are you talking about. All the letters have black border. If that is what you want to remove then you have to edit your own picture. The frame have green background, but it looks like it was hand-drawn so I am not sure if this is what you want to remove. If the green background on the frame is what you are talking about, replace it with something that do not have a background. A vbox would be perfect, just remove the has vbox line once you are done because unlike frame, vbox don't accept it.

[Bryy]

Uh, why do you decide to take screenshot of your code, instead of pasting it?

Sorry. Here:

Code: Select all

##############################################################################
# Main Menu 
#
# Screen that's used to display the main menu, when Ren'Py first starts
# http://www.renpy.org/doc/html/screen_special.html#main-menu

screen main_menu:
    $ init_variables()

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

    # The background of the main menu.
    window:
        style "mm_root"
        add "media_assets/ui/AoT Start Title.png" xpos 100 ypos 34 zoom 0.8
        add "media_assets/chara/Zadok Allen.png" xpos 250 ypos 150 zoom 0.8

    # The main menu buttons.
    frame background None:
        style_group "mm"
        xalign .68
        yalign .89

        has vbox
        
        $ui.imagebutton ("media_assets/ui/start_menu.png", "media_assets/ui/start_menu.png", clicked=ui.returns ("start") 
        $ui.imagebutton ("media_assets/ui/load_menu.png", "media_assets/ui/load_menu.png", clicked=ui.returns ("load") 
        $ui.imagebutton ("media_assets/ui/op_menu.png", "media_assets/ui/op_menu.png", clicked=ui.returns ("prefs")  
        $ui.imagebutton ("media_assets/ui/quit_menu.png", "media_assets/ui/quit_menu.png", clicked=ui.returns ("quit")
        #$textbutton _("Start Game") action Start()
        #textbutton _("Load Game") action ShowMenu("load")
        #textbutton _("Options") action ShowMenu("preferences")
        #textbutton _("Quit") action Quit(confirm=False)

init -2 python:

    # Make all the main menu buttons be the same size.
    style.mm_button.size_group = "mm"


##########################################

Try to add a background None to your frame and see if it helps against the green borders:

Code: Select all

# The main menu buttons.
frame background None:

Worked great, thanks!

I'm not quite sure what you mean by
2) how do I get the images to properly jump to their right spots
- Could you explain what you want it to look like or draw a mock-up?

What I mean is they are all starting the game instead of linking to options, quit, load. It does not matter which one I click.

[Elmiwisa]

Code: Select all

##############################################################################
# Main Menu
#
# Screen that's used to display the main menu, when Ren'Py first starts
# http://www.renpy.org/doc/html/screen_special.html#main-menu

screen main_menu:
    $ init_variables() #<----this is probably a bad idea

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

    # The background of the main menu.
    window:
        style "mm_root"
        add "media_assets/ui/AoT Start Title.png" xpos 100 ypos 34 zoom 0.8
        add "media_assets/chara/Zadok Allen.png" xpos 250 ypos 150 zoom 0.8

    # The main menu buttons.
    vbox: #<---use vbox right here, no need for frame, the frame is only because you want the background
        xalign .68
        yalign .89

        #no need for has vbox here
       
        $ui.imagebutton ("media_assets/ui/start_menu.png", "media_assets/ui/start_menu.png", clicked=Start()) #<----just like a normal button
        $ui.imagebutton ("media_assets/ui/load_menu.png", "media_assets/ui/load_menu.png", clicked=ShowMenu("load"))
        $ui.imagebutton ("media_assets/ui/op_menu.png", "media_assets/ui/op_menu.png", clicked=ShowMenu("preferences"))
        $ui.imagebutton ("media_assets/ui/quit_menu.png", "media_assets/ui/quit_menu.png", clicked=Quit(confirm=False))
        
        #$textbutton _("Start Game") action Start()            <----look how the action are defined to make button work
        #textbutton _("Load Game") action ShowMenu("load")
        #textbutton _("Options") action ShowMenu("preferences")
        #textbutton _("Quit") action Quit(confirm=False)

init -2 python:

    # Make all the main menu buttons be the same size.
    style.mm_button.size_group = "mm"


##########################################

[Bryy]

Code: Select all

        $ui.imagebutton ("media_assets/ui/start_menu.png", "media_assets/ui/start_menu.png", clicked=ui.returns ("start") ) action Start()
        $ui.imagebutton ("media_assets/ui/load_menu.png", "media_assets/ui/load_menu.png",clicked=ui.returns ("load") ) action ShowMenu("load")
        $ui.imagebutton ("media_assets/ui/op_menu.png", "media_assets/ui/op_menu.png",clicked=ui.returns ("prefs") ) action ShowMenu("preferences")
        $ui.imagebutton ("media_assets/ui/quit_menu.png", "media_assets/ui/quit_menu.png",clicked=ui.returns ("quit") ) action Quit(confirm=False)

Like this? Or:

Code: Select all

        $ui.imagebutton ("media_assets/ui/start_menu.png", "media_assets/ui/start_menu.png", clicked=ui.returns ("start") action Start()
        $ui.imagebutton ("media_assets/ui/load_menu.png", "media_assets/ui/load_menu.png",clicked=ui.returns ("load") action ShowMenu("load")
        $ui.imagebutton ("media_assets/ui/op_menu.png", "media_assets/ui/op_menu.png",clicked=ui.returns ("prefs") action ShowMenu("preferences")
        $ui.imagebutton ("media_assets/ui/quit_menu.png", "media_assets/ui/quit_menu.png",clicked=ui.returns ("quit") action Quit(confirm=False)

This?

[Elmiwisa]

No no no.
Either this (just like how I did above):

Code: Select all

        $ui.imagebutton ("media_assets/ui/start_menu.png", "media_assets/ui/start_menu.png", clicked=Start())
        $ui.imagebutton ("media_assets/ui/load_menu.png", "media_assets/ui/load_menu.png", clicked=ShowMenu("load"))
        $ui.imagebutton ("media_assets/ui/op_menu.png", "media_assets/ui/op_menu.png", clicked=ShowMenu("preferences"))
        $ui.imagebutton ("media_assets/ui/quit_menu.png", "media_assets/ui/quit_menu.png", clicked=Quit(confirm=False))

or this:

Code: Select all

        imagebutton idle "media_assets/ui/start_menu.png" hover "media_assets/ui/start_menu.png" action Start()
        imagebutton idle "media_assets/ui/load_menu.png" hover "media_assets/ui/load_menu.png" action ShowMenu("load")
        imagebutton idle "media_assets/ui/op_menu.png" hover "media_assets/ui/op_menu.png" action ShowMenu("preferences")
        imagebutton idle "media_assets/ui/quit_menu.png" hover "media_assets/ui/quit_menu.png" action Quit(confirm=False)

Don't mix the 2 style. When you use screen language the keyword is "action", when you use python the parameter is "clicked". But they are all Action nonetheless. So you use Start, ShowMenu and Quit just like how the original menu does it.
And why do you insist on using ui.returns anyway? Is there a particular reason you need it to be there?

[Bryy]

And why do you insist on using ui.returns anyway? Is there a particular reason you need it to be there?

I was researching how to do it (make custom buttons for the menu) and this seemed like the way to go.

EDIT: It worked, thank you.