how to add imagebuttons to choice screen

[decray]

as we know the menu statement

menu:
"dasdasdadasdas":
jump asda
"adasqwqeqweqwe":
jump dada

can provide textbuttons
but how can I add imagebuttons
for example

imagebutton idle "button/sel01_p_01.gif" hover "button/sel01_p_02.gif" selected_idle "button/sel01_p_03.gif" selected_hover "button/sel01_p_03.gif" action Jump("sel01_A")

I have tried to create a new screen

screen choice01:

window:
style "menu_window"
area(150,260,650,340)
vbox:
style "menu"
imagebutton ...
imagebutton ...

but menu statement can stop the game and disable click-to-continue while this new screen cannot

[KimiYoriBaka]

if you call the new screen with the "call screen" statement, it should behave the same way. otherwise you can also use the pause statement

if you want to change the screen that comes up when you use the menu statement, go into the screens.rpy file and find the part that says "screen choice"

once you find the right screen go to this part:

Code: Select all

for caption, action, chosen in items:

                if action:

                    button:
                        action action
                        style "menu_choice_button"

                        text caption style "menu_choice"

                else:
                    text caption style "menu_caption"

and change the button into an imagebutton with whatever images you want to use.

[Janto]

I was looking at doing something similar, so I'll join this thread if that's okay to pool experience.

Rather than just having a generic imagebutton which is applied to all items in the choice menu, is it possible to have specific image buttons for specific types of choices (so a 'Flirt' button, a 'Lie' button, etc.), and for the button to be used for each choice to be specified relatively easily when writing the menu choices?

I figure I could hack this code:

Code: Select all

screen buttons:
    modal False
    for b in buttonlist:
        imagebutton:
            xpos b[0] ypos b[1]
            auto (b[2] + "_%s.png")
            action b[3]

Which puts the content of the list 'buttonlist' on screen:

Code: Select all

    buttonlist = [[20, 430, "button_1", [SetVariable("button_1_press", True), Hide("button_1"), Jump("button_1_result")]],
                  [40, 300, "button_2", [SetVariable("button_2_press", True), Hide("button_2"), Jump("button_2_result")]]]

But I would need to set up a new screen for every choice screen then.

(I'd like to have a system where the player is initially only presented with a visual image button that symbolises the topic somehow, and the menu text only appears (for that choice) when they hover over it, but that probably should have its own thread.)

[decray]

I haven't expected call screen to have that function
although I indeed have attempted to modify screen choice
it turns out to be useless when I encounter a more complex choice menu

[Janto]

Here's the code I used for an image-button based menu, with a screenshot of the prototype. (this method is only capable of showing one image for all menu choices at the moment, but I think I'm on track to figure that out.)

The main game code, showing the menu:

Code: Select all

# The game starts here.
label start:

scene grey
show screen bars
show screen tooltip

menu:
    "Image Map Experiment":
        call image_map_exp
    # "Event Manager Experiment.":
        # call event_manager_exp
    "Image Button Experiment": 
        call image_button_exp
    "Menu UI experiment":
        call menu_ui_exp
    "2nd UI experiment":
        call second_menu
    "End Game":
        return
        
jump start

And here's my choice screen:

Code: Select all

# Choice
#
# Screen that's used to display in-game menus.
# http://www.renpy.org/doc/html/screen_special.html#choice

screen choice:

    default tt = Tooltip("")
    
    window: 
        style "menu_window"
        hbox:
            style "menu"
            spacing 20
            
            for caption, action, chosen in items:
                if action:  
                        
                    imagebutton:
                        auto "ui/inquiry_%s.png" action action
                        hovered tt.Action (caption)
                        
                else:
                    imagebutton:
                        auto "ui/inquiry_%s.png" action action
                        hovered tt.Action (caption)
    window:                     
        vbox:
            style "say_vbox"
            text tt.value style "menu_choice"
            
    # Use the quick menu.
    use quick_menu                    
        
init -2 python:
    config.narrator_menu = True
    style.menu_window.set_parent(style.default)
    style.menu_choice.set_parent(style.button_text)
    style.menu_choice.clear()
    style.menu_choice_button.set_parent(style.button)

Because of the visual style of the menues, I've hacked how the 'caption' part of the menu is displayed, showing inside a tooltip which uses the same styles as the say screen to show the caption in the main text box.

Hope that's useful.