Imagemap with lockable/unlockable hotspots and transitions?

[Shinlocke]

I am trying to create an information page that ultimately I can reuse the same code to reuse the functionality. The main purpose is to display Faction/Federation information on the various factions encountered as you go through the chapters/unlock them. I was then thinking of using it for character bio's as they met characters within the game. It might also be utilized for navigation/map, maybe.

The basic idea is a grid background/image that shows a picture/name of the various factions. For initial start and creation, we'll say there are 6, although there are more once I understand the concept I can usually expand beyond that.

Normal display, not hovering over any of the images.


When you hover over one of the images (hotspot?) then an image slides/dissolves upward covering that image. If you unhover, move off the hotspot, it reverses/returns back to normal. If you click on it it takes to the main page. Then there is a button on that page that returns them to this page.

Hovering over the top left image, image slide appears.

Unhovering, moving off the hotspot, image slide vanishes and background is there.

Hovering over lower left image, image slide appears.

It is similar to a gallery in which this information can be unlocked/discovered. As you progress more information is passed into the page. I originally started with the code I'm using for my gallery by changing the class (I think that is the correct term) but could not get it to work. I spent a few days on it and eventually gave up as it it seemed over my head.

I tried to start over, this time tackling a different method because I saw someone wanted something similar with an imagemap, hotspots. This got me a bit closer. I can hover over the spots, the hover images appear where they want. If I click on one of them, it takes me the label for it.

Code: Select all

## Screen name to call to use ##
screen federation_list():
## The imagemap, the action(?) for the images are self explanatory ##
    imagemap:
#        idle "federation_idle.jpg"
        ground "fed_list.jpg"
#        hover "federation_hover.png"

## hotspots, active spots on the image that when you hover, unhover, click do something (xpos, ypos, height, width)
        hotspot (229, 212, 420, 236) clicked Jump("fed_ur") hovered ShowTransient("hover_a", img="hover_a.png") unhovered Hide("hover_a")
        hotspot (229, 548, 420, 236) clicked Jump("fed_ec") hovered ShowTransient("hover_b", img="hover_b.png") unhovered Hide("hover_b")
        hotspot (749, 212, 420, 236) clicked Jump("fed_se") hovered ShowTransient("hover_c", img="hover_c.png") unhovered Hide("hover_c")
        hotspot (749, 548, 420, 236) clicked Jump("fed_ad") hovered ShowTransient("hover_d", img="hover_d.png") unhovered Hide("hover_d")
        hotspot (1270, 212, 420, 236) clicked Jump("fed_fc") hovered ShowTransient("hover_e", img="hover_e.png") unhovered Hide("hover_e")
        hotspot (1270, 548, 420, 236) clicked Jump("fed_orr") hovered ShowTransient("hover_f", img="hover_f.png") unhovered Hide("hover_f")

screen hover_a(img):
    add img pos (229, 212)
screen hover_b(img):
    add img pos (229, 548)
screen hover_c(img):
    add img pos (749, 212)
screen hover_d(img):
    add img pos (749, 548)
screen hover_e(img):
    add img pos (1270, 212)
screen hover_f(img):
    add img pos (1270, 548)

label fed_ur:
    "This is the United Republic page."
    return

label fed_ec:
    "This is the Europa Confederation page."
    return

label fed_se:
    "This is the Shingen Empire page."
    return

label fed_ad:
    "This is the Anazi Dynasty page."
    return

label fed_fc:
    "This is the Federated Commonwealth page."
    return

label fed_orr:
    "This is the Outer Rim Republic."
    return

Is there a better way to do this that is cleaner other than me creating a separate screen for each hover? I did try to create a list/class that would pull from a list but didn't kept stumbling.

Can I make the hover do a transition like dissolve or moveup, so it looks like the hover image is sliding up?

How can I make them locked so that the information is unlocked as they go through the story?

[Shinlocke]

Ok, so I figured out I can use a transition with the hotspot. I am not sure if the transition is somehow messed up because of the hotspot, but 'moveinbottom' and 'easeinbottom' when used separately give the desired effect. When I use them here it just looks like it appears.

Code: Select all

hotspot (229, 212, 420, 236) activate_sound "audio/button_click.ogg" clicked Jump("fed_ur") hover_sound "audio/button_hover.ogg" hovered ShowTransient("hover_a", transition=moveinbottom, img="hover_a.png") unhovered Hide("hover_a")

I figured out I can make dissolve slower with something like:

Code: Select all

define slowdissolve = Dissolve(1.0)

I tried to do something similar to slow movein or easin but either I am not doing it correctly or it doesn't work with movein and easein.

[Imperf3kt]

You might do better to use a vpgrid populated with image buttons, you can't use transforms and ATL with imagemaps

[Shinlocke]

Code: Select all

define wipeupdissolve = ComposeTransition(Dissolve(4.0), before=wipeup)

hotspot (229, 212, 420, 236) activate_sound "audio/button_click.ogg" clicked Jump("fed_ur") hover_sound "audio/button_hover.ogg" hovered ShowTransient("hover_a", transition=wipeupdissolve, img="hover_a.png") unhovered Hide("hover_a")

After a day of searching, trying all sorts of different methods (still not understanding what I'm doing) but I got a little closer to what I was looking for. Added sound effects as part of learning what I can do and not do.



I got close but not quite what I was looking for. The timing is off, needs to be tweaked more but it is close.

You might do better to use a vpgrid populated with image buttons, you can't use transforms and ATL with imagemaps

I created a grid to do some testing using imagebuttons. I did try a vpgrid (not sure the difference between the two) but couldn't get it to work, probably not passing the correct syntax. I figured I would try to accomplish what I would like to see visually with imagebuttons, then worry about how to get them to work in a grid. I created the image button, hover, idle are working but not sure how to apply a transition or effect to the hover part.

Code: Select all

screen fedfaction_list:
    imagebutton:
        idle "faction_ad_idle.png"
        hover "faction_ad_hover.png"
        xalign 0.5
        yalign 0.5
        action Jump("fed_ad")
        hover_sound("audio/button_hover.ogg")
        activate_sound("audio/button_click.ogg")

[Imperf3kt]

I don't have the time to help properly, sorry.

But this should point you in the right direction.
viewtopic.php?f=51&t=22565&start=75#p455107
It still works the same way in modern renpy and has several examples.

[Shinlocke]

But this should point you in the right direction.
viewtopic.php?f=51&t=22565&start=75#p455107
It still works the same way in modern renpy and has several examples.

Thank you. It did help get me closer. I am learning some of the terminology. I can get it to happen, but I think it is literally transorming the imagebutton to the one below because the clickable area also ends up changing with the button itself.