i do not understand imagemaps

[justanartistnamedkim]

at all really. I've read the FAQ. I've read other posts about image maps. I have really tried to figure this out on my own since this seems like such a basic thing but if I try to do anything the game will open up with error messages.

Can someone please re-explain this to me or give me a clear example?

[QotC]

Funnily enough, I happen to be learning about them myself; maybe I can be of some service.

First of all: Try running your code without any imagemaps in it, just to make sure the error isn't about something else. Sometimes I'll edit a piece of new code several zmillion times before I realize that the problem was with a misplaced punctuation mark somewhere far away from the bit I was fussing with. Learning to make sense of the Traceback file's jibber-jabber will serve you well.

Now, here's a break-down of image maps, as far as I understand them:

The basic idea is that an image map is a picture with several invisible "hot spots" placed on it. When you hover over these hotspots, they change how they look, and when you click on them, they do things, just like buttons.

Here's my example:

Code: Select all

    imagemap:
        ground "map1.png" 
        hover "map2.png"
        hotspot (0, 50, 350, 300) action [SetVariable("sample", foo), ui.jumps("dancing_spree")]
        hotspot  (360, 30, 800, 250) action [ui.jumps("shopping_spree")]
        hotspot  (400, 275, 600, 450) action [ui.jumps("killing_spree")]

First you define the imagemap. Everything indented after the : is going to set up what's in it.

Code: Select all

    imagemap:

The next two important things are ground and hover.

Code: Select all

        ground "map1.png" 
        hover "map2.png"

Ground is going to be an image file: this is what your image map will look like by default.

Hover is the interesting one; it's also an image file, ideally the same size as Ground. Imagine a picture with another picture taped behind it; if you cut a piece out of the first picture, you'll see part of the second. That's kinda how hover works; when you hover over a hot spot, it cuts a piece out of the ground picture and shows you the hover picture "underneath". What piece it is depends on where and how big the hot spot is.

Code: Select all

        hotspot (0, 50, 350, 300) action [SetVariable("sample", foo), ui.jumps("dancing_spree")]
        hotspot  (360, 30, 800, 250) action [ui.jumps("shopping_spree")]
        hotspot  (400, 275, 600, 450) action [ui.jumps("killing_spree")]

Hotspots are the invisible buttons. The numbers in the (parentheses) are the co-ordinates of the top-left and bottom-right corners, which means that your hotspot is basically a rectangle. I forgot which numbers are which, so moving on:

everything in the [brackets] after action are what the hotspot does when clicked. You can look up Buttons for some ideas of what to do here, but basically, you can do a list of things such as changing variables and jumping to another label in the script.

This is about as much as I can tell you on the subject, I hope it's at least partially useful. Someone else can probably explain more.

[justanartistnamedkim]

thank you but Im get this error

Code: Select all

On line 338 of C:\Users\kim\Downloads\renpy-6.12.0\Summer Resolution/game/script.rpy: expected statement.
imagemap:
        ^

Ren'Py Version: Ren'Py 6.12.0e

[QotC]

Ugh, I hate those kind of errors. Could you paste some of your code? What's right before imagemap:, and what's right after it?

[justanartistnamedkim]

http://s1198.photobucket.com/albums/aa4 ... lzhalp.jpg

here's a screencap of it. I used her example except replaced the image names.

[QotC]

Hmmm...Okay, this is the part I'm less certain about, but you can give it a try:

Try putting the imagemap in a screen.

Code: Select all

screen my_imagemap:
    imagemap:
            #more code goes here

Then, whereever in the script you want the imagemap to show up, call the screen.

Code: Select all

label day_off:
    "Where shall I go on my day off?"
    call screen my_imagemap

Does that work?

[Alex]

justanartistnamedkim, I suppose that the problem is - wrong indentation.
In your script, lines 335 and 336 (as others) has one space at the begining. And line 338 (with imagemap) does not indented at all. Only labels and sreens does not need indentation. So, indent line 338 the same way as lines 335 and 336. (And are you shure that you need <return> in line 346?)
http://www.renpy.org/wiki/renpy/FAQ#How ... _blocks.3F

[justanartistnamedkim]

http://s1198.photobucket.com/albums/aa4 ... =help2.jpg

Now it looks like this and gets the error

Code: Select all

I'm sorry, but errors were detected in your script. Please correct the
errors listed below, and try again.


On line 342 of C:\Users\kim\Downloads\renpy-6.12.0\Summer Resolution/game/script.rpy: screen statement expects a non-empty block.
screen my_imagemap:
                   ^

On line 343 of C:\Users\kim\Downloads\renpy-6.12.0\Summer Resolution/game/script.rpy: expected statement.
imagemap: 
        ^

Ren'Py Version: Ren'Py 6.12.0e

[QotC]

Like Alex said, you need to indent it. Right before the imagemap: , put 4 spaces or so. Renpy is very picky about indentation.

[justanartistnamedkim]

http://s1198.photobucket.com/albums/aa4 ... =help3.jpg
indented
gets error message

Code: Select all

I'm sorry, but errors were detected in your script. Please correct the
errors listed below, and try again.


On line 345 of C:\Users\kim\Downloads\renpy-6.12.0\Summer Resolution/game/script.rpy: imagemap expects a non-empty block.
imagemap: 
          ^

Ren'Py Version: Ren'Py 6.12.0e

[justanartistnamedkim]

http://s1198.photobucket.com/albums/aa4 ... =help3.jpg
indented
gets error message

Code: Select all

I'm sorry, but errors were detected in your script. Please correct the
errors listed below, and try again.


On line 345 of C:\Users\kim\Downloads\renpy-6.12.0\Summer Resolution/game/script.rpy: imagemap expects a non-empty block.
imagemap: 
          ^

Ren'Py Version: Ren'Py 6.12.0e

[bink]

Everything from line 346 to line 352 needs to be indented one level further. Put 4 space in front of each of those lines. They should belong to the imagemap block, but right now they are in the screen block.

[justanartistnamedkim]

Okay, this is the first time it starts up without an error but the image map doesn't actually show up. It goes ignored until i get the error

Code: Select all

 NameError: name 'foo' is not defined

While running game code:
 - script at line 341 of C:\Users\kim\Downloads\renpy-6.12.0\Summer Resolution/game/script.rpy
 - python at line 532 of renpy-6.12.0-mainline/common/00statements.rpy.
 - python at line 349 of C:\Users\kim\Downloads\renpy-6.12.0\Summer Resolution/game/script.rpy.

[QotC]

That's because "foo" isn't a real computery-thing; it's only a placeholder word I threw in to give an example of what the code could do. You can delete everything between the [brackets], if you like, and fill them with your own code. Or, you can define all the labels and objects listed, and see how it runs as-is. It's up to you.

[justanartistnamedkim]

I'm sorry. I'm getting confused. It still doesn't act like there's an imagemap. How do I get the images to show up. And now I get this error.

Code: Select all

I'm sorry, but an uncaught exception occurred.

TypeError: SetVariable() takes exactly 2 arguments (1 given)

While running game code:
 - script at line 345 of C:\Users\kim\Downloads\renpy-6.12.0\Summer Resolution/game/script.rpy
 - python at line 532 of renpy-6.12.0-mainline/common/00statements.rpy.
 - python at line 349 of C:\Users\kim\Downloads\renpy-6.12.0\Summer Resolution/game/script.rpy.

if you like, and fill them with your own code. Or, you can define all the labels and objects listed

I wasn't going to replace any of the text until I could get it to work but I don't what I'm supposed to put in for the code or how to define the labels and objects...