A simple navigation map tutorial
Posted: Sun Jul 21, 2013 11:48 am
Hello,
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
A map is cool, but you need to mark locations on it, spots on which the user can click to do something. An imagemap hotspot is a rectangular area defined by the coordinates of its upper-left corner, its width and its height. A picture is worth a thousand words:
Demonstration picture, not actually used in the code
Next, most of the time, you want to give the user some kind of visual feedback when he or she rolls over a clickable area. For that, we need to create a second image where the hotspots are all in "hover mode".
Name in code: planets-hover.jpg
Note that we only needs the hotspots for this layer, and we do not care at all about the rest of the picture.
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`.
And that's it. We have a functional map.
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
One partial image, where all the locations which can be unavailable are in their available state.
Name in code: earth.png
The hover image stays the same.
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).
The rest is Ren'Py magic.
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?
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?
