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.
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.
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.
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. 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"
A new window with a TON of image names should pop up.
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.)
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.
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')
##############################################################
#############################################################
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.....