Notes

The Enduring Allure of Choose Your Own Adventure Books by Leslie Jamison.

The warning at the beginning of every Choose Your Own Adventure is also a promise: “You are responsible because you choose! . . . Think carefully before you make a move! One mistake may be your last.” It’s not just saying, You are in control, but also You will find yourself in pleasurable danger.

Rise Up Comus: Hexcrawl Dashboards

I’ve put together a proof of concept for something I’ve been calling the Hexcrawl Dashboard: a patchwork of iFramed tools cobbled together onto a single site for ease of GM access. The gimmick is that you have a single page for your map, your encounters, your random encounters, your dungeons, your monster’s stats - anything you need to reference during play.

More cool use of web pages for running games. We really like the hexes linking out to one page dungeons and the embedded random generators. This looks like a step towards a “control panel” sort of tool, but taking advantage of the innate properties of the web.

False Machine: WHAT IS FLOW CONTROL?? (AND WHY SHOULD I CARE?)

most dungeon design is a complex synthesis between ‘game-ish’ and diegetic elements, treating the adventure purely as a game, or seeing it as in inhabited world, you can make good adventures from either polarity of course and like I wouldn’t mind (or don’t think I would mind as I don’t really play computer games) if I were playing a Nintendo game, being channelled around a long and encountering a series of interconnected boutique situations, but the moment I feel even the hint of those walls close in around me in an adventure I basically shit myself with resentment.

Enjoyed this piece and follow-up over at False Machine. The surrounding conversation is good too. Especially liked this bit from Jacob Hurst’s response:

Show the locks before the keys. Ideally, let the players interact with the locks and experience fun or interesting “failures” to communicate to them that they’ve found a lock and are in need of a key. Couple this with a relatively open area to explore where there are other things to do/find that aren’t locked. These things can, and should, contribute to their progression.

At SXSW, A Pathetic Tech Future Struggles to Be Born

This week, while at SXSW to speak on two panels about crypto-skepticism and algorithmic labor, I was able to check out if crypto, NFTs, web3, and the metaverse really were taking over Austin. What I found was a deeply underwhelming, mundane, and frankly pathetic series of demonstrations and setups that suggest if these digital technologies do take over the world, it’ll be because of how much money their biggest boosters have and how easy it is for that money to generate interest as opposed to anything of true social utility.

goblin manifesto by maya.

a strawberry shortcake is not a goblin food unless it is stolen. slices of processed cheese eaten out of the plastic, that’s #goblincore, that’s goblin food.

Welcome to the World of Playing Cards

Playing cards have been with us since the 14th century, when they first entered popular culture. Over the centuries packs of cards, in all shapes and sizes, have been used for games, gambling, education, conjuring, advertising, fortune telling, political messages or the portrayal of national or ethnic identity. All over the world, whatever language is spoken, their significance is universal.

via href.cool

HTML Dungeons: Maps

Adventure maps perform multiple functions. For us, the two most important are communicating:

  • Environmental and aesthetic flavour. Vibes.
  • Concrete information about the imagined space so referees can give clear descriptions, and players can situate themselves and explore with confidence.

So we like pretty, expressive maps, and we also like them to be usable and easy to reference. Linking keyed locations to their descriptions helps with these goals. And clickable/tappable maps are just fun to use, too.

Linking a map to room or location descriptions turned out to be trickier than we thought it would be. Web 1.0 style image maps are not responsive and so don’t cut it in 2022. We don’t think we’ve arrived at the best solution yet, but here is what we’re doing right now, and it works.

This is how we marked up the map from Swamp Renewal:

<div id="map">
  <a href="#1-swamp-port" title="1. Swamp Port" class="port"></a>
  <a href="#2-wizards-tower" title="2. Wizard's Tower" class="tower"></a>
  <a href="#3-peat-mine" title="3. Peat Mine" class="mine"></a>
  <a href="#4-clearing-zone" title="4. Clearing Zone" class="clearing"></a>
  <a href="#5-gas-farm" title="5. Gas Farm" class="gasfarm"></a>
  <a href="#6-forest" title="6. Forest" class="forest"></a>
  <a href="#7-druids-hut" title="7. Druid's Hut" class="hut"></a>
  <a href="#8-shrine" title="8. Shrine" class="shrine"></a>
  <a href="#9-campsite" title="9. Campsite" class="campsite"></a>
  <a href="#10-oblongs-island" title="10. Oblong's Island" class="oblongs"></a>
  <img src="images/swamp-map-web.jpg" Alt="A map of the Forgotten Quag.">
</div>

It’s a div containing a series of anchor links that point to location descriptions. At the end of the list is our map image.

Note that each link includes a title and class attribute. The title value will appear as a tooltip if the user hovers their mouse over the link target area. We use the class value to reference the link in our CSS, so we can define each link’s size and location on our map.

Here is the CSS for our linked map:

#map { position: relative; width: 100%; margin: 0 auto; }
#map img { max-width: 100%; height: auto; display: block; }
#map a { position: absolute; z-index: 2; }
#map a:hover { border-bottom:0; background: transparent; }

.port { left: 33.31%; top: 39.69%; width: 18.15%; height: 23%;  }
.tower { left: 12.8%; top: 36.95%; width: 17.19%; height: 32.74%; }
.mine { left: 24.5%; top: 10.98%; width: 24.32%; height: 24.82%; }
.clearing { left: 51.89%; top: 11.73%; width: 15.62%; height: 30.53%; }
.gasfarm {left: 68.05%; top: 19.44%; width: 16.76%; height: 27.5%; }
.forest { left: 53.21%; top: 42.69%; width: 13.98%; height: 24.04%; }
.hut { left: 70.68%; top: 49.04%; width: 10.49%; height: 11.63%;  }
.shrine {left: 47.18%; top: 66.83%; width: 14.62%; height: 16.44%; }
.campsite { left: 63.05%; top: 66.8%; width: 19.76%; height: 12.77%;  }
.oblongs { left: 18.12%; top: 79.74%; width: 11.06%; height: 14.91%; }

Each link is an absolutely positioned rectangular box defined by percentages. That’s what makes them scalable and responsive. They’re invisible, but if you could see them, they’d look like this:

Swamp Renewal map with an overlay showing link target areas

We used this responsive image map generator to define our target areas. It doesn’t give us the exact code we want, but it does provide the most important information: those location and size percentages for our target areas. There might be a better tool for this job but we haven’t found it (or made it) yet.

Using this method you are limited to rectangular target areas on your maps. You could instead use SVGs, which allow for any kind of target shape:

We’ll try that next.

One last thing: We just added a tiny, persistent reference map to the fixed sidebar on Swamp Renewal. We love it, we hope other people do it too.

Previously: HTML Dungeons: Links

HTML Dungeons: Links

This is the first in a probable series of posts as we muddle our way through publishing adventures as web pages. Today we will talk about H Y P E R T E X T.

A web page is our second favourite format for publishing and using RPG adventures. Paper booklets are number one: they’re a superior technology for quickly navigating through a document, we enjoy the tactile aspects of gaming (rolling dice, pencils, erasers, books), and we prefer to keep glowing rectangles away from the table whenever possible. But for convenience, accessibility, ease of publishing, and adaptability, HTML is hard to beat. It’s cool to be able to run an adventure for a bunch of friends from your phone.

This post assumes a basic working knowledge of writing HTML and CSS. Teaching web design is beyond us and there are too many excellent, free resources available online to list here. Laurel Schwulst’s Basics of HTML and Basics of CSS are great introductions. For information specific to adventure authoring we recommend Goblin Archives’ Annotated Archive of Game Design Resources, Nate Treme’s Making an HTML Dungeon, James Chip’s Creating ePub and html content for ttrpg designers, and Luke Gearing’s Using Markdown and Pandoc to Make RPG Documents for Free.

Here’s a couple things we’ve figured out or are playing with right now. We’ll use snippets of code from Swamp Renewal as examples.

Hypertext

(Return my future self to the smooth scrolling section)

Linking is HTML’s killer feature, and it makes sense to link every reference you can in your dungeon, especially if your page is long. Every mention of a location, a random table, a creature, can be linked to its definition within the document.

If you are writing in markdown, when you convert your text to HTML your headers will probably be assigned unique IDs automatically:

<h3 id="1-swamp-port">1. Swamp Port</h3>

You can point to these IDs with anchor links:

The golem carries the lumps of peat south, across the bridge to <a href="#1-swamp-port">1. Swamp Port</a>, where it stacks them to dry.

Using reference links when you write will keep your markdown readable and avoid repetition.

Here is the above link as written in our markdown document:

The golem carries the lumps of peat south, across the bridge to [1. Swamp Port], where it stacks them to dry

And here is the reference we include at the end of our text:

[1. Swamp Port]: #1-swamp-port

Our final markdown document for Swamp Renewal makes heavy use of internal linking and reference links. If you’re interested you can download the .md file at itch.io.

We haven’t tried this yet, but we like the idea of weaving our dungeons into the web by linking out to sites like Wikipedia and other relatively stable, open sources for visual or background references. We also like the idea of linking to other adventures that exist on the web – a distributed megadungeon. Or a hex crawl where each hex is linked to a location written by a different author, on a different website.

Smooth Scrolling

Most browsers will scroll smoothly to anchor links on a page with this simple CSS declaration:

html { scroll-behavior: smooth; }

Here’s an example: Take me to the Hypertext section in this post.

Safari, the default browser on Macs, iPhones and iPads, does not currently support smooth scrolling by default. Happily, there is a very easy to implement plugin to enable it on your web pages.

We find smooth scrolling to be more useful than just a nice piece of visual flair. Seeing the page scroll, rather than abruptly jumping from link to link, helps to keep the reader oriented within the page.

Also

We want to see more adventures and dungeons on the open web and more experiments. We have more scribbled notes about print stylesheets, marking up maps, navigation menus, and hosting. Let’s see how we go.

Cave Life For Beginners

Is it the dark, the smell, the disorientation or the discomfort? Why do hermits seek the solitary life within nature’s dark rooms? And what has this to do with art, myths & music?

cita

a feminist indie press publishing open-access books written by women.

Web to Print by John Caserta.

A series of projects that use the Web browser as a general purpose design tool; websites that output to flyers, posters and books.