Image Maps

[nagirinara]

Because I have a terrible time maintaining focus when looking through the online documents, I haven't been able to make sense of how to make and use image maps. I took a screen shot because I haven't made an image I actually like *and need to work that part out with my artist*. How would I take this image *which is horrible* and make it into an image map? Once I figure out how to do it for one thing, I'll be able to figure it out for others.

[Fireserpent]

I'm definitely no expert yet, but I was able to make a successful image map using the guide. I did a test, which worked fine. This one is for a player's room for my dating sim:

Basically what you got below is first the label which I jump to or call, in order to get to the room.

After that you have the line that tells you which two images that you need. The first image is the one without highlights, the second one has some highlights on it. In my test image, I simply colored the bed, chest, door and mirror in a different color, to make sure it worked.

The four lines with numbers underneath shows you the menu choices offered by clicking on the image. The numbers tells you the coordinates of each "box" on the image you can click on. The first two numbers is the upper left corner, and the second two are the lower right corner that form the box (Correct me if I'm wrong) The text after the numbers sets the menu choice.

After that the results of these boxes are defined with an if statement, which can do anything you want. Below was simply a test to make sure it works, that prints out a text. All this is already shown in the tutorial, so I claim no credit for this stuff.. This is just my own version that I tested and made sure was working.

Also note that the images are specified in a subfolder "images/" If your images are in the game folder, you should remove that part. (I personally store images in separate folders to avoid clutter when the game gets bigger)

Try copying this code, and replace the images with your own. One background image, and one other image with the choices.

If you press shift+d while running the game you can access the image location picker. It opens the folder where you store your images, and you can move the mousepointer to get the x and y coordinates, which you can then update in the code (I actually did it in Paintshop Pro while making the images, but it's the same thing really. )

I hope this helps.

Code: Select all

label menu_room_player:
$ result = renpy.imagemap("images/Menu_Room_Player_BG01.jpg", "images/Menu_Room_Player_BG01_OL.jpg", [
        (0, 420, 360, 530, "bed"),
        (760, 170, 800, 540, "door"),
        (390, 370, 580, 520, "chest"),
        (600, 200, 730, 380, "mirror"),
        ], focus="imagemap")

if result == "bed":
    me "Time to sleep!"
elif result == "door":
    me "Time to head out!"
elif result == "chest":
    me "What do I got...!"
elif result == "mirror":
    me "So how am I doing?"

[nagirinara]

That should help, thank you. I'll go test that out! =^.^=

Edit: So this will work for the main menu as well? How would the code be altered for that exactly?

[Chansel]

Here's the code for a main menu:

Code: Select all

init -2 python:
    layout.imagemap_main_menu("menu2.jpg", "menu1.jpg", [
        (111, 248, 392 ,313, "Start Game"),
        (111, 313, 392, 378, "Load Game"),
        (48, 432, 237, 529, "Preferences"),
        (48,529,237,576, "Quit"),
        (48, 435, 237, 482, "instructions"),
        ])

I just copied and pasted it from this link: http://renpy.org/wiki/renpy/doc/referen ... _main_menu
Which is what I used as reference to make my imagemaps

[nagirinara]

Ah, thank you. =^.^= *feels like a dumbass*

Ah, what is the -2 for before python?

[Chansel]

O///O
I honestly have no idea XD
But it works, so.. yeah ^^"

[nagirinara]

Ah, I see.

Hey, PyTom! What's the -2 for? *stupid curiosity won't leave me alone*

[Aleema]

The -2 means that code inside of it is executed before an init -1 and a regular init. So, theoretically, if you wanted something to initialize before everything else, you'd say something like init -99. It's a way to order init blocks, since it's difficult to tell what will initilize first if you have your init blocks split over several .rpy files.

Also, to satisfy my curiosity, you plan on changing the buttons on your image map once you've settled on a design? Because if you want Ren'py default buttons, you can just change the mm_root image to yours to get that look.

[nagirinara]

Yeah, it was just a screencap so I had something to ask a question with... I definitely plan on changing it to something less plain.

[Chansel]

Aha, so that's what those numbers are for!
Thanks, I'll remember it ^^