This tutorial will cover a very basic Ren'Py feature: create a simple navigation map. But, despite its simplicity, I did not found any other cookbook on the matter, so I decided to write one. If this is a duplicate, please kill this thread.
Basic usage
Images
Let's go to space! A spatial exploration game, when YOU have to explore the solar system to prevent the earth's destruction. And what's better to choose your next destination than a totally off-scale map of the solar system?
Name in code: planets.jpg
Demonstration picture, not actually used in the code
Name in code: planets-hover.jpg
Once we got this two images done, the actual coding can begin.
Code
Once you got all the images ready, the code is pretty straightforward.
For each hotspots, we feed the function with its coordinates (in order: x position of upper-left corner, y-position of upper-left corner, width, height), and an action to be performed on click. Here, the action is to jump to the specified label. Note that you must use the syntax `Jump("label")`, with quotes, uppercase and brackets instead of the standard `jump mercury`.
Code: Select all
screen planets: #Preparing the imagemap
imagemap:
ground "planets.jpg"
hover "planets-hover.png"
hotspot (62, 399, 90, 91) clicked Jump("mercury")
hotspot (227, 302, 141, 137) clicked Jump("venus")
hotspot (405, 218, 164, 118) clicked Jump("earth")
hotspot (591, 78, 123, 111) clicked Jump("mars")
# The game starts here.
label start:
"This is an imagemap tutorial."
jump solar_system
label solar_system:
call screen planets #Displaying the imagemap
label mercury:
"It is Mercury."
jump solar_system
label venus:
"It is Venus."
jump solar_system
label earth:
"It is Earth."
jump solar_system
label mars:
"It is Mars."
jump solar_system
Unlockable locations
Sometimes, some locations are not available from start, or are disable after some time. Here, let's imagine the game continues after the earth has been destroyed.
Images
First, we need to prepare two new images.
One complete image, where all the locations which can be unavailable at some point in the game must be drawn in their unavailable state. This will become our new default image.
Name in code: planets-no-earth.jpg
Name in code: earth.png
Code
To activate or deactivate a hotspot, we just need to add a simple condition in the imagemap statement. Note that we changed the default image for the one where the earth is destroyed (inactive).
Code: Select all
screen planets: #Preparing the imagemap
imagemap:
ground "planets-no-earth.jpg"
hover "planets-hover.png"
idle "earth.png"
hotspot (62, 399, 90, 91) clicked Jump("mercury")
hotspot (227, 302, 141, 137) clicked Jump("venus")
if not earth_destroyed:
hotspot (405, 218, 164, 118) clicked Jump("earth")
hotspot (591, 78, 123, 111) clicked Jump("mars")
init python:
earth_destroyed = False
# The game starts here.
label start:
"This is an imagemap tutorial."
jump solar_system
label solar_system:
call screen planets #Displaying the imagemap
label mercury:
"It is Mercury."
jump solar_system
label venus:
"It is Venus."
jump solar_system
label earth:
"It is Earth."
"As soon as you quit it, it is destroyed!"
$ earth_destroyed = True
jump solar_system
label mars:
"It is Mars."
jump solar_system
References:
Image source: http://commons.wikimedia.org/wiki/File:Solar_sys.jpg (public domain)
Technical documentation: http://www.renpy.org/doc/html/screens.h ... statements
PS: What is the difference between creating a recipe here or on the Ren'Py wiki?