Imagemap Tutorial Part 4 - The Preferences Menu
Imagemap Tutorial Navigation:
Part 1 - Imagemap Basics |Part 2 - The Main Menu | Part 3 - The Save/Load Menu | Part 4 - The Preferences Menu | Part 5 - The Navigation Menu | Part 6 - The Yes/No Prompt
Welcome to part 4 of the Imagemap Tutorial!
In this part of the tutorial, I’m going to show you, step-by-step, how to make a functional imagemap for the preferences menu.
Step #1: Make the images for your save/load menu imagemap using an art program of your choice.
Just like with the main menu and save/load imagemaps, the preferences menu imagemap requires images for the ground, idle, and hover states.
However, in addition to these, images for the selected ground and selected idle states are also required; this is because they are needed in order for the player to know what game settings are toggled on/off. When a game setting is toggled on, the player needs to see a visible difference in the menu in order to differentiate between settings that are “on” versus those that are “off.” The selected hover state is also needed, but if you don’t want this state to be different from the selected idle state, you can make it the same as the image for the idle state.
**Protip: I decided to make the images for the selected states show only the game settings because that’s what they’re for; this also saves file space.
Don’t forget to make your images have transparent backgrounds if you already have a custom background defined for your preferences menu!
Let’s move on to the coding!
Step #2: Imagemap coding.
The default preferences menu in Ren’Py includes a navigation menu, as shown in the beginning of the code below:
screen preferences: tag menu # Include the navigation. use navigation
If you want your preferences menu to have a navigation menu on it (which is preferable so that the player can use it to go to different menus or return to the game), you’ll need to make a separate imagemap for it and put the coding within screen preferences section in the “screens.rpy” file. In addition, you’ll also need to make separate state images for this imagemap (e.g. ground, idle, and hover).
The coding for the navigation menu is exactly like any other imagemap coding. Let’s go through this first before tackling the preferences menu itself.
Here’s what my code looks like:
##Code for navigation menu imagemap on the preferences screen imagemap: ground "GUI/prefs screen/prefs_menu_ground.png" idle "GUI/prefs screen/prefs_menu_idle.png" hover "GUI/prefs screen/prefs_menu_hover.png" hotspot (132, 543, 85, 42) action ShowMenu("load") hotspot (227, 544, 76, 39) action ShowMenu("save") hotspot (314, 547, 72, 39) action Help() hotspot (480, 546, 74, 37) action Quit() hotspot (389, 547, 77, 35) action MainMenu() hotspot (558, 546, 103, 39) action Return()
See? The above code is nothing new; if you’ve read the previous imagemap menu tutorials, you should be familiar with it. You’ll notice that this code is just like the imagemap code for the main menu as well, except that there’s no “Bonus” hotspot defined here, but there’s a “Main Menu” hotspot defined instead.
Make sure to define the images for the three states – ground, idle, and hover – as well as define them in the code and copy/paste the images in your game folder. (Here’s what my navigation menu images look like!)
Use the Developer Menu in Ren’Py (or the slice tool in Photoshop) to determine the coordinates for the hotspots using any one of the image states you designed, and type in your coordinates.
This code goes within screen preferences in the “screens.rpy” file. Copy/paste the code below into the “screens.rpy” file, replacing everything within screen preferences after tag menu in the default code. Like this:
screen preferences: tag menu ##Code for navigation menu imagemap on the preferences screen imagemap: ground "GUI/prefs screen/prefs_menu_ground.png" idle "GUI/prefs screen/prefs_menu_idle.png" hover "GUI/prefs screen/prefs_menu_hover.png" hotspot (132, 543, 85, 42) action ShowMenu("load") hotspot (227, 544, 76, 39) action ShowMenu("save") hotspot (314, 547, 72, 39) action Help() hotspot (480, 546, 74, 37) action Quit() hotspot (389, 547, 77, 35) action MainMenu() hotspot (558, 546, 103, 39) action Return()
Now that we’ve got the navigation done, let’s get back to the coding for the game settings on the preferences menu.
I’m going to show you my code, and break it down for you. Don’t worry, it looks like a lot – but it’s not that bad! This code goes right after the navigation menu imagemap in the screen preferences section of the “screens.rpy” file.
imagemap: ground "FILE NAME HERE" idle "FILE NAME HERE" hover "FILE NAME HERE" selected_idle "FILE NAME HERE" selected_hover "FILE NAME HERE" alpha False hotspot (#, #, #, #) action Preference("display", "fullscreen") hotspot (#, #, #, #) action Preference("display", "window") hotspot (#, #, #, #) action Preference("skip", "seen") hotspot (#, #, #, #) action Preference("skip", "all") hotspot (#, #, #, #) action Preference("transitions", "all") hotspot (#, #, #, #) action Preference("transitions", "none") hotspot (#, #, #, #) action Preference("after choices", "stop") hotspot (#, #, #, #) action Preference("after choices", "skip") bar pos (#, #) value Preference("text speed") style "pref_slider" bar pos (#, #) value Preference("sound volume") style "pref_slider" bar pos (#, #) value Preference("music volume") style "pref_slider" bar pos (#, #) value Preference("auto-forward time") style "pref_slider" init -2 python: style.pref_slider.left_bar = "FILE NAME HERE" style.pref_slider.right_bar = "FILE NAME HERE" style.pref_slider.xmaximum = 164 style.pref_slider.ymaximum = 30 style.pref_slider.thumb = "FILE NAME HERE” style.pref_slider.thumb_offset = 4 style.pref_slider.thumb_shadow = None
Now, let’s break down this code from top-to-bottom:
Imagemap – This defines the whole imagemap. Where it says ground, idle, hover, selected_idle, and selected_hover is where you define your images. Make sure that you’re putting the location (if you have your images in a sub-folder), name of the file, and the extension of the file.
alpha False – This allows the player to interact with the imagemap, even with the parts that are transparent. If you set this to “True,” then the player won’t be able to click anywhere on your images that is transparent (which sucks if your images have transparent backgrounds).
action Preference – This is unique to the preferences menu. It defines the preferences – or game settings – that the player can change. The preferences are defined in quotation marks in the parentheses; these are default game settings that Ren’Py already has. Each preference has its own hotspot, so make sure to define each one properly (here’s an example, if you’re stuck).
bar pos – This is needed for the game settings that require slider bars to change (e.g. text speed, volume, and auto-forward time). The position of the slider bars is indicated by (#, #), where the pound signs represent (horizontal position, vertical position) on your image.
style “pref_slider” – This is needed so that you can customize the appearance of the slider bars.
Init-2 python – This is an “init” block defined with Python language. In this block, you use coding to customize the slider bars; it refers to the style declared above (“pref_slider”).
style.pref_slider.left_bar – This refers to an image of your slider bar; specifically, what it looks like when it’s full. (Here’s a diagram illustrating my slider bar when it’s full and empty, as well as what my slider bar’s thumb looks like!)
style.pref_slider.left_bar – This refers to an image of your slider bar; specifically, what it looks like when it’s empty.
style.pref_slider.xmaximum – This refers to the width of your slider bar in pixels.
style.pref_slider.ymaximum – This refers to the height of your slider bar in pixels.
style.pref_slider.thumb – This refers to an image of your slider bar’s thumb, which is the little part in the middle of the bar that you can move around. You don’t have to have one of these; if you don’t want it, just remove all of the code that has thumb in it.
style.pref_slider.thumb_offset – This refers to the size of your slider bar’s thumb; specifically, half of the width of the thumb in pixels (e.g. my slider bar thumb is 8 pixels wide, so I typed in 4 in my code).
style.pref_slider.thumb_shadow – This defines whether or not you want your slider bar thumb to have a drop shadow. If you don’t want one, set this equal to None (as shown).
If you’ve defined all your images, hotspots, and put the code within the screen preferences section in the “screens.rpy” file, your preferences menu should look totally customized! Congratulations! (Here’s what my preferences menu looks like!)
I should note one last thing: if you have a navigation menu, the “Save” and “Main Menu” hotspots won’t react to the mouse until a save file has been made in your game. If this happens to you, don’t worry! Your hotspots will work when you make a save file.
That’s it for this menu imagemap! In the next part of the Imagemap Tutorial, I’ll show you how to make a custom navigation menu that appears elsewhere (e.g. below the dialogue box during your game).