Imagemaps explained by a dummy

A place for Ren'Py tutorials and reusable Ren'Py code.
Forum rules
Do not post questions here!

This forum is for example code you want to show other people. Ren'Py questions should be asked in the Ren'Py Questions and Announcements forum.
Message
Author
jane_runs_fast
Regular
Posts: 51
Joined: Sun Oct 01, 2017 1:49 am

Imagemaps explained by a dummy

#1 Post 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.....

User avatar
Cerulean
Newbie
Posts: 3
Joined: Thu Oct 12, 2017 1:20 am
Contact:

Re: Imagemaps explained by a dummy

#2 Post 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!

texasstallion
Regular
Posts: 33
Joined: Tue Jun 27, 2017 4:11 pm
Contact:

Re: Imagemaps explained by a dummy

#3 Post 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")
Last edited by texasstallion on Fri Nov 03, 2017 12:53 am, edited 5 times in total.

texasstallion
Regular
Posts: 33
Joined: Tue Jun 27, 2017 4:11 pm
Contact:

Re: Imagemaps explained by a dummy

#4 Post 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

User avatar
Donmai
Eileen-Class Veteran
Posts: 1958
Joined: Sun Jun 10, 2012 1:45 am
Completed: Toire No Hanako, Li'l Red [NaNoRenO 2013], The One in LOVE [NaNoRenO 2014], Running Blade [NaNoRenO 2016], The Other Question, To The Girl With Sunflowers
Projects: Slumberland
Location: Brazil
Contact:

Re: Imagemaps explained by a dummy

#5 Post 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
Image
No, sorry! You must be mistaking me for someone else.
TOIRE NO HANAKO (A Story About Fear)

User avatar
LateWhiteRabbit
Eileen-Class Veteran
Posts: 1867
Joined: Sat Jan 19, 2008 2:47 pm
Projects: The Space Between
Contact:

Re: Imagemaps explained by a dummy

#6 Post 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!

texasstallion
Regular
Posts: 33
Joined: Tue Jun 27, 2017 4:11 pm
Contact:

Re: Imagemaps explained by a dummy

#7 Post by texasstallion »

Thanks a lot. Now i can finally make a date sim game.

User avatar
DeathSummoner
Regular
Posts: 34
Joined: Sun Feb 18, 2018 10:21 am
Organization: PekoPeko
Deviantart: pekopeko7
Skype: MRA70181
Location: Bangladesh
Contact:

Re: Imagemaps explained by a dummy

#8 Post by DeathSummoner »

Who says you are a dumb....you are a life saver....this explained me everything

jane_runs_fast
Regular
Posts: 51
Joined: Sun Oct 01, 2017 1:49 am

Re: Imagemaps explained by a dummy

#9 Post by jane_runs_fast »

I am glad this could be of help! XD

ArizaLuca
Veteran
Posts: 241
Joined: Tue Feb 20, 2018 12:59 pm
Completed: Through the Screen, Riddle Me This, Trust Fall, Phobias, Another Adventure
Projects: The Souls in the Seams, Fata Morgana, Minecraft: Story Mode - Behind the Scenes
Organization: Astral Autumn Games
Tumblr: astralautumngames
Deviantart: ArizaLuca
itch: astralautumngames
Contact:

Re: Imagemaps explained by a dummy

#10 Post by ArizaLuca »

What if the button/hotspot is circular or irregular in shape? Do you know how you would find coordinates then?

User avatar
Nicckonator
Regular
Posts: 35
Joined: Tue May 08, 2018 12:07 pm
Projects: Ochiba - Falling Leaves
Deviantart: Nicckonator
Contact:

Re: Imagemaps explained by a dummy

#11 Post by Nicckonator »

Thank you! big up.
GD - Game Developer, and owner of NK Productions,
the company currently making Ochiba - Falling Leaves (Visual Novel).

User avatar
milkteebaby
Regular
Posts: 58
Joined: Wed Jan 18, 2017 1:14 am
Projects: PS: I Love You
Tumblr: milkteebaby
Deviantart: milkteebaby
Location: Shanghai
Contact:

Re: Imagemaps explained by a dummy

#12 Post 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

User avatar
alice-inwanderland
Newbie
Posts: 10
Joined: Mon Jul 02, 2018 11:02 pm
Tumblr: lacie-inwanderland
Contact:

Re: Imagemaps explained by a dummy

#13 Post by alice-inwanderland »

YOU'RE HEAVEN-SENT! <3 THANK YOU SO MUCH! Your tutorial on imagemaps was the easiest to understand !!! :D :D

jane_runs_fast
Regular
Posts: 51
Joined: Sun Oct 01, 2017 1:49 am

Re: Imagemaps explained by a dummy

#14 Post 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!

jane_runs_fast
Regular
Posts: 51
Joined: Sun Oct 01, 2017 1:49 am

Re: Imagemaps explained by a dummy

#15 Post 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.

Post Reply

Who is online

Users browsing this forum: No registered users