Question on hotspots for main menus [SOLVED]

Discuss how to use the Ren'Py engine to create visual novels and story-based games. New releases are announced in this section.
Forum rules
This is the right place for Ren'Py help. Please ask one question per thread, use a descriptive subject like 'NotFound error in option.rpy' , and include all the relevant information - especially any relevant code and traceback messages. Use the code tag to format scripts.
Post Reply
Message
Author
Helveds
Newbie
Posts: 8
Joined: Wed Mar 24, 2010 3:34 pm
Contact:

Question on hotspots for main menus [SOLVED]

#1 Post by Helveds »

Hello,

I have been trouble adding a hotspot image to my main menu. I've used a few different styles from the cookbook but I can't seem to get any of them to work. I can't help but think I am over looking something simple.

My code is:

Code: Select all

# Main menu configuration
screen main_menu:
    #This ensures that any other menu screen is replaced.
    tag menu

    imagemap:
        ground "post-apocalyptic-city_menu.png"
        hover "main_menu_selected.png"
        
        hotspot (590, 80, 160, 50) action Start()
For this, all that I want to happen is my image, main_menu_selected, which is just a circle, to appear over the background image. But it never works. I tried making the background see-through to see if the image was popping up behind the background, but I couldn't see it. I did notice, however, that when I made the background slightly see-through, a box over where I put the hotspot formed, but it just discolored that box - it didn't show the image I wanted it to. Everything else works fine.

Does anyone have any suggestions?

Thank you,
Helveds
Last edited by Helveds on Fri Feb 22, 2013 1:12 pm, edited 1 time in total.

User avatar
OokamiKasumi
Eileen-Class Veteran
Posts: 1779
Joined: Thu Oct 14, 2010 3:53 am
Completed: 14 games released -- and Counting.
Organization: DarkErotica Games
Deviantart: OokamiKasumi
Location: NC, USA
Contact:

Re: Question on hotspots for main menus

#2 Post by OokamiKasumi »

Helveds wrote:I have been trouble adding a hotspot image to my main menu. I've used a few different styles from the cookbook but I can't seem to get any of them to work. I can't help but think I am over looking something simple.

My code is:

Code: Select all

# Main menu configuration
screen main_menu:
    #This ensures that any other menu screen is replaced.
    tag menu

    imagemap:
        ground "post-apocalyptic-city_menu.png"
        hover "main_menu_selected.png"
        
        hotspot (590, 80, 160, 50) action Start()
For this, all that I want to happen is my image, main_menu_selected, which is just a circle, to appear over the background image. But it never works. I tried making the background see-through to see if the image was popping up behind the background, but I couldn't see it. I did notice, however, that when I made the background slightly see-through, a box over where I put the hotspot formed, but it just discolored that box - it didn't show the image I wanted it to. Everything else works fine.
You're missing: idle.png
-- You need a ground, hover and idle.

As an example, here's the code from one of my main menus:

Code: Select all

##############################################################################
# Main Menu 

screen main_menu:
    tag menu

    
    window:
        style "mm_root" # The background image for the main menu.

    imagemap:
        idle "ui/mm_idle.png"
        hover "ui/mm_hover.png"
        ground "ui/mm_ground.png"
            # Another way to add a background image is by using the mm_ground 
            # image and making mm_root a transparency: blank.png. 

        
        alpha False 
        # This is because I use png Transparencies. 
       
        hotspot (827, 74, 107, 77) action Start() activate_sound "sfx/click.wav"
        hotspot (815, 155, 140, 57) action ShowMenu("load") activate_sound "sfx/click.wav"
        hotspot (795, 221, 173, 81) action ShowMenu("preferences") activate_sound "sfx/click.wav"
        hotspot (750, 302, 260, 68) action ShowMenu("howto") activate_sound "sfx/click.wav"
        hotspot (804, 373, 149, 59) action ShowMenu("bonus_menu") activate_sound "sfx/click.wav"
        hotspot (830, 443, 107, 65) action Help() activate_sound "sfx/click.wav"
        hotspot (827, 515, 110, 59) action Quit(confirm=False) activate_sound "sfx/click.wav"
        
init -2 python:

    # Make all the main menu buttons be the same size.
    style.mm_button.size_group = "mm"
These are the pngs I use:
mm_ground
mm_ground
mm_hover
mm_hover
mm_idle
mm_idle
It looks like this:
main menu.jpg
To accomplish what you're after, a circle over a background, I would set your main background as "mm_root," and set the circle as "mm_ground.png".
Ookami Kasumi ~ Purveyor of fine Smut.
Most recent Games Completed: For ALL my completed games visit: DarkErotica Games

"No amount of great animation will save a bad story." -- John Lasseter of Pixar

Helveds
Newbie
Posts: 8
Joined: Wed Mar 24, 2010 3:34 pm
Contact:

Re: Question on hotspots for main menus

#3 Post by Helveds »

Thank you for the response!

I am still having trouble understanding this, though.

My code currently is:

Code: Select all

screen main_menu:
    #This ensures that any other menu screen is replaced.
    tag menu
    


    imagemap:
        idle "post-apocalyptic-city.jpg"
        hover "Main Menu.png"
        ground "main_menu_selected.png"
        
        alpha False
This is my first time doing something like this, so I apologize. I don't understand two things:

1) window:
style "mm_root" # The background image for the main menu.
That is black when I put it in, but when I replace it with my background image as you suggested. post-apocalyptic-city.jpg, I get an error that says that style does not exist.

2) What pictures I need and what needs to be where in idle, hover, and ground. Currently I have 3 images. The background, the main menu image, and the circle that will encompass the part of the menu that is selected. No matter what image I put where, I can't seem to get the result that I want.

Thank you for the help!

-Helveds

User avatar
OokamiKasumi
Eileen-Class Veteran
Posts: 1779
Joined: Thu Oct 14, 2010 3:53 am
Completed: 14 games released -- and Counting.
Organization: DarkErotica Games
Deviantart: OokamiKasumi
Location: NC, USA
Contact:

Re: Question on hotspots for main menus

#4 Post by OokamiKasumi »

Helveds wrote:I am still having trouble understanding this, though.

Your code should look like this:

Code: Select all

screen main_menu:
    tag menu

    window:
        style "mm_root" # This should be defined as an image on your script. 
    
    imagemap:
        idle "mm_idle_text.png" # This should be your Text, not your background. 
        hover "mm_hover_text.png" # This should be Text highlighted. 
        ground "mm_ground.png" # This should be your Circle. 
        
        alpha False

Idle is your TEXT when no one is touching it.
Hover is your TEXT when someone puts a mouse pointer over it.
Ground is what your TEXT sits on, or when the text is not accessible.
mm_root is the Background Image for the menus screen.
Helveds wrote:...when I replace it with my background image as you suggested, post-apocalyptic-city.jpg, I get an error that says that style does not exist.
On your script.rpy file, do you have your mm_root defined like this?

Code: Select all

    image mm_root = "post-apocalyptic-city.jpg" 
Also, when you first load it, the text will Not Be There. It won't show up until you set the Hotspot parameters:

Code: Select all

        hotspot (827, 74, 107, 77) action Start() activate_sound "sfx/click.wav"
        hotspot (815, 155, 140, 57) action ShowMenu("load") activate_sound "sfx/click.wav"
        hotspot (795, 221, 173, 81) action ShowMenu("preferences") activate_sound "sfx/click.wav"
        hotspot (750, 302, 260, 68) action ShowMenu("howto") activate_sound "sfx/click.wav"
        hotspot (804, 373, 149, 59) action ShowMenu("bonus_menu") activate_sound "sfx/click.wav"
        hotspot (830, 443, 107, 65) action Help() activate_sound "sfx/click.wav"
        hotspot (827, 515, 110, 59) action Quit(confirm=False) activate_sound "sfx/click.wav"

Example images:
mm_root.jpg
mm_root.jpg
mm_ground.png
mm_ground.png
mm_idle_text.png
mm_idle_text.png
mm_hover_text.png
mm_hover_text.png
It looks like this:
menu.jpg
Ookami Kasumi ~ Purveyor of fine Smut.
Most recent Games Completed: For ALL my completed games visit: DarkErotica Games

"No amount of great animation will save a bad story." -- John Lasseter of Pixar

Helveds
Newbie
Posts: 8
Joined: Wed Mar 24, 2010 3:34 pm
Contact:

Re: Question on hotspots for main menus

#5 Post by Helveds »

Oh! I think I see what you are saying.

Indeed, my mm_root was not defined in options. I now see that it must be.

Thank you for the example. On my screen though, I'm looking for a circle to come up around each item that is hovered over. For example, if I was going to hover over Start, a circle would appear around it. If I were to hover over Preferences, I would like to circle to appear around that. Is that possible to do using this format? I sure hope so!

I did this on a game I made a few years back, but since then I have lost the files and Ren'Py seems to have these new features that somewhat changes that way I would have thought of doing it.

Thank you again for the continued help. I appreciate it.

-Helveds

User avatar
OokamiKasumi
Eileen-Class Veteran
Posts: 1779
Joined: Thu Oct 14, 2010 3:53 am
Completed: 14 games released -- and Counting.
Organization: DarkErotica Games
Deviantart: OokamiKasumi
Location: NC, USA
Contact:

Re: Question on hotspots for main menus

#6 Post by OokamiKasumi »

Helveds wrote:Oh! I think I see what you are saying.

Indeed, my mm_root was not defined in options. I now see that it must be.
That mm_root isn't defined in options reflects the fact that mm_root hasn't been defined in script.rpy!
Helveds wrote:On my screen though, I'm looking for a circle to come up around each item that is hovered over.
In that case, you simply include the circle on the mm_hover.png image.
-- Make sure the circles Don't Touch!!! Then, when you define their hotspot parameters (with SHIFT-I,) use the mm_hover.png image so you get all of it.
hover.png
Ookami Kasumi ~ Purveyor of fine Smut.
Most recent Games Completed: For ALL my completed games visit: DarkErotica Games

"No amount of great animation will save a bad story." -- John Lasseter of Pixar

Helveds
Newbie
Posts: 8
Joined: Wed Mar 24, 2010 3:34 pm
Contact:

Re: Question on hotspots for main menus

#7 Post by Helveds »

It works! That was fun haha.

You were definitely correct about the mm_root. I did not understand that it needed to be defined in script.rpy. This whole time I was defining that in options.rpy under background.

This is the final code:

Code: Select all

screen main_menu:
    tag menu

    window:
        style "mm_root" # This should be defined as an image on your script. 
    
    imagemap:
        idle "Main Menu.png" # This should be your Text, not your background. 
        hover "main_menu_selected.png" # This should be Text highlighted. 
        ground "circle.png" # This should be your Circle. 
        
        alpha False
        
        hotspot (556, 38, 150, 57) action Start()
        hotspot (545, 116, 189, 50) action ShowMenu("load")
        hotspot (538, 194, 219, 51) action ShowMenu ("howto")
        hotspot (563, 259, 127, 57) action Help()
        hotspot (567, 334, 118, 51) action Quit(confirm=False)
With

Code: Select all

image mm_root = "post-apocalyptic-city.jpg" 
appearing before the first label.

I can't thank you enough! This was a hefty task for someone who hasn't touched Ren'Py in 3 years, but hey, I appreciate your help!

Thank you :D
-Helveds

User avatar
OokamiKasumi
Eileen-Class Veteran
Posts: 1779
Joined: Thu Oct 14, 2010 3:53 am
Completed: 14 games released -- and Counting.
Organization: DarkErotica Games
Deviantart: OokamiKasumi
Location: NC, USA
Contact:

Re: Question on hotspots for main menus

#8 Post by OokamiKasumi »

Actually, your final code should look like this:

Code: Select all

screen main_menu:
    tag menu

    window:
        style "mm_root" # This should be defined as an image on your script. 
    
    imagemap:
        idle "main_menu.png" # This should be your Text, not your background. 
        hover "main_menu_selected.png" # This should be Text highlighted. 
        ground "ground.png" # This should be the image your text sits on. 
        
        alpha False
        
        hotspot (556, 38, 150, 57) action Start()
        hotspot (545, 116, 189, 50) action ShowMenu("load")
        hotspot (538, 194, 219, 51) action ShowMenu ("howto")
        hotspot (563, 259, 127, 57) action Help()
        hotspot (567, 334, 118, 51) action Quit(confirm=False)
Helveds wrote:It works! That was fun haha. ... I can't thank you enough! This was a hefty task for someone who hasn't touched Ren'Py in 3 years, but hey, I appreciate your help!
Glad I could help!
-- Make sure you add [SOLVED] to the title of your question. :)
Ookami Kasumi ~ Purveyor of fine Smut.
Most recent Games Completed: For ALL my completed games visit: DarkErotica Games

"No amount of great animation will save a bad story." -- John Lasseter of Pixar

Helveds
Newbie
Posts: 8
Joined: Wed Mar 24, 2010 3:34 pm
Contact:

Re: Question on hotspots for main menus [SOLVED]

#9 Post by Helveds »

Aye, aye! Done.

Thanks again :D

Post Reply

Who is online

Users browsing this forum: Kocker, Semrush [Bot]