What systems to use for a map with revisitable spaces?

Authoring General Design Discussions
,
1

Hi all!
I asked this under my introduction, and was wisely advised to make it it’s own question.

I’d like to design a game where there’s some kind of overview space that gives you a map.

Perhaps initially, only a few places are visitable, but I’d like to be able to return to spaces already visited.

The dream would be if players can click directly on the map with their desired destination, but if they can see the map and click on something below that chooses their destination, that’s good enough.

I’d prefer to avoid having players type out their choices if possible.
And while writing this question, I realised what inspired my design preference:

image
image801×600 67.3 KB

What do you recommend?

4 Likes
2

Are you hoping to create a choice-narrative or a parser narrative where typing is the primary interface?

Probably the easiest solution in almost any implementation is to display a map with locations labeled with numbers or letters and then display a list to choose from - either clickable or a parser choice menu “Type in/click the letter where you want to go.”

In Inform 7 this would involve displaying a “figure” of the map and limiting the player’s input when choosing a destination.

In a choice narrative system like Twine, you can similarly display the image, and have the choice list be links the player clicks on that link to the relevant starting passage of the location.

If you want the player to literally click on the portion of the map they want to go to with hotspots, that gets a little more complicated. It’s do-able, but involves some external HTML trickery with image maps to create hotspots over your image.

One system I’ve personally worked with that handled clickable hotspot images natively in the IDE (which was simple enough that I was able to do it!) was Visual Novel Maker - which is a commercial app designed for standard visual novels, which are a very specific type of game, but in my experience the tool is flexible enough if you wanted to make a simple choice narrative without the VN trappings and include clickable maps.

One other potential option: Quest is an IF creation system that allows an interface with a lot of clickable links and produces a simple (non artistic) map and has a clickable compass with directions. It tends to work best if your player is on PC and has downloaded the Quest player - games can be played in browser but tend to lag a bit for very complicated implementations.

Quest can handle both parser “type in what you want to do” interaction and choice narratives with clickable links.

Screen Shot 2023-06-20 at 11.37.52 AM
Screen Shot 2023-06-20 at 11.37.52 AM951×604 66.4 KB

5 Likes
3

All the story formats in Twine can do what you need as you can incorporate web browser solutions, and clickable image maps (as Hanon suggested) are a part of HTML web pages. There are no limits to what can be done in a web browser. You can even do 3D if you wish. It can get as complicated or remain as simple as you want. Twine is focused on choice-based stories and works in the web browser, as it’s a web page in it’s final form.

However, if you are unfamiliar with HTML / JS / CSS (or don’t want to learn any of those web technologies) then it might be best to explore an authoring system that supports clickable image maps and just make that your primary criteria.

The good thing is that whatever authoring system you choose, there will be people here to help. There is no wrong choice, just as long as it meets your need of a clickable map and feels a bit intuitive to use, you’ll be fine.

I’ve always wanted to try Ren’Py and someone made it do maps as well… https://www.youtube.com/watch?v=o699N1TdlZ8

Good luck! Let us know if you have any questions about what has been suggested thus far. I’m sure others will chime in with more options.

3 Likes
4

For a parser game, TADS supports image maps and roll-over images. More here and here. (Note that this only works on HTML TADS interpreters, such as QTads.)

3 Likes
5

So… you’re looking for a parser game engine with a clickable map? I’m just a little confused.

6

Inform can do this—see Hadean Lands for an example—but not out of the box. If you need the map to be clickable, you’re better off using TADS, which it sounds like has proper imagemap support.

Inform can show the map without an issue, but the rooms won’t be clickable without some hacking. So the closest you’ll get is showing the map and letting players type “GO TO THE MACHINE SHOP” or the like.

4 Likes
7

I think only ADRIFT Runner can do that by default but it is limited to Windows only, though you can play the games on other platforms without a clickable map with Frankendrift. However, I can imagine that you could program that in e.g. Twine(?). Adrift is a parser interface but you could give numbered choices.

In Quest you cannot click on the map, but you can click on the compass rose and look at the map. It is Windows but also runs in a browser but is known to sometimes have issues, especially speed problems, when playing in the browser.

So at the moment, auto-mapping programs have platform limitations. I wish there was a standard for auto-mapping available to all popular IF systems but that is apparently hard to do in practice.

2 Likes
8

Yeah, I’d also recommend either Quest or (HTML) TADS. Quest requires a bit of knowledge in web design magic (and sometimes runs differently on various browsers), and HTML TADS requires the player to be in an HTML-compliant interpreter (which you can determine by checking the value of outputManager.htmlMode).

5 Likes
9

That’s a really great one, if you don’t mind the website that hosts it.

EDIT: Did not see yours at all, @inventor200 !

3 Likes
10

Thank you everyone for your responses so far! I’m completely overwhelmed, BUT. That was actually was I came here for - a wealth of knowledge and information beyond my current understanding. So thank you!
Bit by bit, I will start to understand how some of the above tools work, and see how they match with the odd visions in my head.

For those of you confused about what I’m asking for:

my two favourite games of 2022 were “Roadwarden” and “Citizen Sleeper” - games that were built around exploration and narrative. Meeting people, choosing how to feel about them, trading, finding resources around a map, solving puzzles… managing your energy levels…

It seems to me that they combine elements of both sides of the dichotomy of “parser” and “choice-based”. And my games so far seems to be largely “parser” inspired, but built in a “choice-based” engine (Ink).

But. Maybe I’m misunderstanding this divide between parser and choice-based… it’s entirely possible, as the terms are new to me. I’m currently trying to learn a bit of GrueScript (recommended by someone when I first posted this on my introduction page), and then I’ll explore some more of your options listed above.
Thank you again! So much to learn, it’s all very exciting.

Part of the Roadwarden map:

image
image1387×786 120 KB

Part of the Citizen Sleeper map:

image
image1598×875 145 KB

2 Likes
11

I think you have your definitions a lil confused!

Parsers are not necessarily puzzles, resource, energy levels, etc.

They are simply games where you type in commands for what you want to do in the game (with your keyboard or other method of writing words on a computer)

Choice-based games are games where you can merely choose from a provided list of options.

Both Roadwarden and Citizen Sleeper are choice-based, they have no parser elements.

edit: actually Roadwarden might have a few places where you can type things in like your name and like, asking someone about something (it’s been a while since I played) but those are very minimal.

4 Likes
12

If you’re experienced with these things, it’s easy to see how games like 80 Days and Monster Prom and Ftaghn! are choice-narratives dressed up in a flashy graphical interface - 80 Days has the moving globe, and the latter two are more obviously structured like board-games. All of these could totally work in a text-only format.

3 Likes
13

If you’re doing it in Twine, you can do an image map. Another option is a flex grid with buttons. That’s pretty flexible for a range of screen widths.

14

If you are working in Twine, you can easily do Clickable Image Maps in any of the major formats. I have a handy guide to doing this:

An alternative to doing this with traditional HTML Image Maps is to use an SVG image to do the clickable areas. This has many advantages, including scaling to mobile screens, highlighting clickable areas, and other styling. Here’s a guide for that, courtesy of Cyrus Firheir.

3 Likes