Page 1 of 2

Imagemaps explained by a dummy

Posted: Sat Oct 28, 2017 3:28 pm
by jane_runs_fast
Here is some code stuff that is ALREADY on lemmesoft- but as a noob with Renpy, this stuff took FOREVER for me to figure out how to make work...

I'm hoping to share the stuff I've learned and gathered in a way that will help other new people understand.

This stuff might not be the most efficient way to do things- but it works for me- so it should work for you.



Imagemaps
Imagemaps take up a lot more space than image buttons- but it is the easiest way to make something work if you are still new.

What you need to make one is:
  • you need THREE fixed images '.JPG or PNG. of the SAME thing to make an image map.(as in everything is in three separate images. you don't need a new image for a specific button if you are making an imagemap.)
  • You need to have the coordinates of your 'hotspots'
  • You need to have the code stuff set up to make everything work.

First I will give an example and explanation of the images you will need for your imagemap.
Then I will explain 'Hotspots' and how to find them.
Last I will give you the code that I have been using for my example menu


Below I will be using sprites and backgrounds from a game that does not belong to me as examples.






Example imagemap menu:


Here is the 'ground' image' If there is no working 'hotspot' attached to anything the image will look like this. So fade or darken any 'buttons' or areas that you want others to know when they are not working. Like the 'read story' button below- If it is not working it will be dark.
group_ground.png


Here is the 'hover' image. If you have a working 'hotspot' the section of the image will look like this when you have your mouse hovered over it. if you want your button or area to change color, shape, whatever when someone hovers over it- this is the image that will appear when that happens. I want my buttons to change colors, So I made my start button green, and my other buttons a pink pattern.
group_hover.png


Here is the 'idle' image If you have a working 'hotspot' and your mouse is hot 'hovered' over the working area your image will look like this.
Idle when the screen is not being 'touched' or messed with by a player. When my screen is left along, I want my buttons to be plain and white.
group_idle.png


Now that you have THREE separate images we need to find our 'Hotspots"




Hotspots
Hotspots are rectangular or square (I'm sure there is a way to make other shapes, but I don't know it) position locations that you use to make an area of your image 'clickable'.

The coordinates that work for me are
'Xcoordinate', 'Ycoordinate', 'Height', and 'Value' in that order.



To find X and Y

X and y coordinates are found in the upper left corner of the position you are wanting to turn into a hotspot.

Lets say the 'read story button' on my menu is what I want to get the x and y coordinates for. the specific point that I need is the UPPER LEFT CORNER of the 'Read Story button'. Anywhere else will cause your hotspot to move.


you can use any illustration software to find x and y for a position, but the most dependable way to find the x and y coordinates is through the 'developer keys' already in Renpy.



I will show you how to find x and y in your game.

First- you need to have your images (ground, idle, and hover) in the game folder labeled 'images'

Now open renpy and LAUNCH YOUR PROJECT (the one that contains your menu images)


Once you are on the main screen of your game press 'SHIFT" and "D" on your keyboard to bring up the Developers Menu.
jjjjjjj.jpg
Now you have the Developers menu up on your screen. It should look like the image below.

Now click the text link labeled "Image Location Picker"
developer menu.PNG

A new window with a TON of image names should pop up.
image location picker.PNG
DO NOT PANIC

It looks super confusing- especially if you already have alot of images in your game. Just scroll through until you find one of your three menu images. Click on it and that image will pop up.

As you move your cursor around the image the numbers on the bottom left of the screen will change. These numbers are your coordinates.

Take your cursor and place it on the upper left of the area you want to turn into a hotspot. your exact x and y coordinates will be shown in the bottom left of the renpy screen. (highlighted in yellow in the image below.)
coordinates.PNG
if you want the height and value of the area as well-

(With your cursor in the upper left corner of the area you want to select)

Hold down the left button on your mouse and drag your cursor to the loser right corner of the area you want to become a hotspot. A light blue box should appear as you drag your cursor.

Once your blue box is where it needs to be, release the button on your mouse.

your coordinate numbers should be on the bottom left of your renpy screen- all ready for you to use.
rectangle.PNG

Now you have your x and y coordinates. (You will see where to put them in the code below.)





Below is the code I use- iI replaced the stuff in the navigation screen with my imagemap stuff.





Code: Select all

## Navigation screen ###########################################################
##
## This screen is included in the main and game menus, and provides navigation
## to other menus, and to start the game



####The hashtags "###" make anything behind them not usable....####


screen navigation():
###First- a 'screen' (as far as I know) is for 'menus'....they have a set of commands and actions that are specific to them (that will not work with 'labels'.)  You should 
###google 'renpy screen commands' if you would like to learn more.

    
# The various buttons.
    imagemap:

#Everything needs to be indented a certain way, or you will get an error when you start your game#
        
        idle "group_idle.png"
        hover "group_hover.png"
        ground "group_ground.png"
        
#^^^Here is where you add the names of your image files.  My image files are called group_idle.png, group_hover.png, and group_ground.png....you need to replace my 
###images with your own.  make sure the name of your image goes between the parenthesis ("") and that you add the .png or .jpg after the image name.
####for this menu screen your images will need to be in the game folder labeled "images" to be found.  If you have an additional folder inside of the 
####images folder, you will need to add the name of that folder to your image for it to be found. Example; if my image were in a folder labeled "mainmenu"  I would 
#### put "mainmenu/group_idle.png" in parenthesis after the word idle above.


       
        hotspot (647,556,542,129) action ShowMenu('start')
        #hotspot (647,556,542,129) action Show('charchoicea')
        hotspot (656,375,140,143) action ShowMenu('load')
        hotspot (845,376,140,143) action ShowMenu('gallery')
        hotspot (1002,367,176,150) action Show('mail_main')
    
        #hotspot (1199,35,1248,88) action Quit('quit')
        
        
##############################################################
#############################################################
hotspot.png




It might be super sloppy- but everything here works and is pretty simple to put together. Google has been a godsend- Anything I have not been able to bumble through on my own I search in lemmasoft or type 'renpy 'blah blah blah' ' into google.....

Re: Imagemaps explained by a dummy

Posted: Wed Nov 01, 2017 10:38 pm
by Cerulean
I've been trying tofigure out how imagemaps work and so far I could only understand your explanation. Thank you so much for sharing this, you're a lifesaver!

Re: Imagemaps explained by a dummy

Posted: Fri Nov 03, 2017 12:12 am
by texasstallion
screen navigation():

imagemap:
ground "town1-ground.jpg"
hover "town1-hover.jpg"
idle "town1-idle.jpg"

hotspot (365, 693, 485, 25) action Show("park")
hotspot (525, 25, 155, 155) action Show("policestation")
hotspot (749, 17, 155, 155) action Show("mall")
hotspot (47, 281, 155, 155) action Show("gym")

Re: Imagemaps explained by a dummy

Posted: Fri Nov 03, 2017 12:13 am
by texasstallion
I'm sorry, but an uncaught exception occurred.

After initialization, but before game start.
File "renpy/common/00voice.rpy", line 360, in voice_interact
if _menu:
NameError: global name '_menu' is not defined

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

Full traceback:
File "F:\New folder\renpy-6.99.12.4-sdk\renpy\bootstrap.py", line 295, in bootstrap
renpy.main.main()
File "F:\New folder\renpy-6.99.12.4-sdk\renpy\main.py", line 430, in main
renpy.game.script.report_duplicate_labels()
File "F:\New folder\renpy-6.99.12.4-sdk\renpy\script.py", line 890, in report_duplicate_labels
if renpy.parser.report_parse_errors():
File "F:\New folder\renpy-6.99.12.4-sdk\renpy\parser.py", line 2543, in report_parse_errors
renpy.display.error.report_parse_errors(full_text, error_fn)
File "F:\New folder\renpy-6.99.12.4-sdk\renpy\display\error.py", line 179, in report_parse_errors
error_fn=error_fn,
File "F:\New folder\renpy-6.99.12.4-sdk\renpy\game.py", line 280, in invoke_in_new_context
return callable(*args, **kwargs)
File "F:\New folder\renpy-6.99.12.4-sdk\renpy\display\error.py", line 43, in call_exception_screen
return renpy.ui.interact(mouse="screen", type="screen", suppress_overlay=True, suppress_underlay=True)
File "F:\New folder\renpy-6.99.12.4-sdk\renpy\ui.py", line 285, in interact
rv = renpy.game.interface.interact(roll_forward=roll_forward, **kwargs)
File "F:\New folder\renpy-6.99.12.4-sdk\renpy\display\core.py", line 2519, in interact
i()
File "renpy/common/00voice.rpy", line 360, in voice_interact
if _menu:
NameError: global name '_menu' is not defined

Windows-7-6.1.7601-SP1
Ren'Py 6.99.12.4.2187
clover 1.0

Re: Imagemaps explained by a dummy

Posted: Fri Nov 03, 2017 7:45 am
by Donmai
Impossible to know if your indentation is right, as you haven't used CODE tags in your post. It may be you have duplicate labels in your script.
See here: viewtopic.php?f=8&t=42564

Re: Imagemaps explained by a dummy

Posted: Fri Nov 03, 2017 3:50 pm
by LateWhiteRabbit
jane_runs_fast wrote: Sat Oct 28, 2017 3:28 pm Here is some code stuff that is ALREADY on lemmesoft- but as a noob with Renpy, this stuff took FOREVER for me to figure out how to make work...

I'm hoping to share the stuff I've learned and gathered in a way that will help other new people understand.

[SNIP]

It might be super sloppy- but everything here works and is pretty simple to put together. Google has been a godsend- Anything I have not been able to bumble through on my own I search in lemmasoft or type 'renpy 'blah blah blah' ' into google.....
Thanks. This is awesome. I haven't used RenPy since before PyTom added graphics accelaration support (the program performed too choppy for what I wanted to do before), but I'm digging in now, and while the documentation is really good and extensive, you can definitely tell it was written by a programmer.

Most of my programming experience comes from C++ and C#, so Python's syntax is like moon language to me right now. :? The whitespace delimited nature of Python is making my brain hurt - I'm used to braces to define code blocks - not indentation!

I would love to seem more break downs like this - this 'dummy style' is great for artists like me!

Re: Imagemaps explained by a dummy

Posted: Fri Nov 03, 2017 9:36 pm
by texasstallion
Thanks a lot. Now i can finally make a date sim game.

Re: Imagemaps explained by a dummy

Posted: Sun Feb 18, 2018 11:55 am
by DeathSummoner
Who says you are a dumb....you are a life saver....this explained me everything

Re: Imagemaps explained by a dummy

Posted: Mon Feb 19, 2018 2:40 pm
by jane_runs_fast
I am glad this could be of help! XD

Re: Imagemaps explained by a dummy

Posted: Thu May 03, 2018 6:49 pm
by ArizaLuca
What if the button/hotspot is circular or irregular in shape? Do you know how you would find coordinates then?

Re: Imagemaps explained by a dummy

Posted: Tue May 08, 2018 5:10 pm
by Nicckonator
Thank you! big up.

Re: Imagemaps explained by a dummy

Posted: Sun May 13, 2018 8:35 am
by milkteebaby
My god, you're amazing. I spent a few hours checking out various YT tutorials and none of them worked for me or they were horrible outdated.

Thanks so much :D

Re: Imagemaps explained by a dummy

Posted: Sun Jul 15, 2018 12:52 am
by alice-inwanderland
YOU'RE HEAVEN-SENT! <3 THANK YOU SO MUCH! Your tutorial on imagemaps was the easiest to understand !!! :D :D

Re: Imagemaps explained by a dummy

Posted: Sun Jul 15, 2018 9:48 pm
by jane_runs_fast
alice-inwanderland wrote: Sun Jul 15, 2018 12:52 am YOU'RE HEAVEN-SENT! <3 THANK YOU SO MUCH! Your tutorial on imagemaps was the easiest to understand !!! :D :D

Thanks! Glad I could help! I'm gonna do one on sprite movement soon, so look out for that within the next month!

Re: Imagemaps explained by a dummy

Posted: Sun Jul 15, 2018 9:53 pm
by jane_runs_fast
ArizaLuca wrote: Thu May 03, 2018 6:49 pm What if the button/hotspot is circular or irregular in shape? Do you know how you would find coordinates then?
I'm sorry- I do not know how to do circular hot spots- but in the example i do have circular buttons that I use square coordinates on.

When the cursor hovered over the background surrounding the irregular button- the button will change (the background area will still be active for a player, even if they cant see it.) So make the hotspot as tight as you can around the irregular button.

I hope this made sense, I'm typing on my phone.

For more exact clickable area with buttons I recomend searching 'image buttons' on the forum or using that key phrase in Google.