Ren'Py Help with imagemaps

[Alexia.v1]

How to make that in a map with imagemaps once the player has clicked in a location and finished that event he cannot click again in the same place?

example of what I want to do.

When the player clicks on location 1 and once the player has seen that event he cannot click there again.

How can I do that? I've been looking but can't find any tutorials on how to do that.

 

[recreation]

if blabla:
    imagemap ... action [SetVariable("blabla", False), Jump("somewhere")]

 

[Alexia.v1]

Thanks.
Could you give me an example of how to do it?
I'm really new at this.

Can I put that code on the call screen?
How would it be to put several locations?

 

[recreation]

First of all, for such a map I'd consider imagebutton instead of an imagemap. It's easier on the long run and you can actually make imagebuttons the exact shape of the object to click on.
Here is an example of what I'm using in one of my games:

screen lobby():
    add "rooms+maps/lobby0.webp"
    imagebutton:
        auto "rooms+maps/lobby2_%s.webp"
        focus_mask True
        tooltip "Upstairs"
        action [SetVariable("selectedDoor", 2), SelectedIf(selectedDoor== 2), Jump("upstairs")]
    imagebutton:
        auto "rooms+maps/lobby3_%s.webp"
        focus_mask True
        tooltip "Dining Room"
        action [SetVariable("selectedDoor", 3), SelectedIf(selectedDoor== 3), Jump("dining2")]

You could use something similar to hide the buttons:

screen lobby():
    if not place_visited:
        imagebutton:
            ...
            action [SetVariable("place_visited", True), Jump("upstairs")]
            ...

 

[Alexia.v1]

Thank you very much for your help, I think I can now understand how it works, I will try both imagebutton and imagemap to see which one is easier for me.

 

[79flavors]

Looking the your picture, imagebutton: is the better solution - if you can get your head around it.

imagemap: is simpler - but you can only create square clickable areas. Given all your house hotspots are displayed in isometric view - squares aren't really suitable without some gnarly mouse positioning. In addition, some of those house hotspots overlap each other - not something that imagemap: is really good at.

imagebutton: is more complex and requires that you have at least 2 images using transparency to make it work (base image + 1 hotspot idle image). Ideally you want a minimum of 3, 1 base image + 2 other images per hotspot (idle+hover). So your map, with what looks like 6 locations could require up to 13 images to work how most people would expect it to.
I did a bit of a brain dump on what the images might look like a while ago, perhaps it will help explain things...
https://f95zone.to/threads/finding-...point-click-game-on-renpy.25325/#post-1565577

 

[Alexia.v1]

It seems that imagebutton would be more useful to me, but I don't know how to place the buttons in the coresponding places.

Where can I get the xpos/ypos numbers for the positions?

 

[Winterfire]

It seems that imagebutton would be more useful to me, but I don't know how to place the buttons in the coresponding places.

Where can I get the xpos/ypos numbers for the positions?

From the image editor you used to make the map in.

 

[recreation]

It seems that imagebutton would be more useful to me, but I don't know how to place the buttons in the coresponding places.

Where can I get the xpos/ypos numbers for the positions?

You don't need them if you follow 79flavors example in the linked post above yours.

 

[79flavors]

What I did was use full 1920x1080 or 1280x720 images, even for the small buttons.
Since the majority of the image was all blank space (entirely transparent), it barely affects the overall image size verses using a much smaller image aligned with xpos,ypos.

Since I was sorting out the pictures in Photoshop, it seemed easier that way - just creating each overlay image as a new layer.
The advantage being that a 1280x720 image overlaid on top of a 1280x720 -- aligns perfectly.

 

[Alexia.v1]

Where are the 3 images added?
"add bg_party_livingroom"
"bt_party_livingroom_girls_%s.png"

Do I have to make an image folder for every location?

 

[79flavors]

No. Just use the standard /images/ folder - or any other folder you like. As long as RenPy can find them (and it'll search the /images/ folder and it's subfolders automatically), it'll be fine.

In the example you've given... those images, I think, were in :

/game/images/bg_party_livingroom.png​

/game/images/bg_party_livingroom_girls_idle.png​

/game/images/bg_party_livingroom_girls_hover.png​

 

[Winterfire]

No. Just use the standard /images/ folder - or any other folder you like. As long as RenPy can find them (and it'll search the /images/ folder and it's subfolders automatically), it'll be fine.

In the example you've given... those images, I think, were in :

/game/images/bg_party_livingroom.png​

/game/images/bg_party_livingroom_girls_idle.png​

/game/images/bg_party_livingroom_girls_hover.png​

Aren't _idle and _hover enough? What is the third one for?

-edit-
Nvm, it is a different thing, I misread. My bad!

 

[79flavors]

Aren't _idle and _hover enough? What is the third one for?

There is a case for using a 3rd image per hotspot anyway, since hover doesn't really work on android devices (at least, I can't see why it would). In that case, having a 3rd image for when a button is actually pressed (selected_hover I think - though hardly anyone develops purely for android, as far as I can tell).

Which I appreciate isn't what you were asking, but still worth pointing out.

Meanwhile, since I'm bored, I've been having a play with original picture in Photoshop.









In this case, I copied the original image to create a new layer then cut away everything except the first house. That became my "house1 idle" image. Then I copied that layer to create a "house1 hover" image, increased it's brightness by 30% and contrast by 15%, then added a halo around it. Rinse and repeat for the other 5 hotspot objects. Once I remembered that "house5" was actually a boat, they all got renamed to "opt" (for "which option picked").

The actual hover images do overlap somewhat, but the idle images don't.
Which is fine, since the individual hotspots don't "deselect" until you move the mouse beyond the area covered by the hover image. Basically it just means that once you move the mouse into a hotspot, it is slightly harder to move the cursor out. Just a personal preference on my part.

 

[Alexia.v1]

I'm trying the example of your link, I don't know what I'm doing wrong, but I get this error.

I'm sorry, but an uncaught exception occurred.

While running game code:
  File "game/script.rpy", line 33, in script
    call screen sc_party_livingroom
  File "renpy/common/000statements.rpy", line 531, in execute_call_screen
    store._return = renpy.call_screen(name, *args, **kwargs)
  File "game/v2.rpy", line 33, in execute
    screen sc_party_livingroom():
  File "game/v2.rpy", line 33, in execute
    screen sc_party_livingroom():
  File "game/v2.rpy", line 36, in execute
    add bg_party_livingroom
NameError: name 'bg_party_livingroom' is not defined

and I'm using this code

screen sc_party_livingroom():
    modal True

    add bg_party_livingroom

    imagebutton auto "bt_party_livingroom_girls_%s.png":
        focus_mask True
        action Jump ("intro_talk_to_girls")



label intro_talk_to_girls:
    a "......"

 

[Winterfire]

There is a case for using a 3rd image per hotspot anyway, since hover doesn't really work on android devices (at least, I can't see why it would). In that case, having a 3rd image for when a button is actually pressed (selected_hover I think - though hardly anyone develops purely for android, as far as I can tell).

Which I appreciate isn't what you were asking, but still worth pointing out.

Meanwhile, since I'm bored, I've been having a play with original picture in Photoshop.

View attachment 624169
View attachment 624171 View attachment 624170
View attachment 624173 View attachment 624172
View attachment 624175 View attachment 624174
View attachment 624177 View attachment 624176
View attachment 624179 View attachment 624178
View attachment 624181 View attachment 624180

In this case, I copied the original image to create a new layer then cut away everything except the first house. That became my "house1 idle" image. Then I copied that layer to create a "house1 hover" image, increased it's brightness by 30% and contrast by 15%, then added a halo around it. Rinse and repeat for the other 5 hotspot objects. Once I remembered that "house5" was actually a boat, they all got renamed to "opt" (for "which option picked").

The actual hover images do overlap somewhat, but the idle images don't.
Which is fine, since the individual hotspots don't "deselect" until you move the mouse beyond the area covered by the hover image. Basically it just means that once you move the mouse into a hotspot, it is slightly harder to move the cursor out. Just a personal preference on my part.

Ohh, I did not know that thing for android, that is useful to know. Thanks!

 

[79flavors]

I'm trying the example of your link, I don't know what I'm doing wrong, but I get this error.

Short version: You're using my code, but aren't using my images. It tried to find a specific image and couldn't.

You've literally copy and pasted the whole lot, without changing it to use your images and your labels.

Spoiler: A longer example

You don't have permission to view the spoiler content. Log in or register now.

It might be better if you saw it working and were able to play around with working code, with working images.
So I'm including a little test program I wrote to demonstrate your own picture. Just unpack it to your RenPy projects folder and edit it to your heart's content.
Imagebutton Example Source :

You must be registered to see the links

- Edit: Link expired. Sorry.

It was all a bit rushed and since the base I used was for a different screen size - things looks a bit odd. But the code and the "game" both work.

If you'd rather just see the end results... here's the final built version of the game...
Imagebutton Example "Game" :

You must be registered to see the links

There is no way to exit the game other than just closing it. The map screen is a closed loop.

 

[79flavors]

Ohh, I did not know that thing for android, that is useful to know. Thanks!

I keep meaning to try it. But I'm assuming (always a bad idea) that since android devices are touch screen devices - there isn't actually a cursor to keep track of for hover to actually work as it would on mouse controlled PC's. It's not like the screen knows where your finger or stylus is until you actually touch it.

Honestly, RenPy may have a really clever thing already built in which makes it a lot easier. It does make me wonder how these open world/point and click style games actually manage to be played effectively on android. But thankfully, it's not something I have to worry about - consider perhaps, but not actually worry about.

 

[Alexia.v1]

79flavors Thank you very much for your help, your tutorial is very useful.

 

[anne O'nymous]

screen lobby():
    if not place_visited:
        imagebutton:
            ...
            action [SetVariable("place_visited", True), Jump("upstairs")]
            ...

Don't really have all my mind actually, but normally it's the good moment to introduce the sensitive property of the buttons. The button will be sensitive, and so clickable, only if the given expression is True. Therefore no more need for the initial if, you can do it directly from the button :

screen lobby():
    imagebutton:
        [...]
        action [SetVariable("place_visited", True), Jump("upstairs")]
        sensitive not place_visited

Note that you use any condition that you would have used in the if.