The Hex Garden

Encounters

1. Three inductees in vivid butterfly robes, gardening.
2. Brilliant, giant butterfly, fluttering above the chapel.
3. Hex Priest.
4. Two furred, swift, small humanoids, stealing figs.
5. Giant caterpillar, feeding on the nearest green leaf. Poisonous to the touch.
6. Huge, sleepy boar, drunk on fermented fruit, hungry for sweet potato.

Small Garden Bed

Freshly turned soil, covered in mulch. Trellis of sticks and string. Shovel. No visible plantings. Twelve inches below the surface: two human skulls, one with seven gold teeth, one with a spiky inscription carved into the jawbone: “BROKEN BROTHER”.

A deer silently watches nearby, chewing on a grey, woody shrub with yellow flowers. The leaves of this shrub, if consumed, act as a stimulant.

Manure Shed

Two piles of giant caterpillar frass. Each piece of dung is the size of a watermelon, ridged like a corncob. Left pile is green, moist, pungent. Right pile is brown, dry, crumbly, flammable. An inductee loads dry frass into a cart with a pitchfork.

Induction Hex

Raised stone platform. Ancient but with evidence of recent use. Wax. Dark stains on stone. A ring of charms, scrawled symmetrical sigils, scrounged offerings (wing and chrysalis fragments, bowls of nectar).

Induction ceremonies occur in the hour between midnight and 1am, lit by four lantern fruits on poles. Inductees consume a sweet blue tea, are tightly wrapped head to toe in cloth, daubed with nectar, and then left alone on the altar, on a vision quest until dawn. If they are visited by a giant, luminous white butterfly, their metamorphosis is deemed to be complete and they are accepted into the church.

Large Garden Bed

Six plantings:

1. Banana tree. 1 in 6 chance of a giant grub inside a banana.
2. Holy Herb. Savory, calming. Induction tea ingredient. Forbidden to pick.
3. Sweet underground tubers. When boiled and mashed, a giant butterfly favourite.
4. Lantern fruit. Glow at night. Tomatillo shaped but the size of a softball. A picked fruit will glow for 2d6 hours.
5. Butterbell. Spreading vine with dazzling, bell-shaped flowers. Intense psychic effects when consumed: the user will flap limbs as if wings unless restrained for 1d6 hours. May embark on a vision quest. Ingredient of induction tea.
6. Milky Weed. Essential food for butterflies and larvae.

Garden Chapel

The Church of the Winged Eye worships the giant butterflies and provides for the residents of the butterfly house. Maintained by the Hex Priest and numerous inductees. Ruined outer walls daubed with butterfly patterns and prayers. A series of ramps and raised platforms. Open ceiling to facilitate the reception of butterfly visitations. Offerings of fruit and flowers. Inside: bench seating, a bowl of nectar, prayer mats, pulpit. Oil burners, fueled by dry frass, emitting sweet smells. In a locked cupboard under the pulpit, a book of handwritten butterfly names, a small frypan, a jar of horse fat, and three fresh butterfly eggs.

The Hex Priest. Magnificent butterfly wing inspired robe, deeply hooded. Gentle, softly spoken. Sincere but conflicted. Expressive hands. Wants to transform followers, earn the blessings of the butterflies, and to be transformed. Despises Vyvyan (notorious eater of larvae), will quietly offer a modest bounty for her head.

Melon Patch

Garden bed of enormous melons. Each needs two people to carry it. One person may be able to roll a melon. Insides are bright yellow with almost fluorescent orange patterning. Impossibly sweet.

An inductee (named Patch, older than the others, sceptical) tends the garden. Gregarious, loose-lipped. Believes the butterfly house is sacrilege and the butterflies should be freed. Is not the only inductee with this view.

Two inductees roll a melon towards the chapel.

Great Fig

Enormous tree with broad, spreading roots, heavy leaf cover and abundant fruit. A giant spider, Gyrt, brother of Vyvyan, lurks in the upper branches. He listens and waits. If the area underneath the tree is inspected, footprints in the earth are found leading up to the trunk. Obscured under a layer of soil and leaf litter is a rough, locked, wooden hatch, leading to XXXX.

Figs are the size of soccer balls, and a favourite of the butterflies. Other items may be found within a fig. If cut open, roll on this table:

1. Nothing, just fig.
2. Only fig.
3. More fig.
4. Giant wasp carcass.
5. Big, hungry blood worm.
6. Fig pearl.

The Butterfly House

Antechamber

Front door is broken. Door to main room is locked, key kept by the Butterfly Warden. A sparkling, ceremonial saddle of leather, gold, and gems is visible resting atop a high leaf in the main room.

Main Room

Humid, smells of citrus. Dense growth of large-leafed plants and oversized flowers. Three giant butterflies flutter above. The butterflies are agitated, melancholic, forgetful, up to one hundred years old. Two giant caterpillars, furred, poisonous, silently feeding. One giant chrysalis, hanging low from an enormous fern. One pane of glass in the roof has smashed, leaving patches of glass shards on leaves and the ground. In the north-west corner, under a broad leaf, a giant spider, Vyvyan. She has entered via the broken window. Vyvyan seeks eggs and larvae for her dinner. Scheming, haughty, hungry, dangerous.

Warden’s Quarters

Warden is tired, anxious, underpaid, easily influenced. Lizardfolk, named Elliot. Favourite food is egg of any origin. Wants the giant spider gone, the broken glass repaired. Possesses keys to Butterfly room, shed, and hatch. A warm stone for sleeping. Bowl of grubs on table. Two butterfly eggs in cupboard.

Utility Shed, Room One

Locked. Wheelbarrow, shovel, pitchfork, assorted small tools. 50 foot rope.

Utility Shed, Room Two

Barrel of sugar water. Workbench. Large knife, machete. Three melons. Bucket of fruit peels and rinds. Door to main butterfly room. Locked hatch in the floor, warm to the touch.

The Hatchery

Exterior door is locked. Door to main butterfly room latched, but unlocked. Warm, wet, dark, smells of fat. Shelves containing 13 wood buckets, each holding a single giant butterfly egg (the size of a butternut pumpkin) and a shallow pool of liquid. Two eggs are hatching. One has hatched, a newborn grub climbs the wall. A grate in the floor, emitting warm air. Bucket of water, a damp rag.

Image references via Virginia Tech, NGA, and photos we took while wandering through Smokva, our local community garden.

We’ll be editing this stuff on the fly. It’s fun so far.

2022-12-25

Stairs. If the iron cauldron is full, a player who walks to the top of the stairs and steps beyond will discover an invisible staircase that extends up to XXXX.

2022-12-26

Groundskeeper’s hut. Locked. Inside, a cot, candles, shovel, leather gloves, notebook, pitchfork. Filthy, dark, spiderwebbed, abandoned. Ladder to rooftop garden.

2022-12-27

Steam house. Dilapidated. Wood door, rotten, no lock. Bench seating against the walls. Lingering fire in middle of room, smoke, steam. Hot stones, bucket (half full).

2022-12-28

Pool. Seven foot walls, warm to the touch. Within: warm, dark liquid, 30 feet deep. Leads to XXXX.

2022-12-29

Iron cauldron. Empty. Will enable access to the invisible staircase if filled with warm water.

2022-12-30

Small stone structure. Hole on the front, large enough to fit a human arm. Inside, a smooth-skinned, cat-sized, four-legged creature with large eyes, an iridescent sheen, and sharp teeth. Wary. Around their neck, a rope collar and leather tag with the word “Parsley” on one side, on the other, “Friend of Rudy”

2022-12-31

Water tower. Wood tank full of fresh rainwater. Pipe leads from the tank into the earth. A rudimentary valve and tap near the base, rusted shut.

2023-01-01

Woodshed. Piles of chopped birch. An axe. A stump.

2023-01-02

Reflecting Pool. Shallow pond. A moonstone under the surface of the water.

Numbered Works No. 6, a one page goat tower adventure, is now available on Itch.io for two American dollars. HTML version will be posted here soon is now live!.

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:

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:

• Create responsive SVG image maps
• Hyperlinks/Anchors Inside SVG Graphics
• Create A Responsive Imagemap With SVG

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

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.