Ren'Py Hovered image button?

[9thCrux]

I'm trying to code navigation in Ren'Py but quite don't understand how to make background objects clickable:

So what I'm trying to do is to make the doors clickable so they send me inside of the respective rooms.



Here is the highlighted door, the idea is to make the door highlight when the mouse is hovered on it and make it send me inside the room once the door is clicked.


So I don't know how to achieve that, I have been looking into imagebutton and modal False but can't figure it out how to create an overlay that lights up when the mouse hovers over the door...
How do I do that?

 

[9thCrux]

This kinda looks interesting but it seems outdated >.>

You must be registered to see the links

 

[Palanto]

Well look at this code example:

imagebutton idle im.Scale("your_image.png", 129, 250) hover im.Scale("your_image.png", 129, 250) action ShowMenu("Your_Page")

and then compare it to this documentation entry:

You must be registered to see the links

forgeth the im.Scale it's not necessary to scale your image to anything

So if you only have this one door as an image, it should be a simple thing like this:

imagebutton hover "MCHallway00-momdoor.png" action Jump("labelName")

also if you want to create auto imagebuttons you should name the image MCHallway00-momdoor_hover.png,
this way you can just create the imagebuttons like this:

imagebutton auto "MCHallway00-momdoor_%s.png" action Jump("labelName")

and the state the button is in will automatically call the corresponding image, if there is none then it will show none.

 

[9thCrux]

Well look at this code example:

imagebutton idle im.Scale("your_image.png", 129, 250) hover im.Scale("your_image.png", 129, 250) action ShowMenu("Your_Page")

and then compare it to this documentation entry:

You must be registered to see the links

forgeth the im.Scale it's not necessary to scale your image to anything

So if you only have this one door as an image, it should be a simple thing like this:

imagebutton hover "MCHallway00-momdoor.png" action Jump("labelName")

also if you want to create auto imagebuttons you should name the image MCHallway00-momdoor_hover.png,
this way you can just create the imagebuttons like this:

imagebutton auto "MCHallway00-momdoor_%s.png" action Jump("labelName")

and the state the button is in will automatically call the corresponding image, if there is none then it will show none.

I see, seems like its easier than what I tho, but its giving an error, it says "expected end of line"
I'm using this code:
imagebutton hover "MCHallways/MCHallway00-momroom.png" action Show("Locked")

 

[Palanto]

can you post me the traceback.txt?

Or click on "Copy to Clipboard" when the error pops up and paste it in here

 

[9thCrux]

I'm sorry, but an uncaught exception occurred.

While running game code:
File "game/script.rpy", line 152, in script
imagebutton hover "MCHallways/MCHallway00-momroom.png"
Exception: Sayer 'imagebutton' is not defined.

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

Full traceback:
File "game/script.rpy", line 152, in script
imagebutton hover "MCHallways/MCHallway00-momroom.png"
File "D:\Program Files\Renpy\renpy-6.99.12.4-sdk\renpy\ast.py", line 615, in execute
who = eval_who(self.who, self.who_fast)
File "D:\Program Files\Renpy\renpy-6.99.12.4-sdk\renpy\ast.py", line 528, in eval_who
raise Exception("Sayer '%s' is not defined." % who.encode("utf-8"))
Exception: Sayer 'imagebutton' is not defined.

Windows-8-6.2.9200
Ren'Py 6.99.14.1.3218
Gamer Test 1.0
Fri Feb 23 19:37:40 2018

 

[9thCrux]

This is the code block I'm trying to use:

label men01:
menu:
"Hallway":
jump hall
"Use computer":
e "I need to find the power cord first"
jump men01
"Check phone":
e "Now where is that charger?"
jump men01
"Notepad":
e "There isn't anything written on it"
jump men01
"ePad":
e "I forgot the password, it must be saved in my old phone"
jump men01
label hall:
scene bg hall
e "Now where could those power supplies be?"
imagebutton hover "MCHallways/MCHallway00-momroom.png" action show("Locked")

So is a menu where the first option throws me into the hallway and from there I want to be able to navigate to the rooms.

 

[Palanto]

You do know that you need to work with screens and that you still need to position the button right?

Edit: I see you didn't know Alright that's going to take a little time

 

[9thCrux]

You do know that you need to work with screens and that you still need to position the button right?

Lol, nope...
I see so I have to define it and position it in screens before I can use the imagebutton it seems. Well I'm guessing erservingface:

 

[Palanto]

Best thing would be to go here:

You must be registered to see the links

Download this:

You must be registered to see the links

Copy it to your renpy project folder (not inside your game, the file itself is a "game") and extract it.
Start the game with your ren'py launcher and play it, after that you can check the .rpy files inside the folder in the screens.rpy you can find the screens and how he created the imagebuttons, inside the scripts.rpy you can see how he calls them (just a show screenname statement)

Edit: changed the download link to the updated game file

 

[Palanto]

Lol, nope...
I see so I have to define it and position it in screens before I can use the imagebutton it seems. Well I'm guessing erservingface:

Yep since imagebuttons are screenlanguage and not usable outside of screens
But try the link I posted up there (the file is just the one at the end of the first post in a post further down in the topic)
Then test the game and check the .rpy files If that doesn't help, you can always ask me again

 

[9thCrux]

Yep since imagebuttons are screenlanguage and not usable outside of screens
But try the link I posted up there (the file is just the one at the end of the first post)
Then test the game and check the .rpy files If that doesn't help, you can always ask me again

OK, gonna try using those links, thanks!

 

[Palanto]

You're welcome If that doesn't help you just scream in here I've still 3 more hours before I have to leave the PC

 

[9thCrux]

The updated game demo is here:

You must be registered to see the links

This one works with the last Ren'Py software atm, for those trying to learn the same stuff use this link ^^

 

[Palanto]

Oops sorry Didn't read further down, just found the post and thought it would still work (without testing it, sorry)

 

[Studio Errilhl]

The easiest way to avoid having to position the button-images, is to create the hover/idle button the same size a the original image. Ie, you take that original image, and then you delete everything except the door (so the rest of the size is transparent). That way, the door will be exactly the same place.

 

[anne O'nymous]

The easiest way to avoid having to position the button-images, is to create the hover/idle button the same size a the original image. Ie, you take that original image, and then you delete everything except the door (so the rest of the size is transparent). That way, the door will be exactly the same place.

In this case, isn't

You must be registered to see the links

a better option ?
In my mind, the advantage of imagebutton is precisely that you don't have to works with full size pictures. Don't take my words on it, I just looked if Ren'py can compile it without complaining, but it seem that both if and for works inside an imagemap block. So, it let you have the same flexibility than imagebutton, and need less pictures since two ("nothing selected", and "everything selected") is enough.

 

[Studio Errilhl]

In this case, isn't

You must be registered to see the links

a better option ?
In my mind, the advantage of imagebutton is precisely that you don't have to works with full size pictures. Don't take my words on it, I just looked if Ren'py can compile it without complaining, but it seem that both if and for works inside an imagemap block. So, it let you have the same flexibility than imagebutton, and need less pictures since two ("nothing selected", and "everything selected") is enough.

Well, sure, sort of, I guess. However, an imagebutton also only need two images (idle and hover). The problem with an image-map is that you need the actual px-markings for where the button goes. This you don't need with imagebutton (you just declare the button with the images directly, no need for position-knowledge)

 

[9thCrux]

So I finally figure it out a way to make it work...

We have to use two coding files:
script.rpy and screens.rpy

in screens.rpy we define the screen that will hold the background and image buttons:

screen my_screen:
add "hall.png"
imagebutton auto "halldoor1_%s.png" xpos 459 ypos 241 focus_mask True action Show("room")
imagebutton auto "halldoor2_%s.png" xpos 783 ypos 231 focus_mask True action Show("bath")
imagebutton auto "halldoor3_%s.png" xpos 971 ypos 83 focus_mask True action Show("inroom")

screen room:
add "room.png"
imagebutton auto "room_%s.png" xpos 744 ypos 85 focus_mask True action Hide("room"), Show("inroom")

screen bath:
add "bath.png"
imagebutton auto "bathd_%s.png" xpos 1215 ypos 175 focus_mask True action Hide("bath"), Show("my_screen")

screen inroom:
add "roomin.png"
imagebutton auto "roomind_%s.png" xpos 935 ypos 72 focus_mask True action Hide("inroom"), Show("my_screen")

"add" will change the background to the specified image and imagebutton needs a idle and hovered image variation; like lets say our image is called "x" so it will need "x_idle" and "x_hover".

In the script.rpy we define when to show the screen we created:

show screen my_screen
e "The door?"

So "my_screen" will give me access to "room", "bath", and "inroom" once I click the specified image button.
Then each of those screens will send me back to the main hall or "my_screen" once I click the given image button.

SO...

-But how can I make the image buttons the only clickable elements on screen?

-How can I make the game wait for the player to click an image button?

Right now I need to display a message (e "The door?") to make the game wait while I move my mouse over and click the imagebuttons to navigate.

erservingface:

 

[Studio Errilhl]

do

call screen my_screen

instead of

show screen my_screen

- call transfers focus and wait for interaction