Customizing Preferences Screen with imagemaps

[Coren]

Does anyone have a tutorial on how to customize the preferences screen (save, load, prefs, navigation, yes/no) with imagemaps and not imagebuttons? If anyone could link me to a small demo that shows how that works, I'll be really grateful. ^^; Thanks!

[apricotorange]

See http://lemmasoft.renai.us/forums/viewto ... f=8&t=9812 ?

[Coren]

I've seen it, but the demo mostly only consists of imagebuttons, and the actual post doesn't have enough code for a noob like me to figure out exactly how to add those imagemaps in (how do I declare what image appears for which yes/no function, for instance? Like I'm sure "Are you sure you want to overwrite your save" should be different from "Are you sure you want to quit"). Though bless Aleema, she really put in a lot of effort in that post and I'm very glad she did it.

[RangerDanger]

This one might be more up your alley http://lemmasoft.renai.us/forums/viewto ... 51&t=14237

[Coren]

Thanks! Does anyone have any idea how to customize the yes/no screen for each possibility, though?

[Alex]

Try http://lemmasoft.renai.us/forums/viewto ... 15#p140987

[Coren]

Ah, thanks! Do the ground, idle and hover images need to have the background and all that, or are those already taken care of as long as we declare it as gm_root?

If anyone could send me a full options script that allows imagemap customization I would be very grateful!

[OokamiKasumi]

Ah, thanks! Do the ground, idle and hover images need to have the background and all that, or are those already taken care of as long as we declare it as gm_root?

If anyone could send me a full options script that allows imagemap customization I would be very grateful!

This is another option for making a Yes/No imagemap:
In screens.rpy
Note! All of my Yes/No image files are stored in a Folder called ui, so to access them I add ui/ to the names of the images.

Code: Select all

##############################################################################
# Yes/No Prompt

#This block is responsible for the Imagemap based yes / no prompt
# You'll need to edit this to change the position and style of the text.

screen yesno_prompt:
    on "show" action With(dissolve)
    modal True

    imagemap:
        ground 'ui/yesno_ground.png'
        idle 'ui/yesno_idle.png'
        hover 'ui/yesno_hover.png'
        
        hotspot (245, 465, 246, 138) action yes_action hover_sound "sfx/ping.wav" activate_sound "sfx/click.wav"
        hotspot (535, 471, 238, 124) action no_action hover_sound "sfx/ping.wav" activate_sound "sfx/click.wav"

    #text _(message):
        #xalign 0.5
        #yalign 0.5

    if message == layout.ARE_YOU_SURE:
        add "ui/yesno_are_you_sure.png"
        
    elif message == layout.DELETE_SAVE:
        add "ui/yesno_delete_save.png"
        
    elif message == layout.OVERWRITE_SAVE:
        add "ui/yesno_overwrite_save.png"
        
    elif message == layout.LOADING:
        add "ui/yesno_loading.png"
        
    elif message == layout.QUIT:
        add "ui/yesno_quit.png"
        
    elif message == layout.MAIN_MENU:
        add "ui/yesno_main_menu.png"

What's going on is the Background image is consistent, but the Text has a Transparent Background so Only The Text changes depending on what's called. The Yes/No is an Imagemap on Top.

Unfortunately, you NEED a ground image for any imagemap to work properly, so simply declaring a gm_root isn't enough.

It looks like this: