Main Menu customisation

[tofire]

Hi, please explain to me how to use imagemaps to make a main menu like im 5 years old

I've spent hours researching and trying to wrap my head around how to use them in a main menu specifically, but to no avail. Many resources i find are from like 2010, don't really explain everything, or i'm too dumb to understand (the renpy manual).
I have 0 Python knowledge, which is probably why it's all so confusing to me.

If you would be so kind, could you either direct me to some good tutorials or explain to me how to make it all work?

[MoonByte]

Does it HAVE to be an image map?
I used them in the past as well, but figuring out the exact "button" location was always a bit of a hassle plus I had to make the buttons seperately anyway, soooo...

If you're ok with image buttons (else ignore this and wait for someone that probably understands image maps better than me lol):

In screen.rpy, look for

Code: Select all

## Main Menu screen ############################################################
##
## Used to display the main menu when Ren'Py starts.
##
## https://www.renpy.org/doc/html/screen_special.html#main-menu

delete everything between this and the next section (Game Menu Screen)
and put the following in:

Code: Select all

screen main_menu():

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

    style_prefix "main_menu"

    ## your background image
    ## to change it, just go into the gui folder and change the image called "main_menu.png"
    add gui.main_menu_background

    # Image button code

    imagebutton auto "gui/menu/white_%s.png" xpos 40 ypos 110 focus_mask True action Start()
    imagebutton auto "gui/menu/load_%s.png" xpos 748 ypos 800 focus_mask True action ShowMenu('load')
    imagebutton auto "gui/menu/settings_%s.png" xpos 748 ypos 893 focus_mask True action ShowMenu('preferences')
    imagebutton auto "gui/menu/quit_%s.png" xpos 748 ypos 980 focus_mask True action Quit(confirm=False)
    imagebutton auto "gui/menu/about_%s.png" xpos 1500 ypos 1000 focus_mask True action ShowMenu('about')
    imagebutton auto "gui/menu/help_%s.png" xpos 1700 ypos 1000 focus_mask True action ShowMenu('help')

To explain (mind, some of this I learned very freshly myself):

• imagebutton: calls for an image button, aka an image that is interactive
  
• auto: will automatically have the button look different based on if it is idle, hovered over, insensitive, etc.
  
• _%s: tells renpy where to check for the correct image to use with auto. "white_%s.png" means that all images starting with "white_" will be checked for the correct graphic. You usually need "_idle", "_hover", "_insensitive" for the Main Menu (for more, look here). Remember that if this image is NOT just in the images-folder, that you need to specify, such as "gui/menu/white_%s.png", so Renpy can find it
  
• xpos & ypos: where will the button appear. x is horizontal, y is vertical. It counts in pixels, so if your screen is 1000 pixels wide, then xpos can be anywhere between 1 and 1000. You can either just type in numbers and then Launch the project to check where they are OR you launch the project, press Shift + D and click on Image Location Picker. There, you choose your background. It will display the image and in the bottom left you get the exact location of your mouse. If your button is 100 pixels wide, then you can essentially math out the perfect place for it
  
• focus_mask True: if it is NOT true but something else, then not the whole button is clickable. By making focus_mask True, the entire image counts as a button
  
• action: what should happen when the button is clicked?
  
• Start(): Start will close the menu and officially count as starting the game (in difference to for example loading it). Aka, when a player clicks on that, it is a NEW game. If the () are empty, it will go to label start, but you can also for example have the action be Start("chapter1") and then it will Start at label chapter1 instead
  
• ShowMenu: The engine has calls another menu, such as load, preferences, but you can also put your own menus in there (for example if you make a CG Gallery)
  
• Quit(confirm=False): action Quit stops the game from running. The (confirm=False) is so that the game doesn't first go "Are you sure you want to quit the game?" and instead just instantly shuts down the game

If you maybe want to have buttons that get unlocked after something happened in-game (like, you complete the game once to unlock the Extras), then you can put your buttons into a simple if game_complete: statement. To make a button not do anything but still be visible, you can type in action Pass. This will make the button insensitive, but visible.

(Anyone with actual programming knowledge feel very free to add or correct lol)

[tofire]

Nope, doesn't have to be imagemaps! Thank you so much. After a lot of stupid fiddling bcs i was bein a pro at coding again, it worked perfectly. This method can be used for other sreens such as options and load right? Either way u saved my life thx <3

[MoonByte]

Yes, you can technically make any and all menus like this!
Loading screen, gallery menu, quick menu, maybe some custom thing like a mobile phone that players can use during the game.
You can look at this, for example, it claims to go through the whole game setup with imagebuttons. I'll be honest that I haven't downloaded and actually looked at it, so I don't know how good the explanations are for someone with zero knowledge, but at worst you can probably just copy & paste it, fiddle with it and if something breaks, you ask ^-^