image mapping main menu and ui buttons

[mimikuro]

This question comes up a lot so I've made sure I've done the neccessary amount of searching and reading before posting so please bear with me. because no matter how much i read i do not understand one bit ofit.

I am having issues with the customization of the main menu. i don't understand the imagemapping at all. Ive read the coobook multiple times and i know how its supposed to work but I do not understand how to get the coordinates for my image ( xy positions)nor where to insert the code that the cookbook provides once i do figure these out.I do know that it is pixels but i dont know how to measure exactly where they are.

as a work around I tried to use the simple mm_root to change the background to the image i wanted displayed and using a ui. button codes but another issue presented itself. although the custom button i wanted appeared. the actual "hotspot" i guess was somewhere else. so although my button image moved the clickable part is where the default renpy menu start is.

Jake posted this code:

Code: Select all

 style.mm_button[u'Start Game'].background = 'mm_start_button.png'
    style.mm_button[u'Start Game'].hover_background = 'mm_start_button_hover.png'
    style.mm_button[u'Start Game'].xminimum = 133
    style.mm_button[u'Start Game'].xmaximum = 133
    style.mm_button[u'Start Game'].yminimum = 33
    style.mm_button[u'Start Game'].ymaximum = 33

    style.mm_button_text[u'Start Game'].color="#0000"
    style.mm_button_text[u'Start Game'].size=1

and like i said it got the image i wanted as a button, but no clickable spot. then when I added this

Code: Select all

  style.mm_button[u'Start Game'].xoffset = -450
    style.mm_button[u'Start Game'].yoffset = -100

the clickable spot disappeared completely!

I understand the renpy codes for the actual game but when it comes to making the menu I know absolutely NOTHING. I really need someone to explain it like you explaining to an idiot. I have absolutely NO idea how this works and its very frustrating

if it helps this is what my menu is supposed to look like. I have seperate button files and everything


just to show you how stupid i am i even downloaded Mugens thing but i had no idea what to do with it D:

bonus question: I added an mp3 to play at the main menu but for some reason it keeps playing the first one second of the song over and over on loop. it's all skippy and messed up. the code i used for that was

Code: Select all

config.main_menu_music = "tam-n11.mp3"

so im not sure what the issue is with it

[broken_angel]

It'll be easier to do it with an imagemap than with individual buttons, so here's how to find coordinates...

You can actually figure out coordinates with MS Paint, if you have Windows.
As you move your mouse around, the coordinates show up in the bottom-left (or bottom-right on Vista or older) corner of the screen.



With the "Select" tool selected, line up the cross-hairs (as in the center of the cursor, which should look like a +) with the point you want the coordinates of.

For each button area on your screen, you'll need to get the coordinates of the top-left and bottom-right corners. The easiest way to get these is to draw a small box around each area and then line up the cross-hairs with the corners.

Below, I've shown boxes drawn around each button area and marked the important corners with a small red box.



Once you've figured out your coordinates, I would personally use the new screen language to create your imagemap. At least for me, it's slightly easier to understand.
Just copy and paste this code into your options.rpy script (preferably at the end; the first line shouldn't be indented at all since it's a label) and edit it to suit your needs:

Code: Select all

screen main_menu:
    tag menu

    imagemap:
        ground 'Menu.png'
        hover 'Menu_Hover.png'
        
        hotspot (354, 55, 540, 115) action Start()
        hotspot (354, 135, 540, 192) action ShowMenu('load')
        hotspot (354, 213, 580, 272) action ShowMenu('preferences')
        hotspot (354, 289, 540, 353) action Quit(confirm=False)

For the above, you need two images of your menu screen: one where all the buttons are normal ("ground"), and one where all the buttons look like the mouse is hovering over them ("hover"). If you only have one image, then just put the same image name in both places.

The numbers in parenthesis above corresponds to the coordinates of each button area.
It's listed in the order of (top-left x-coordinate, top-left y-coordinate, bottom-right x-coordinate, bottom-right y coordinate).
I've already put in the coordinates for your buttons above, but you can figure them out yourself with Paint, as mentioned above.


As for the music...have you tried opening it in Windows Media Player or something to see if the file itself is screwed up?

[Jake]

You can actually figure out coordinates with MS Paint, if you have Windows.

For what it's worth, you can do this in Ren'Py itself, as well.

If you hit Shift-D to get to the developer menu while running your in-progress game, one of the options is 'Image Location Picker'. From there, you can select one of the images in your game directory and as you move the mouse around, Ren'Py will tell you the pixel locations that you need in order to make your image maps.

(Most image programs work the same way, but I'm pretty sure I've seen some which give you coordinates from the bottom-left corner, rather than the top-left corner that Ren'Py uses; using the built-in one will at least ensure that you're always using the right coordinate system! ;-)


And I'd certainly agree it's easier to use the screen language option broken_angel suggests; IIRC I posted the earlier-quoted code for someone who just wanted to move the existing default buttons around a bit.)

[mimikuro]

omg thank you both immensely! This helped me so much! a thousand thanks lol.

and sorry to be a hassle but i did the code the way you said, and i placed it at the bottom of the screen where the rest of my customizations go and i get an error. Im sure I can fix It but I don't really know what it means. it looks like this:

Code: Select all

I'm sorry, but an exception occured while executing your Ren'Py
script.

Exception: Syntax error on line 268 of C:\Users\Laurn\Documents\VN\renpy-6.10.0\Einweild/game/options.rpy

While compiling python block starting at line 250 of C:\Users\Laurn\Documents\VN\renpy-6.10.0\Einweild/game/options.rpy.

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

  File "C:\Users\Laurn\Documents\Renpy\renpy-6.10.0\renpy\bootstrap.py", line 260, in bootstrap
  File "C:\Users\Laurn\Documents\Renpy\renpy-6.10.0\renpy\main.py", line 171, in main
  File "C:\Users\Laurn\Documents\Renpy\renpy-6.10.0\renpy\script.py", line 477, in load_script
  File "C:\Users\Laurn\Documents\Renpy\renpy-6.10.0\renpy\script.py", line 155, in __init__
  File "C:\Users\Laurn\Documents\Renpy\renpy-6.10.0\renpy\script.py", line 371, in load_appropriate_file
  File "C:\Users\Laurn\Documents\Renpy\renpy-6.10.0\renpy\script.py", line 333, in load_file
  File "C:\Users\Laurn\Documents\Renpy\renpy-6.10.0\renpy\script.py", line 426, in update_bytecode
  File "C:\Users\Laurn\Documents\Renpy\renpy-6.10.0\renpy\python.py", line 256, in py_compile_exec_bytecode
  File "C:\Users\Laurn\Documents\Renpy\renpy-6.10.0\renpy\python.py", line 240, in py_compile
Exception: Syntax error on line 268 of C:\Users\Laurn\Documents\VN\renpy-6.10.0\Einweild/game/options.rpy

While compiling python block starting at line 250 of C:\Users\Laurn\Documents\VN\renpy-6.10.0\Einweild/game/options.rpy.

Ren'Py Version: Ren'Py 6.10.0e

[broken_angel]

Jake - Ha...I didn't know you could do that. But then, I never use the developer's tools. ^^;


Mimikuro - How did you paste it?

Did you make sure that the first line wasn't indented at all (because it's a block in itself)? Also, did you make sure nothing else came after it?
It should look like this:

[mimikuro]

I just got the new version of renpy and that took care of everything. Thank you so much for your help. thank you!