A question about imagemaps [Solved]

[Strum]

Hi, I got a little problem concerning imagemaps.

$ result = renpy.imagemap (ground, selected, hotspots, unselected=None, overlays=False, style='imagemap', with_none=None, **properties):

I got my "ground" image showing all the buttons in their unselected state, the "selected" image that shows the buttons when the user places the mouse cursor over them but haven't clicked to select them. Unselected buttons are red, button that the mouse is hovering over is blue and the button that the user clicked on shall be green.
My question is what part of the code corresponds to the button that has been clicked on? ie which part of the code will make the selected button green?

[rimir]

Haven't tried this yet..so I'm not sure...but I think you should use something like this :
Let's say you have buttons_red.bmp, buttons_green.bmp & buttons_blue.bmp
You should use something like :

Code: Select all

$ result = renpy.imagemap("buttons_red.bmp", "buttons_green.bmp", [#your hotspots in tuples], "buttons_blue.bmp", #anything else you need)

[Strum]

That doesn't work I'm afraid. That only seems to change the initial image to the third one ie instead of unhighlighted buttons appearing red as you'd expect, they become blue and no matter what the user does the buttons won't turn red. It like the 3rd image you set in the imagemap statement overides the 1st image you set.

[Alex]

It seems that imagemap should work so.
If you have 2 or 3 buttons, you can make several ground pictures with green buttons (everyone shows that one button is selectsd). Then, using a variable, change ground picture depending on what button is selected.

Code: Select all

init:
    $ ground = "first_button_green.png" # at first this button is selected

label start:
    $ result = renpy.imagemap(ground, "selected.png", [
                           (100, 100, 300, 400, "first_button"),
                           (500, 100, 700, 400, "second_button")
                          ])     # you see, ground is a variable (without commas)

    if result == "first_button":
        "You clicked first button, now it is selected"
        $ ground = "first_button_green.png" # set the "ground" 

    elif result == "second_button":
        "You clicked second button, now it is selected"
        $ ground = "second_button_green.png"

    jump start

[Strum]

Sorry, but that code also won't work. Unless you're suggesting I use lots of seperate image maps for each button. I thank you for trying though. Can anyone else offer a solution to my problem please.

[Showsni]

My question is what part of the code corresponds to the button that has been clicked on? ie which part of the code will make the selected button green?

There isn't a part of the code for that; you can't do it. Well, not without some kind of workaround (like seperate pictures for each "clicked" button). Once you've clicked, the image map is over anyway...

[Strum]

That is the question I was trying to find out.

Code: Select all

$ result = renpy.imagemap (ground, selected, hotspots, unselected=None, overlays=False, style='imagemap', with_none=None, **properties):

The 'ground' image is when the buttons are red, the 'selected' image is then the mouse is hovering over the button turning it blue. somewhere in that code must be a varible that makes the button green after the button has been pressed.

It seems I had to solve the problem a different way, by turning on overlays and making a blank image button appear over the button that was pressed. Not the best way of doing things but in the end I had no choice. Having said that my code does what I want it to, even if it is turning out messy. I guess I an say this problem is solved....sort of.

[Guest]

... if only the SM.animation edges and states could be made to correspond to buttons. What you're thinking of is something like Flash's up and down states and I don't think Ren'Py supports your little bit of polish in this case.

I think there's only hover the base image map, am I right?

[Jake]

I think there's only hover the base image map, am I right?

Exactly. I get the idea it's called 'selected' because there's keyboard interaction as well, so when you navigate by keyboard you 'select' a button well before actually activating it.

The problem with image-maps and a 'button-down' state is as has been pointed out before in this thread - as soon as you click on one of the hotspots, the image map is finished - it's no longer on the screen, so it can't show any kind of 'clicked' state. It's not very good when your image-maps are pretending to be buttons, because (IIRC) you don't get any behaviour on mouse-down, but realistically if you want all-singing, all-dancing buttons then you should probably put together a custom UI using buttons and custom displayables or something instead.

For example, put together a ConditionSwitch displayable which displays the normal, hovered, post-hovered and clicked versions of the button depending on some variable's value, then use the hovered, unhovered and clicked functions of a ui.button to change the value of that variable. Then do the same for all your other buttons, lay them out on the screen using the various other ui. functions, and you have buttons working the way you want. Image-maps are a simple alternative, but you lose flexibility as a result of the simplicity.

[Aleema]

You can animate the imagemaps, but that's about it. If you want more customization, you'll have to individually place imagebuttons (which is worth the effort).

[Strum]

Yes, I had to resort to doing that eventually.

[JinzouTamashii]

Alright, I have a general idea of how to custom place imagebuttons, but I forget how to look up the four corner positions in Photoshop. Wasn't there a guide to that posted here? Forum search is failing me ...

[Strum]

Corner positions? You mean for imagebuttons? If so you only need 2 points and not 4. 4 corner points are for imagemaps. If you set X and Y anchor to 0 then finding where to put the button is easy just use photo shop and paste the image on the game's background and when you're happy with where the button is just look up its co ordinates.

[Showsni]

I don't know how to do it in Photoshop, but in Paint it tells you the co-ords of your mouse at the bottom.

[JinzouTamashii]

Nevermind, I found it. Window and then Info Panel in Photoshop.