Multiple versions of hover

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
clannadman

Multiple versions of hover

#1 Post by clannadman » Sat Jul 16, 2011 12:28 pm

Basically what I'm trying to do is have different versions of the hover screen so that when you hover over a certain hotspot link, the background changes to an image that represents that choice. I want to try this on my Bonus menu which I am creating in screens and is so far using the standard code:

Code: Select all

screen bonus:

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

    # The background of the main menu.
    
    imagemap:
        hover "bonus_hover.png"
        idle "bonus_idle.png"
        ground "bonus_ground.png"
        
        hotspot (417, 247, 126, 22) action ShowMenu ("thoughts")
        hotspot (420, 282, 122, 25) action ShowMenu ("gallery")
        hotspot (444, 317, 66, 29) action ShowMenu ("music_room")
        hotspot (444, 317, 66, 29) action ShowMenu ("culture")
        hotspot (452, 354, 55, 29) action Return ()
Is it possible to have a different hover image for 'thoughts' and for 'gallery' etc.?

Here are some image examples of what I mean:
example1.png
example2.png

bink
Regular
Posts: 49
Joined: Sat Jul 09, 2011 4:34 pm
Contact:

Re: Multiple versions of hover

#2 Post by bink » Sat Jul 16, 2011 1:07 pm

You can assign a function to the hotspot that is called when you hover over it and have that function change the background image.
Make the function change a variable and make the background image a dynamic displayable that changes depending on that variable.
Something like this: (WARNING: I can't test this right now. There might be some syntax errors in it.)

Code: Select all

python:

    bonus_background_image = some_previously_defined_image # make this your standard image

    def bonus_background(st, at):
        return (bonus_background_image, .1) # returns the currently defined background image and refreshes in .1 seconds
        
    def _set_bonus_background(image): 
        bonus_background_image = image # sets the background image variable
        
    set_bonus_background = renpy.curry(_set_bonus_background)
        
image bonus_bg = DynamicDisplayable(bonus_background) # defines the dynamic displayable

screen bonus:
    tag menu
    imagemap:
        hover bonus_bg # use the same one here, anything else wouldnt make sense
        idle bonus_bg
        ground bonus_bg
        
        hotspot (417, 247, 126, 22) action ShowMenu ("thoughts") hovered set_bonus_background(displayable_goes_here) # give itt a displayable as parameter

User avatar
Showsni
Miko-Class Veteran
Posts: 563
Joined: Tue Jul 24, 2007 12:58 pm
Contact:

Re: Multiple versions of hover

#3 Post by Showsni » Sat Jul 16, 2011 1:07 pm

You mean, a different ground image, right?

Anyway, yes, it's possible; I'd do it like this, using Tooltips:

Code: Select all

    screen bonus:
        default groundpic = Tooltip("bonus_ground.png") 
   
        imagemap:
            
            hover "bonus_hover.png"
            idle "bonus_idle.png"
            ground groundpic.value
        
            hotspot (417, 247, 126, 22) action Return ("thoughts") hovered groundpic.action("thoughtpic.png")
            hotspot (420, 282, 122, 25) action Return ("gallery") hovered groundpic.action("gallerypic.png")
            hotspot (444, 317, 66, 29) action Return ("music_room") hovered groundpic.action("musicpic.png")
            hotspot (444, 317, 66, 29) action Return ("culture") hovered groundpic.action("culturepic.png")
            hotspot (452, 354, 55, 29) action Return ()
Using whatever your picturesa re called, naturally.
Of course, you can change the other default images in the same way.

clannadman

Re: Multiple versions of hover

#4 Post by clannadman » Sat Jul 16, 2011 2:42 pm

@Showsni - your method doesn't seem to have worked. I just get a transparent background showing and no content at all. Help?

User avatar
Showsni
Miko-Class Veteran
Posts: 563
Joined: Tue Jul 24, 2007 12:58 pm
Contact:

Re: Multiple versions of hover

#5 Post by Showsni » Sat Jul 16, 2011 3:18 pm

Hm, well, it works when I tested it (using different image names). Though, the code I posted just returns the value of what was clicked on rather than showing a menu. Could you post the code you used? Are you using the latest Ren'Py?

User avatar
Alex
Lemma-Class Veteran
Posts: 2501
Joined: Fri Dec 11, 2009 5:25 pm
Contact:

Re: Multiple versions of hover

#6 Post by Alex » Sat Jul 16, 2011 3:27 pm

Try

Code: Select all

screen bonus:

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

    # The background of the main menu.
    
    imagemap:
        hover hover_var
        idle idle_var
        ground ground_var
        
        hotspot (417, 247, 126, 22) action ShowMenu ("thoughts") hovered [SetVariable("hover_var", "thoughts_hover.png"), SetVariable("idle_var", "thoughts_idle.png"), SetVariable("ground_var", "thoughts_ground.png")] unhovered [SetVariable("hover_var", "bonus_hover.png"), SetVariable("idle_var", "bonus_idle.png"), SetVariable("ground_var", "bonus_ground.png")] 
        hotspot (420, 282, 122, 25) action ShowMenu ("gallery") hovered [SetVariable("hover_var", "gallery_hover.png"), SetVariable("idle_var", "gallery_idle.png"), SetVariable("ground_var", "gallery_ground.png")] unhovered [SetVariable("hover_var", "bonus_hover.png"), SetVariable("idle_var", "bonus_idle.png"), SetVariable("ground_var", "bonus_ground.png")] 
        hotspot (444, 317, 66, 29) action ShowMenu ("music_room")
        hotspot (444, 317, 66, 29) action ShowMenu ("culture")
        hotspot (452, 354, 55, 29) action Return ()

init:
    $ hover_var = "bonus_hover.png"
    $ idle_var = "bonus_idle.png"
    $ ground_var = "bonus_ground.png"

clannadman

Re: Multiple versions of hover

#7 Post by clannadman » Sat Jul 16, 2011 5:53 pm

@Alex - That seems to work although I'm experiencing some issues with hotspots right now. Can anyone help me understand why things are buggering up like this?

Code: Select all

screen bonus:

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

    # The background of the main menu.
    
    imagemap:
        hover hover_var
        idle idle_var
        ground ground_var
        
        hotspot (103, 320, 131, 22) action ShowMenu ("thoughts") hovered [SetVariable("hover_var", "bonus_hover.png"), SetVariable("idle_var", "bonus_idle.png"), SetVariable("ground_var", "bonus_thought.png")] unhovered [SetVariable("hover_var", "bonus_hover.png"), SetVariable("idle_var", "bonus_idle.png"), SetVariable("ground_var", "bonus_ground.png")] 
        hotspot (103, 355, 107, 22) action ShowMenu ("gallery") hovered [SetVariable("hover_var", "bonus_hover.png"), SetVariable("idle_var", "bonus_idle.png"), SetVariable("ground_var", "bonus_gallery.png")] unhovered [SetVariable("hover_var", "bonus_hover.png"), SetVariable("idle_var", "bonus_idle.png"), SetVariable("ground_var", "bonus_ground.png")] 
        hotspot (103, 391, 130, 22) action ShowMenu ("music_room") hovered [SetVariable("hover_var", "bonus_hover.png"), SetVariable("idle_var", "bonus_idle.png"), SetVariable("ground_var", "bonus_music.png")] unhovered [SetVariable("hover_var", "bonus_hover.png"), SetVariable("idle_var", "bonus_idle.png"), SetVariable("ground_var", "bonus_ground.png")]
        hotspot (103, 427, 199, 22) action ShowMenu ("culture") hovered [SetVariable("hover_var", "bonus_hover.png"), SetVariable("idle_var", "bonus_idle.png"), SetVariable("ground_var", "bonus_culture.png")] unhovered [SetVariable("hover_var", "bonus_hover.png"), SetVariable("idle_var", "bonus_idle.png"), SetVariable("ground_var", "bonus_ground.png")]
        hotspot (462, 425, 68, 22) action Return () hovered [SetVariable("hover_var", "bonus_hover.png"), SetVariable("idle_var", "bonus_idle.png"), SetVariable("ground_var", "bonus_ground.png")] unhovered [SetVariable("hover_var", "bonus_hover.png"), SetVariable("idle_var", "bonus_idle.png"), SetVariable("ground_var", "bonus_ground.png")]

init:
    $ hover_var = "bonus_hover.png"
    $ idle_var = "bonus_idle.png"
    $ ground_var = "bonus_ground.png"
test.jpg

User avatar
Alex
Lemma-Class Veteran
Posts: 2501
Joined: Fri Dec 11, 2009 5:25 pm
Contact:

Re: Multiple versions of hover

#8 Post by Alex » Sat Jul 16, 2011 6:40 pm


clannadman

Re: Multiple versions of hover

#9 Post by clannadman » Sat Jul 16, 2011 8:09 pm

That's sorted it. Thankyou once again Alex :)

Post Reply

Who is online

Users browsing this forum: drKlauz