Imagemap hover showing two rectangles? [Solved]

[yon]

I was wondering about whether or not it's possible to have two different sections change when you hover over either one.

In my imagemap, you can tell that there are little boxes of text on the bottom, and circles on the top.



Essentially, the textboxes on the bottom are labels of what each above area is. What I want to do is hover over one circle or box, and both light up.

Is this doable? It's a little confusing if you can hover over either the circle and the boxes, but they don't light up at the same time. I mean, then you wouldn't know which ones are which.

[Alex]

The hotspots and buttons are highlighted in their "selected" state, so when you hover one of them try to change some flag-variables to make different hotspots became selected, like

Code: Select all

screen ts:
    default a = False
    default b = False
    
    vbox:    
        textbutton "a" hovered SetScreenVariable("a", True) unhovered SetScreenVariable("a", False) action [Return("A"), SelectedIf(a) ]
        textbutton "b" hovered SetScreenVariable("b", True) unhovered SetScreenVariable("b", False) action [Return("B"), SelectedIf(b) ]
        textbutton "a" hovered SetScreenVariable("a", True) unhovered SetScreenVariable("a", False) action [Return("A"), SelectedIf(a) ]
        textbutton "b" hovered SetScreenVariable("b", True) unhovered SetScreenVariable("b", False) action [Return("B"), SelectedIf(b) ]

http://www.renpy.org/doc/html/screen_ac ... er-actions

[yon]

Ah, the code I'm using is this:

Code: Select all

screen map_imagemap:
    imagemap:
        ground "im/imagemap_ground.png"
        idle "im/imagemap_idle.png"
        hover "im/imagemap_hover.png"
        
        alpha False
        # This is so that everything transparent is invisible to the cursor. 

        hotspot (169, 204, 85, 85) action Return("ai_c")
        hotspot (321, 407, 155, 60) action Return("ai_b")   
        hotspot (17, 105, 85, 85) action Return("ma_c")
        hotspot (0, 427, 155, 60) action Return("ma_b")
        hotspot (80, 306, 85, 85) action Return("ja_c")
        hotspot (0, 537, 155, 60) action Return("ja_b")
        hotspot (125, 120, 85, 85) action Return("ko_c")
        hotspot (162, 427, 155, 60) action Return("ko_b")
        hotspot (193, 283, 79, 77) action Return("pa_c")
        hotspot (162, 537, 155, 60) action Return("pa_b")
        hotspot (0, 315, 85, 85) action Return("po_c")
        hotspot (169, 427, 155, 60) action Return("po_b")
        hotspot (80, 306, 85, 85) action Return("my_c")
        hotspot (169, 537, 155, 60) action Return("my_b")
        hotspot (723, 390, 76, 85) action Return("ol_c")
        hotspot (480, 427, 155, 60) action Return("ol_b")
        hotspot (649, 80, 79, 77) action Return("mar_c")
        hotspot (480, 537, 155, 60) action Return("mar_b")
        hotspot (653, 78, 85, 85) action Return("sh_c")
        hotspot (640, 427, 155, 60) action Return("sh_b")
        hotspot (600, 0, 85, 85) action Return("cl_c")
        hotspot (640, 537, 155, 60) action Return("cl_b")   

I based it on the imagemap code found in the tutorial. The textboxes on the bottom aren't actually functional; they're just part of the image. Would the code you suggested work for an imagemap, too?

[Alex]

Should work - set hovered and unhovered actions for hotspots.

[yon]

Sorry if this sounds weird, but where would I put your code?

Would this:

Code: Select all

screen ts:
    default a = False
    default b = False
    
    vbox:    
        textbutton "a" hovered SetScreenVariable("a", True) unhovered SetScreenVariable("a", False) action [Return("A"), SelectedIf(a) ]
        textbutton "b" hovered SetScreenVariable("b", True) unhovered SetScreenVariable("b", False) action [Return("B"), SelectedIf(b) ]
        textbutton "a" hovered SetScreenVariable("a", True) unhovered SetScreenVariable("a", False) action [Return("A"), SelectedIf(a) ]
        textbutton "b" hovered SetScreenVariable("b", True) unhovered SetScreenVariable("b", False) action [Return("B"), SelectedIf(b) ]

be in a different area of the code? Or would I put it in my original code somewhere? I think the vbox and textbutton parts are throwing me off.

[Alex]

Well, I assume your imagemap has lots of circle hotspots and the same amount of square ones with the places names. So, try to add

Code: Select all

hovered SetScreenVariable("a", True) unhovered SetScreenVariable("a", False) action [Return("ai_c"), SelectedIf(a) ]

to the circle hotspot and to the corresponding square hotspot as well.

(This might be that you also need to add "selected" image for your imagemap)

Code: Select all

screen map_imagemap:
    imagemap:
        ground "im/imagemap_ground.png"
        idle "im/imagemap_idle.png"
        hover "im/imagemap_hover.png"
        selected "im/imagemap_hover.png"

[yon]

Like this?

Code: Select all

        hotspot (169, 204, 85, 85) hovered SetScreenVariable("a", True) unhovered SetScreenVariable("a", False) action [Return("ai_c"), SelectedIf(a) ]

[Alex]

Exactly.

[yon]

So, what does the "a" in the code represent?

If I want to extrapolate and use the same code for the other areas, should it be something like this?

Code: Select all

        hotspot (169, 204, 85, 85) hovered SetScreenVariable("a", True) unhovered SetScreenVariable("a", False) action [Return("ai_c"), SelectedIf(a) ]
        hotspot (321, 407, 155, 60) hovered SetScreenVariable("b", True) unhovered SetScreenVariable("b", False) action [Return("ai_b"), SelectedIf(a) ]   
        hotspot (17, 105, 85, 85) hovered SetScreenVariable("c", True) unhovered SetScreenVariable("c", False) action [Return("ma_c"), SelectedIf(a) ]
        hotspot (0, 427, 155, 60) hovered SetScreenVariable("d", True) unhovered SetScreenVariable("d", False) action [Return("ma_b"), SelectedIf(a) ] 

Or is that incorrect?
I have ai_c and ai_b set up as labels below, but they jump to the same area, same for all the others with the same prefix.

Code: Select all

    if _return == "ai_c":
        jump im_ai
    elif _return == "ai_b":
        jump im_ai

Should I just give them the same label, then? Instead of ai_c for circle and ai_b for box, just ai for the location itself?

[yon]

Update: I tried inputting them with the same return action, but it gave me an error.

Code: Select all

I'm sorry, but errors were detected in your script. Please correct the
errors listed below, and try again.


File "game/script.rpy", line 32: Syntax error while parsing python expression.
    (320, 406, 160, 64 action Return("im_ainami")
                             ^
    

Ren'Py Version: Ren'Py 6.16.1.409

Here's the new code itself.

Code: Select all

# You can place the script of your game in this file.

# Declare images below this line, using the image statement.
# eg. image eileen happy = "eileen_happy.png"

# Declare characters used by this game.
define e = Character('Eileen', color="#c8ffc8")

screen map_imagemap:
    imagemap:
        ground "im/imagemap_ground.png"
        idle "im/imagemap_idle.png"
        hover "im/imagemap_hover.png"
        
        alpha False
        # This is so that everything transparent is invisible to the cursor. 

        #circles
        hotspot (168, 204, 78, 78) action Return("im_ainami")
        hotspot (22, 106, 78, 78) action Return("im_mall")
        hotspot (0, 317, 78, 78) action Return("im_police")
        hotspot (127, 124, 78, 78) action Return("im_konbini")
        hotspot (80, 308, 78, 78) action Return("im_jardin")
        hotspot (291, 196, 78, 78) action Return("im_myoujo")
        hotspot (193, 287, 78, 78) action Return("im_park")
        hotspot (599, 0, 78, 78) action Return("im_alley")
        hotspot (653, 81, 78, 78) action Return("im_shady")
        hotspot (650, 317, 78, 78) action Return("im_market")
        hotspot (723, 393, 78, 78) action Return("im_old")

        #boxes
        hotspot (320, 406, 160, 64 action Return("im_ainami")
        hotspot (1, 471, 160, 64) action Return("im_mall")
        hotspot (1, 535,  160, 64) action Return("im_police")
        hotspot (161, 471,  160, 64) action Return("im_konbini")
        hotspot (161, 535, 160, 64) action Return("im_jardin")
        hotspot (320, 471,  160, 64) action Return("im_myoujo")
        hotspot (320, 535,  160, 64) action Return("im_park")
        hotspot (480, 471,  160, 64) action Return("im_alley")
        hotspot (480, 535,  160, 64) action Return("im_shady")
        hotspot (640, 471,  160, 64) action Return("im_market")
        hotspot (640, 535,  160, 64)) action Return("im_old")
            
label start:

    e "Nice"
    
    window hide None
    call screen map_imagemap
    window show None

    # Call screen assignes the chosen result from the imagemap to the
    # _return variable. We can use an if statement to vary what
    # happens based on the user's choice.

    if _return == "im_ainami":
        jump im_ai
    elif _return == "im_mall":
        jump im_ma
    elif _return == "im_police":
        jump im_po
    elif _return == "im_konbini":
        jump im_ko
    elif _return == "im_jardin":
        jump im_ja        
    elif _return == "im_myoujo":
        jump im_my
    elif _return == "im_park":
        jump im_pa
    elif _return == "im_alley":
        jump im_al
    elif _return == "im_shady":
        jump im_sh
    elif _return == "im_market":
        jump im_mar        
    elif _return == "im_old":
        jump im_ol

label im_ai:
    
    "Went back to Ainami."
    jump im_end
label im_ma:
    
    "Went to the Black Market Mall."
    jump im_end
label im_ja:
    
    "Went to Jardin du Fleurs."
    jump im_end
label im_ko:
    
    "Went to FamilyStar."
    jump im_end
label im_pa:
    
    "Went to Koraku Park."
    jump im_end
label im_po:
    
    "Went to the Police Station."
    jump im_end
label im_my:
    
    "Went to the Myoujoshima Streets."
    jump im_end
label im_ol:
    
    "Went to the Old Streets."
    jump im_end
label im_mar:
    
    "Went to the Alley Market."
    jump im_end
label im_sh:
    
    "Went to the Shady Streets."
    jump im_end
label im_al:
    
    "Went to the Shady Alleyway."
    jump im_end

label im_end:

return

I haven't put in the suggested code quite yet because I wanted to check and see if it was necessary to have ai_b and ai_c, but apparently it is. Also, I opened up gimp and got the exact coordinates, so those are updated too[/s]

Nevermind, it's because I forgot a parenthesis.

[yon]

I tried to add in the code you suggested and it gave me this error:

Code: Select all

I'm sorry, but errors were detected in your script. Please correct the
errors listed below, and try again.


File "game/script.rpy", line 17: u'selected' is not a keyword argument or valid child for the imagemap statement.
    selected "im/imagemap_hover.png"
            ^

Ren'Py Version: Ren'Py 6.16.1.409

I put it where you said I should, but it apparently isn't working? I also tried to go ahead without it, but then it gave me this error:

Code: Select all

I'm sorry, but an uncaught exception occurred.

While running game code:
  File "game/script.rpy", line 52, in script
  File "renpy/common/000statements.rpy", line 481, in python
  File "game/script.rpy", line 22, in python
NameError: name 'a' is not defined

-- Full Traceback ------------------------------------------------------------

Full traceback:
  File "C:\Users\Yon\V-Games\renpy-6.16.1-sdk\renpy\execution.py", line 288, in run
    node.execute()
  File "C:\Users\Yon\V-Games\renpy-6.16.1-sdk\renpy\ast.py", line 1533, in execute
    self.call("execute")
  File "C:\Users\Yon\V-Games\renpy-6.16.1-sdk\renpy\ast.py", line 1546, in call
    renpy.statements.call(method, parsed, *args, **kwargs)
  File "C:\Users\Yon\V-Games\renpy-6.16.1-sdk\renpy\statements.py", line 144, in call
    return method(parsed, *args, **kwargs)
  File "renpy/common/000statements.rpy", line 481, in execute_call_screen
    store._return = renpy.call_screen(name, *args, **kwargs)
  File "C:\Users\Yon\V-Games\renpy-6.16.1-sdk\renpy\exports.py", line 1802, in call_screen
    rv = renpy.ui.interact(mouse="screen", type="screen", roll_forward=roll_forward)
  File "C:\Users\Yon\V-Games\renpy-6.16.1-sdk\renpy\ui.py", line 237, in interact
    rv = renpy.game.interface.interact(roll_forward=roll_forward, **kwargs)
  File "C:\Users\Yon\V-Games\renpy-6.16.1-sdk\renpy\display\core.py", line 1864, in interact
    scene_lists.replace_transient()
  File "C:\Users\Yon\V-Games\renpy-6.16.1-sdk\renpy\display\core.py", line 554, in replace_transient
    self.remove(layer, tag)
  File "C:\Users\Yon\V-Games\renpy-6.16.1-sdk\renpy\display\core.py", line 828, in remove
    self.hide_or_replace(layer, remove_index, "hide")
  File "C:\Users\Yon\V-Games\renpy-6.16.1-sdk\renpy\display\core.py", line 752, in hide_or_replace
    d = oldsle.displayable._hide(now - st, now - at, prefix)
  File "C:\Users\Yon\V-Games\renpy-6.16.1-sdk\renpy\display\screen.py", line 189, in _hide
    hid.update()
  File "C:\Users\Yon\V-Games\renpy-6.16.1-sdk\renpy\display\screen.py", line 266, in update
    self.screen.function(**self.scope)
  File "C:\Users\Yon\V-Games\renpy-6.16.1-sdk\renpy\screenlang.py", line 1217, in __call__
    renpy.python.py_exec_bytecode(self.code.bytecode, locals=scope)
  File "C:\Users\Yon\V-Games\renpy-6.16.1-sdk\renpy\python.py", line 1304, in py_exec_bytecode
    exec bytecode in globals, locals
  File "game/script.rpy", line 22, in <module>
    hotspot (168, 204, 78, 78) hovered SetScreenVariable("a", True) unhovered SetScreenVariable("a", False) action [Return("im_ainami"), SelectedIf(a) ]
NameError: name 'a' is not defined

Windows-post2008Server-6.2.9200
Ren'Py 6.16.1.409
A Ren'Py Game 0.0

Which is strange, because I did add in a in the beginning, like in your post.

Code: Select all

screen ts:
    default a = False

screen map_imagemap:
    imagemap:
        ground "im/imagemap_ground.png"
        idle "im/imagemap_idle.png"
        hover "im/imagemap_hover.png"
        
        alpha False
        # This is so that everything transparent is invisible to the cursor. 

        #circles
        hotspot (168, 204, 78, 78) hovered SetScreenVariable("a", True) unhovered SetScreenVariable("a", False) action [Return("im_ainami"), SelectedIf(a) ]
        [...]

        #boxes
        hotspot (320, 406, 160, 64) hovered SetScreenVariable("a", True) unhovered SetScreenVariable("a", False) action [Return("im_ainami"), SelectedIf(a) ]

[Alex]

Well, sorry then. Let's start again.
You have an imagemap and want two hotspots looks activated at the same time when hovering mouse pointer over one of them. The imagemap works like - shows you ground and idle images; shows the appropriate part of the hover image at the rectangle specified with hotspot coordinates when you point this hotspot with mouse; shows the appropriate part of the selected_hover image at the rectangle specified with hotspot coordinates when this hotspot is selected (also, you can specify the selected_hover image to change the appearence of selected hotspots when hovering them with mouse pointer).

So, you need to make two hotspots became selected when you place mouse pointer over one of them.
There is an action that makes a button or a hotspot to be selected - SelectedIf http://www.renpy.org/doc/html/screen_ac ... er-actions (scroll down a bit).
This action will make your hotspot selected if given variable has the right value (let's say the variable will be "a" and could have it's value as True or False).

Code: Select all

hotspot (0, 0, 100, 100) action [Return("A"), SelectedIf(a) ]
hotspot (700, 500, 100, 100) action [Return("A"), SelectedIf(a) ]

These two hotspots will be selected if variable "a" has value True.

Next thing, is that you want your hotspots to look selected only when you hover one of them. So, you need to set the "a" variable to True when hovering a hotspot and set it back to False when unhovering.

Code: Select all

hotspot (0, 0, 100, 100) hovered SetScreenVariable("a", True) unhovered SetScreenVariable("a", False) action [Return("A"), SelectedIf(a) ]
hotspot (700, 500, 100, 100) hovered SetScreenVariable("a", True) unhovered SetScreenVariable("a", False) action [Return("A"), SelectedIf(a) ]

But you need to set the default value for this screen variable named "a" before you could use it for hotspots, like

Code: Select all

screen test_imagemap:
    default a = False

And finally, if you have ten pairs of hotspots then (using this method) you'll have to make ten different variables.


Also, you can read some Asceai's posts (click the links in the post) - http://lemmasoft.renai.us/forums/viewto ... 73#p322673

Code example

Code: Select all

screen test_imagemap:
    default a = False
    default b = False
    
    imagemap:
        ground "idle.png"
        hover "hover.png"
        selected_idle "hover.png"
        
        hotspot (0, 0, 100, 100) hovered SetScreenVariable("a", True) unhovered SetScreenVariable("a", False) action [Return("A"), SelectedIf(a) ]
        hotspot (0, 500, 100, 100) hovered SetScreenVariable("b", True) unhovered SetScreenVariable("b", False) action [Return("B"), SelectedIf(b) ]
        hotspot (700, 500, 100, 100) hovered SetScreenVariable("a", True) unhovered SetScreenVariable("a", False) action [Return("A"), SelectedIf(a) ]
        hotspot (700, 0, 100, 100) hovered SetScreenVariable("b", True) unhovered SetScreenVariable("b", False) action [Return("B"), SelectedIf(b) ]

# The game starts here.
label start:
    "..."
    $ x = renpy.call_screen("test_imagemap")
    "[x]"

hover.png (8.21 KiB) Viewed 4030 times

idle.png (8.01 KiB) Viewed 4030 times

[yon]

It works great now, thank you for your help!

I had to change a few things around though, so rather than:

Code: Select all

            ground "idle.png"
            hover "hover.png"
            selected_idle "hover.png"

I have:

Code: Select all

            ground "im/imagemap_ground.png"
            idle "im/imagemap_idle.png"
            hover "im/imagemap_hover.png"
            selected_idle "im/imagemap_hover.png"

But that's just because of the way my files are set up.
Again, thank you for the help and being patient with me. I really appreciate it.