imagebutton text on hover ?

[sadekhnd]

How to display text on imagebuttons hover?
I would like to make some sort of map and I want that when someone hovers imagebutton,it shows text somwhere else on the screen for example at the bottom.
For example:

imagebutton idle "something.png" xpos 1 ypos 1 focus_mask True action Jump("somewhere")
text "Park - nice spot to walk"

and what more?

hover "text" ?
hovered "text" ?
or show("something ") ?

Please help!

[mitoky]

I am sure there are better ways to do it but one thing i could think of would be to have the text be a image file and make a screen for it.
Like this:

Code: Select all

imagebutton auto "something_%s.png" xpos 1 ypos 1 focus_mask True hovered Show("explanation") unhovered Hide("explanation") action Jump("somewhere") 

screen explanation():
    add "yourexplanationimage.png" xpos x ypos x 

You simply need to have an idle and and hover version of your imagebutton and replace "yourexplanationimage.png" with your file name and replace x with the position you want the explanation to appear at.

Imagebutton files should be named "something_idle.png" and "something_hover.png".
Cant test it right now but should work i think.

[Imperf3kt]

I'd use tooltips

Here's some copy/pasted code from something I was recently working on:

Code: Select all

#Make Tooltip available for all screens
init offset = -2
default tt = Tooltip("")

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

## Navigation screen ###########################################################
##
## This screen is included in the main and game menus, and provides navigation
## to other menus, and to start the game.

screen navigation():

    vbox:
        style_prefix "navigation"

        xpos gui.navigation_xpos
        yalign 0.5

        spacing gui.navigation_spacing

        if main_menu:

            imagebutton alt "start a new game" auto "gui/button/start_%s.png" focus_mask True action Start() hover_sound "audio/click.wav" hovered tt.Action("Start a new game.")

        else:

            imagebutton alt "view previous dialogue" auto "gui/button/history_%s.png" focus_mask True action ShowMenu("history") hover_sound "audio/click.wav" hovered tt.Action("View Previous dialogue.")

            imagebutton alt "save your progress" auto "gui/button/save_%s.png" focus_mask True action ShowMenu("save") hover_sound "audio/click.wav" hovered tt.Action("Save your progress.")

        imagebutton alt "load a previously saved game" auto "gui/button/load_%s.png" focus_mask True action ShowMenu("load") hover_sound "audio/click.wav" hovered tt.Action("Load a previously saved game.")
        
        imagebutton alt "extras" auto "gui/button/extras_%s.png" focus_mask True action ShowMenu("extras") hover_sound "audio/click.wav" hovered tt.Action("Extra goodies!")

        imagebutton alt "change preferences" auto "gui/button/options_%s.png" focus_mask True action ShowMenu("preferences") hover_sound "audio/click.wav" hovered tt.Action("Change preferences.")

        if _in_replay:

            textbutton _("End Replay") action EndReplay(confirm=True) hover_sound "audio/click.wav"

        elif not main_menu:

            imagebutton alt "return to the main menu" auto "gui/button/mm_%s.png" focus_mask True action MainMenu() hover_sound "audio/click.wav" hovered tt.Action("Return to the Main Menu.")

        if not renpy.get_screen("about"):
            imagebutton alt "more information about this game" auto "gui/button/more_%s.png" focus_mask True action ShowMenu("about") hover_sound "audio/click.wav" hovered tt.Action("More information about this game.")
        else:
            imagebutton alt "view copyright information" auto "gui/button/legal_%s.png" focus_mask True action ShowMenu("copyright") hover_sound "audio/click.wav" hovered tt.Action("View copyright information.")

        if renpy.variant("pc"):

            if not renpy.get_screen("about"):
                ## Help isn't necessary or relevant to mobile devices.
                imagebutton alt "how to play" auto "gui/button/help_%s.png" focus_mask True action ShowMenu("help") hover_sound "audio/click.wav" hovered tt.Action("How to play.")
            else:
                ## Updates via this button are for PC only
                imagebutton alt "check for updates" auto "gui/button/update_%s.png" focus_mask True action updater.Update("http://sifter.whatbox.ca:12537/renpy/cgtut/updates.json") hovered tt.Action("Check for updates.")
            

            ## The quit button is banned on iOS and unnecessary on Android. We also only want it to show while a player is at the main menu.
            if main_menu:
                imagebutton alt "close application" auto "gui/button/quit_%s.png" focus_mask True action Quit(confirm=not main_menu) hover_sound "audio/click.wav" hovered tt.Action("Close application.")
                


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")
    

## Main Menu screen ############################################################
##
## Used to display the main menu when Ren'Py starts.
##
## http://www.renpy.org/doc/html/screen_special.html#main-menu

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
    
    ## This displays the tooltip message when hovering the main menu buttons.
    ## It is repeated within the navigation screen so it shows on other screens as well.
    vbox:
        style_prefix "ttip"
        
        text tt.value

    ## The use statement includes another screen inside this one. The actual
    ## contents of the main menu are in the navigation screen.
    use navigation


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_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")

## Game Menu screen ############################################################
##
## This lays out the basic common structure of a game menu screen. It's called
## with the screen title, and displays the background, title, and navigation.
##
## The scroll parameter can be None, or one of "viewport" or "vpgrid". When
## this screen is intended to be used with one or more children, which are
## transcluded (placed) inside it.

screen game_menu(title, scroll=None):

    style_prefix "game_menu"

    if main_menu:
        add gui.main_menu_background
    else:
        add gui.game_menu_background

    frame:
        style "game_menu_outer_frame"

        hbox:

            ## Reserve space for the navigation section.
            frame:
                style "game_menu_navigation_frame"

            frame:
                style "game_menu_content_frame"
                

                if scroll == "viewport":

                    viewport:
                        scrollbars "vertical"
                        mousewheel True
                        draggable True

                        side_yfill True

                        vbox:
                            transclude

                elif scroll == "vpgrid":

                    vpgrid:
                        cols 1
                        yinitial 1.0

                        scrollbars "vertical"
                        mousewheel True
                        draggable True

                        side_yfill True

                        transclude

                else:

                    transclude

    use navigation
    
    vbox:
        style_prefix "ttip"
    
        text tt.value

    imagebutton alt "back" auto "gui/button/back_%s.png" focus_mask True hovered tt.Action("Close this screen."):
        style "return_button"

        action Return()

    if main_menu:
        key "game_menu" action ShowMenu("main_menu")


style game_menu_outer_frame is empty
style game_menu_navigation_frame is empty
style game_menu_content_frame is empty
style game_menu_viewport is gui_viewport
style game_menu_side is gui_side
style game_menu_scrollbar is gui_vscrollbar

style game_menu_label is gui_label
style game_menu_label_text is gui_label_text

style return_button is navigation_button
style return_button_text is navigation_button_text

style game_menu_outer_frame:
    bottom_padding 133
    top_padding 118

    background "gui/overlay/game_menu.png"

style game_menu_navigation_frame:
    xsize 499
    yfill True

style game_menu_content_frame:
    left_margin 30
    right_margin 30
    top_margin 15

style game_menu_viewport:
    xsize 1380

style game_menu_vscrollbar:
    unscrollable gui.unscrollable

style game_menu_side:
    spacing 15

style game_menu_label:
    xpos 75
    ysize 180

style game_menu_label_text:
    size gui.title_text_size
    color gui.accent_color
    yalign 0.5

style return_button:
    xpos gui.navigation_xpos
    yalign 1.0
    yoffset -45

style ttip_vbox:
    xpos 550
    ypos 1015
    text_align 0.0
    
style ttip_text:
    size 45

The result is that whenever I hover an imagebutton, text appears in a desired location, stating whatever I wrote within tt.Action("") of the imagebutton, such as in the image below.

I understand the above is specific to my game, but it was to give you a working example.

Here are the important bits:

At the very top of screens.rpy

Code: Select all

#Make Tooltip available for all screens
init offset = -2
default tt = Tooltip("")

Without this, Ren'Py will throw an error. Using it outside an init -2 or less, will have no effect (At least, not the desired effect)

In main menu:

Code: Select all

    ## This displays the tooltip message when hovering the main menu buttons.
    ## It is repeated within the navigation screen so it shows on other screens as well.
    vbox:
        style_prefix "ttip"
        
        text tt.value
        

Comment says it all.

Within game menu

Code: Select all

    vbox:
        style_prefix "ttip"
    
        text tt.value
      
##################
        
style ttip_vbox:
    xpos 550
    ypos 1015
    text_align 0.0
    
style ttip_text:
    size 45
    

The first part of the code ensures the tooltip is available on all screens, the second part will adjust where the tooltip appears and the size of the text. The second part can go anywhere.

An example imagebutton, taken from the navigation screen.

Code: Select all

imagebutton alt "start a new game" auto "gui/button/start_%s.png" focus_mask True action Start() hover_sound "audio/click.wav" hovered tt.Action("Start a new game.")

The important part is the hovered tt.Action("")


For your specific use, you probably want to create a new screen, and add this function to that screen.

[sadekhnd]

Thank you Mitoky, thank you Imperf3kt

Mitoky,your idea is simple and it works.
I have to also hide screen explanation after click on imagebutton but it works.

Imperf3kt, I'll try your way at the weekend but ty for your afford