Lemma Soft Forums

Hi! First of all, I am not a english native speaker so this is a real struggle for me. Sorry for any mistake that i'll commit because... there we'll be lots for sure.

I'm a total newbie with Ren'py (not to programming) and there's an specific type of game that a want to create: "explorables"?

What I want to adchieve in this first test project is to explore a room in three different ways:

1) Go to a different room after clicking a door
2) Get an item after clicking somewhere in the screen
3) Get some sort of "character thoughts" about the enviroments after clicking an space in the image... (it can be an frame, a toy, a shirt, etc)

Now, I'm currently fighting with the very first point: goind somewhere else.

These are my current files:

intro.rpy room.rpy The "intro.rpy" file uses the next image as an scene:

https://i.ibb.co/FJj2QMh/Living-Quarters-11.jpg

And my approach is to call the intro_room_screen and put the clickable door (idle and hover):

https://i.ibb.co/5xmmyqN/ib-room-left-door-idle.png
https://i.ibb.co/gZrmYGB/ib-room-left-door-hover.png

...on this screen by using an imagemap.

Well, this works... I can click on the door and jump to another label withouth any trouble but... I have some doubts about my methods:

- It's really hard to get the right position for the door's png.
- I can only put a single thing at the time (i don't know if this is true because, once again, i am a total newbie) and it's an overkill because i want four doors on this scene.

So, is there an easier way to do this?
Can i create a whole png with the size of my BG with all the clickable elements and handle them apart?
Is there any tutorial or code example to do this?
Is Ash actually a champion or is it a lier?

Thanks in advance for your help!

hi there your English is pretty good only see one spelling mistake

there is nothing wrong with your code. there is a way to find by pressing shift=d and select image location picker then select the image that you are using or go look in the cookbook there is something there like whats in renpy location picker tool that the only way you can pick the right spot it take time to do it

this what you need to figure out
(position-x, position-y, width, height)

Hi, thanks! But... How can i set that position in my imagemap? I know those are coordinates, just like the "hotspot" one but which key do i have to use? Something like:

position (10, 0, 150, 150)

Or so?

You can just use xpos x ypos y. Alternatively, export the file as the same size as your screen (with transparency) and use alpha so the transparent parts are insensitive - I tend to do the latter because fiddling with placing the images in renpy is tedious. Scroll down for the alpha keyword: https://www.renpy.org/doc/html/screens.html#imagemap

philat wrote: ↑Thu Oct 10, 2019 7:32 pm You can just use xpos x ypos y. Alternatively, export the file as the same size as your screen (with transparency) and use alpha so the transparent parts are insensitive - I tend to do the latter because fiddling with placing the images in renpy is tedious. Scroll down for the alpha keyword: https://www.renpy.org/doc/html/screens.html#imagemap

This sounds interesting. Im doing this:
But... How do i set a hotspot? My hover image never appears

Well, obviously you need to put the hotspot there. You can find the coordinates of the hotspot using the dev tools as described above.

When possible avoid imagemaps and use imagebuttons. They are much more flexible and easier to work with.

okay here try this but i have change how you using it i don't know what size you have your game at

https://ibb.co/KjJSLXR
https://ibb.co/3rwJjns

drKlauz wrote: ↑Fri Oct 11, 2019 6:26 am When possible avoid imagemaps and use imagebuttons. They are much more flexible and easier to work with.

it doesn't matter if you use imagemages or imagebuttons you still have to get the position in the right spot

If you use imagebuttons you can easily change positions, images use only needed space, you can have proper hit-testing and not just rectangle click area, you can have item over item. I haven't seen any usecase where imagemaps is better solution.
As for position, if you don't need to place element at pixel-perfect position, imagebutton again better, as you can use some rough position, see how it looks and move it to better position if necessary. With imagemaps if you decide to change element position, you had to edit images.

cocobeans wrote: ↑Thu Oct 10, 2019 5:06 pm ...

As for imagemap - you need 2 images: one with all active areas in idle state and the other with all active areas in hover state (like if you point at all of them at once). Then you need to set all the hotspots (rectangle areas that are not overlap with each other). In addition to the action when hotspot is clicked you can add a hovered and unhovered actions (to show/hide some extra info about hotspot). Try something like https://www.renpy.org/doc/html/screen_actions.html

If you need the non-rectangular hotspots or overlaping of hotspots, then instead of the imagemap made some imagebuttons and place them onscreen.

https://www.renpy.org/doc/html/screens.html#imagebutton

Also, check the cookbook for some reciepts:
viewtopic.php?f=51&t=54451
viewtopic.php?f=51&t=20541
viewtopic.php?f=11&t=21101

Thanks everyone for your help but I ended up using philat solution because it was the easiest way. Either way, I'll be testing the other solutions to see which one ends up being the most efficient in terms of code and gameplay experience.