A simple navigation map tutorial

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
User avatar
Skarn
Regular
Posts: 42
Joined: Mon Apr 30, 2012 4:08 pm
Contact:

A simple navigation map tutorial

#1 Post by Skarn » 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?
Image
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:
Image
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".
Image
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`.

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
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.
Image
Name in code: planets-no-earth.jpg
One partial image, where all the locations which can be unavailable are in their available state.
Image
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).

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
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?
Last edited by Skarn on Mon Jul 22, 2013 4:14 pm, edited 1 time in total.

User avatar
PyTom
Ren'Py Creator
Posts: 15468
Joined: Mon Feb 02, 2004 10:58 am
Completed: Moonlight Walks
Projects: Ren'Py
IRC Nick: renpytom
Github: renpytom
itch: renpytom
Location: Kings Park, NY
Contact:

Re: A simple navigation map tutorial

#2 Post by PyTom » Sun Jul 21, 2013 10:56 pm

Skarn wrote:PS: What is the difference between creating a recipe here or on the Ren'Py wiki?
The wiki is massively out of date, and you need to create an account to post there, and I have to approve that account. (Since spam. Tons and tons of spam.)

I'd also suggest that this tutorial could be a bit better if it used screens, rather than renpy.imagemap.
Supporting creators since 2004
(When was the last time you backed up your game?)
"Do good work." - Virgil Ivan "Gus" Grissom
"Silly and fun things are important." - Elon Musk
Software > Drama • https://www.patreon.com/renpytom

User avatar
Skarn
Regular
Posts: 42
Joined: Mon Apr 30, 2012 4:08 pm
Contact:

Re: A simple navigation map tutorial

#3 Post by Skarn » Mon Jul 22, 2013 4:14 pm

Sorry, I did miss that renpy.imagemap was deprecated. I have updated the code to use the screen syntax (thanks to Aleema Customizing Menus Tutorial). Screens being a lot more powerful than old renpy.imagemap, I will probably make a bigger update later to cover some of the new possibilities they offer.

User avatar
Sslaxx
Regular
Posts: 52
Joined: Thu Jul 18, 2013 7:35 pm
Location: Malvern, UK
Contact:

Re: A simple navigation map tutorial

#4 Post by Sslaxx » Tue Jul 23, 2013 11:26 am

I have potentially rather stupid questions here: does the imagemap have to be the same size as the game's resolution? And does the "hover" image have to be just the "hovering" hotspot images?

EDIT: The answer seems to be "No" to both of my questions. Odd, because it wasn't working properly at first. Hmmm. Wonder if this is a persistent data issue biting me in the arse.

EDIT 2: Or is it the imagemap cache? Hmmm.
Stuart "Sslaxx" Moore.

User avatar
SBG_Eric
Regular
Posts: 65
Joined: Fri Feb 07, 2014 11:40 pm
Completed: Warhammer 40K (non-commercial MTG set), Tales of Symphonia (non-commercial MTG set)
Projects: Galactic Domain, Dragonfish Racers, *A Yet Unnamed Miniatures Wargame*
Organization: Sunbridge Games LLC
IRC Nick: SBG_Eric
Location: USA, East Coast
Contact:

Re: A simple navigation map tutorial

#5 Post by SBG_Eric » Wed Feb 26, 2014 4:50 pm

Hey, this is a really nifty piece of code but I have a question about working with it.

Code: Select all

# The game starts here.
label start:
    "This is an imagemap tutorial."
    jump solar_system
Can I build this into a menu rather than using it directly in the game's Script.rpy file? The general idea would be to have an menu button that would take a player to the game's overland map for fast-travel. Thanks for your help, and great job with the tutorial!
Sunbridge Games Projects
Visual Novel Project (Pre-Dev): http://lemmasoft.renai.us/forums/viewto ... 60&t=33087
- Seeking Writer (5% per scenario) [1 Scenarios Remaining]

Galactic Domain (Post-Dev/Testing) & Dragonfish Racers (In-Dev): Projects on Hold // Require Artist(s)

Other projects TBA: 2+

Fantasy/Play-or-Die Light Novel (Outline/Drafting)

User avatar
noeinan
Eileen-Class Veteran
Posts: 1126
Joined: Sun Apr 04, 2010 10:10 pm
Projects: Ren'Py QuickStart, Crimson Rue
Organization: Statistically Unlikely Games
Deviantart: noeinan
Github: noeinan
Location: Washington State, USA
Contact:

Re: A simple navigation map tutorial

#6 Post by noeinan » Thu Feb 27, 2014 2:20 pm

This is really cool, thank you for posting! Do you have any rules or requirements for how you would like the images or code used? I ask because I've been making a Ren'Py quickstart including a lot of features new users might like, but can't yet code and I think this would be a great addition.
Image

Image
Image

User avatar
SundownKid
Lemma-Class Veteran
Posts: 2299
Joined: Mon Feb 06, 2012 9:50 pm
Completed: Icebound, Selenon Rising Ep. 1-2
Projects: Selenon Rising Ep. 3-4
Organization: Fastermind Games
Deviantart: sundownkid
Location: NYC
Contact:

Re: A simple navigation map tutorial

#7 Post by SundownKid » Thu Feb 27, 2014 2:25 pm

PyTom wrote:
Skarn wrote:PS: What is the difference between creating a recipe here or on the Ren'Py wiki?
The wiki is massively out of date, and you need to create an account to post there, and I have to approve that account. (Since spam. Tons and tons of spam.)

I'd also suggest that this tutorial could be a bit better if it used screens, rather than renpy.imagemap.
I did a check on the Cookbook a while back and (almost) nothing there is so out of date as to be unusable. Personally I like the idea of an index page better since a forum is harder to navigate based on topic. If you do end up removing the rest of the Wiki documentation, I feel that the cookbook aspect of it should be kept and expanded.

marigoldsofthenight
Regular
Posts: 44
Joined: Sat Aug 14, 2010 5:31 pm
Contact:

Re: A simple navigation map tutorial

#8 Post by marigoldsofthenight » Mon Mar 03, 2014 3:26 pm

Let's say I want each planet to be able to be nullified like the earth. Do I need to make separate screens for each individual one?

Eligar
Newbie
Posts: 14
Joined: Thu Apr 24, 2014 11:55 am
Contact:

Re: A simple navigation map tutorial

#9 Post by Eligar » Thu Apr 24, 2014 11:59 pm

I'm wondering, if I want more then 1 overworld map, how would I go about doing that? Seeing as

"screen planets: #Preparing the imagemap
imagemap:
ground "planets.jpg"
hover "planets-hover.png"
etc.

Happeneds 'before' your labels. I want 2 overworld maps. 1 located in town, the other located within a building. Is that possible?

EDIT: Oh wait, of course you can, I'm just being a dummy. Just add another:

"screen town: #Preparing the second imagemap
imagemap:
ground "town.jpg"
hover "town-hover.png"
Last edited by Eligar on Sun Apr 27, 2014 5:38 pm, edited 1 time in total.

Eligar
Newbie
Posts: 14
Joined: Thu Apr 24, 2014 11:55 am
Contact:

Re: A simple navigation map tutorial

#10 Post by Eligar » Sun Apr 27, 2014 5:37 pm

Right, so I'm still having trouble with this. In your tutorial you give a specific set of coordinates. However if I move those coordinates, it takes the Hover map with it. (See picture)

Image

I moved the coordinates from their original position and moved the y axis up a bit. Seeing as in my world map the location is a bit higher.
I expected it worked like this:

ground = underlying map
hover = overlying map with user feedback (like a glow, or a change of color, or in your example a circle around it.) which is hidden until you mouse over it.
hotspot = Picking 1 spot on the map which reveals the hover when you mouse over it.

Any help is greatly appreciated.

User avatar
Alex
Lemma-Class Veteran
Posts: 2489
Joined: Fri Dec 11, 2009 5:25 pm
Contact:

Re: A simple navigation map tutorial

#11 Post by Alex » Sun Apr 27, 2014 5:50 pm

I moved the coordinates from their original position and moved the y axis up a bit.
Have you changed all the images used for the imagemap to make them fit the new coordinates?
If so, try to clear the cache - http://www.renpy.org/wiki/renpy/FAQ#Why ... correct.3F

Eligar
Newbie
Posts: 14
Joined: Thu Apr 24, 2014 11:55 am
Contact:

Re: A simple navigation map tutorial

#12 Post by Eligar » Sun Apr 27, 2014 5:56 pm

Alex wrote:
I moved the coordinates from their original position and moved the y axis up a bit.
Have you changed all the images used for the imagemap to make them fit the new coordinates?
If so, try to clear the cache - http://www.renpy.org/wiki/renpy/FAQ#Why ... correct.3F
Oh man, I tried removing my reply the moment you posted haha. Yeah it was a cache issue. Okay, that'll help me one step further. Thanks :)
By the way, the wiki reads:

"You can disable caching all together by using this code:

config.imagemap_cache = False"

Where would in my code would I put that line?

Edit: By the way, Thanks for the fast reply!

User avatar
Alex
Lemma-Class Veteran
Posts: 2489
Joined: Fri Dec 11, 2009 5:25 pm
Contact:

Re: A simple navigation map tutorial

#13 Post by Alex » Sun Apr 27, 2014 6:03 pm

You can put it inside any init python block or inside any init block (but don't forget about $-sign) - http://www.renpy.org/doc/html/python.html

steve_T
Regular
Posts: 34
Joined: Mon Oct 27, 2014 8:26 pm
Contact:

Re: A simple navigation map tutorial

#14 Post by steve_T » Thu Feb 12, 2015 12:51 am

Thanks this is exactly what I was looking for. :D

Ishigreensa
Newbie
Posts: 17
Joined: Sun Jul 06, 2014 8:11 am
Contact:

Re: A simple navigation map tutorial

#15 Post by Ishigreensa » Sat Feb 28, 2015 10:24 am

Question: Can I use?
screen choice:

imagemap:

if grab == 'xxx':
hotspot ( ) clicked Return('xxx')

or can I only use IF ... True in screen language?

Post Reply

Who is online

Users browsing this forum: No registered users