Kids RPG Journal – #58 Optimizing for Print

Instead of curling up with the iPad and doodling monsters and enjoying the latest season of Stranger Things, I went down the coding rabbit hole and optimized the Harrowlands website for mobile and print. This cleanup has been on my list of things to do ever since I started building the site and my initial attempts were inconsistent.

This time, I went into the CSS (cascading style sheets) and stripped out everything that was not necessary or responsive. I won’t go into the technical CSS  in-depth here, because this is meant to be more about my process as a gamer, not a developer, so I’m going to focus on my goals and what I accomplished.

Since Harrowlands is primarily a resource for me to use for my games with the kids, I wanted it to be flexible as possible. I primarily access it using the laptop or the iPad Pro, which is what I originally built the site out using, but I sometimes like to check resources on my phone, and I definitely want to be able to print out things like monster and character sheets, because in the end I am a big pen and paper guy.

For this post, I am showing screen shots of http://harrowlands.com/monster/ghoul.

screenshot of harrowlands ghoul monster page (desktop)

The aforementioned character and monster sheets are definitely the most complicated portions of the site (everything else is pretty bare-bones basic) and these are the ones I most want to be perfect in all formats.

Both have a top section and a bottom section split by the keywords. Each of these sections needed to be be flexible with the components within, expanding and contracting based on the device or format. Everything is based on viewport units, which adjust elements based on the width of the screen. At first, I thought I had to have the printed version in all static units (pixels), but other than maintaining heights or certain components, I did away with pixels completely.

For mobile, every component within each section needed to fit across the screen and be arranged in a column for scrolling.

screenshot of harrowlands ghoul monster page (mobile)

For print, the importance was to try to fit everything on a single printed page while maintaining the essential desktop layout.

screenshot of harrowlands ghoul monster page (print preview)

This will give me a lot more flexibility when creating new monsters because I can easily look something up when I have an idea and I can easily print out any monsters and characters I want to use in the game or want to scribble notes on their sheets for revisions and additions.

printed version of ghoul monster sheet

Kids RPG Journal – #54 Session 3 Audio

A while back we played our third session of Harrowlands, with mixed results. It was kind of a bummer for me as we set up and then couldn’t play for very long – about half a session – and the kids were already pretty much wiped and had very little attention to give to the game.

One thing I notice, is when the kids are distracted, I get really distracted and have a hard time GMing, I forget things and have trouble making the non-player characters fun. I’m definitely going to think on ways to improve my improv when my children are involved.

The session I was setting up had a little too much chat in the beginning and not much action. I probably should have jumped right into action, but since I’m setting up the location as a potential “quest hub”, I didn’t want to blow through things. The next session will hopefully go longer and be more action packed.

I’ve been putting off editing the audio for some time, and just finally muscled my way through it. We recorded for 38 minutes, but the final audio – subtracting long pauses from the GM, fits from the kids, and a couple other uncomfortable and distracting noises – only ended up being 25 minutes. The audio is a little less clear of the players as my Blue Yeti microphone got disconnected and apparently all the audio was coming in from my laptop, so I am really loud and the others pretty soft.

I’m definitely no audio guru, but I cleaned it up as well as I could.

The group finds themselves stranded at a farm and go to ask for help where they interact with three NPCs: Gurla, Momma Yrla, and Sluglump. They receive a somewhat cold welcome as they seek help getting their cart fixed on the night of the Butcher’s Moon and the Alfablot.

Hopefully, we can get a game in next weekend before the holiday and see where they go when the Alfablot truly begins.

Kids RPG Journal – #49 Monster Color Process

I haven’t had much opportunity to work on making new art for the kids game recently, but I wanted to get some monsters onto the Harrowlands site, so I decided to finally color in some of last year’s Inktober beasties. I didn’t get real far with Inktober because the day job started melting down and I was working way too many hours to participate.

Not all was bad, however, because the work burnout made me stumble upon the specifics of doing the Kids RPG Journal and slowly making the Harrowlands game for the boys. I likely wouldn’t have gone down this particular path if I had more time and was not dissatisfied back then.

I’ve taken to paying just a little more attention to how I’m coloring in my monsters and other game resources recently, as some of the previous items were coming out a bit muddy. I think it was a combination of the muted palette and the Drippy Deek brushes which are a little bit darker and less chromatic than some other brushes.

One thing I had not been doing, but started up again, was putting a background color under my artwork. Working on top of white is fine, particularly in the watercolor painter mindset, which is how I approach my work on the game, but painting over a base color gives it some much needed pop without going back to the more outlandish color palettes I was using before.

hungry dead monsters from Inktober, colored in with an older brighter palette

I found I had already colored in a couple of them with the previous palette and was working on a third, but I just was not feeling it. I went back and started over again and can say I’m pretty happy with the results.

monster ghoul with just the base color

For the ghoul, I started with a lighter yellow background color which tied the colors in nicely and I felt I could do a little bit more with the wash brushes.

Final colored version of the ghoul

The end result came up much better than what I was going with on the first try.

vampyr with just base color

For the vampyr, I chose a muted blue green to accentuate the undead nature. It gives a nice base, particularly under the skin tones that makes the “otherness” really come through.

vampyr in full color

All in all, I’ll probably go back and color in all of the previous Inktober pieces. For now,

Kids RPG Journal – #48 Wild Hunt Quest

When we last played the Harrowlands game so very long ago, the adventuring party had just survived the bee swarms and crashed their wagon. We will begin the next session in Yrlashof and they will need to find a way to get their wagon repaired. However, there is a problem.

It is the night of Alfablot and not only do folks need to stay off the roads, but no one will offer them hospitality and allow them to come into their home, for the dead travel on this night. The main quest for this session is going to be to survive encounters with any vengeful spirits who wanders too close.

Quest: Night of the Wild Hunt

First, they will carve faces into their turnip lanterns to scare off the spirits (the players will draw scary faces on turnips and we’ll fashion lanterns with them using mini tea lights) and roll to determine how effective their artistic skill is. With the howling wind and lack of time, it might be a challenge.

Turnips for carving to scare off the ghosts of the Wild Hunt

Then starts the procession of the wild hunt, led by the Alf King on his massive spectral boar. If all of the lanterns hold up, then it should be pretty straight-forward, but if not, then they will need to find alternative methods for dealing with any wights who will come into their camp, without fighting. There may be some trickery, parley, wrestling, or offerings to ensure that no one gets hurt. 

map of yrlashof during the Alfablot

I created a number of props for the quest, turnip papers for lamps, a “battle map” of Yrlashof to show where the wild hunt will be passing through, some overhead drawings of hunt members, and the quest image. Additionally, I set up the quest pages on the Harrowlands website for online use:

The Wild Hunt led by the Alf King

Quest: Night of the Wild Hunt

I’m thinking we may be able to play this weekend if things aren’t too crazy. Otherwise, we may have to look into a weeknight game, just to keep the ball rolling.

Kids RPG Journal – #47 Monsters Revived

I have loved monsters since I was a tiny child. Before my introduction to Dungeons & Dragons, I would get all of the books I could from the library on monsters and myths. I read Dracula way too early and I still get goosebumps when I think of some of the scenes. Later, the Monster Manuals took so much of my time and I spent many a sleepless night pouring over every detail of each creature.

Yet as I grew older, I found myself less interested in combat stats of the monsters and wanted to know their story. So I dug deep into the original folktales, ghost stories, sagas and myths from where they came. I studied the work of Marie-Louise von Franz and her explorations into the psychology of folktales.

ghoul monster sheet top- profile, instinct, role-playing notes

I picked up DMing again with the release of D&D 5E, but the one thing I was always disappointed in were the monsters. It may just be failings as a DM, but the monsters simply ended up being something to cut down with an axe. I ended up exploring a number of more story-centric RPGs like FATE, Dungeon World, Fiasco, Seven Leagues, etc. but had a hard time getting a group together to play.

ghoul monster sheet bottom - keywords, custom moves, precautions

I doubled down on my research and had ambitions of making something where the folklore and the story of the monsters shined, but could still make something fresh and exciting. I created a monster taxonomy based on psychological traits and impulses and I catalogued all the ways I could find that “heroes” defeated monsters in the tales. I wasn’t sure what format this project was going to take—RPG, field guides, comic, novel—but I have tinkered with it for the last few years.

Working on the Harrowlands game for the boys has really allowed me to clarify what I want to share about monsters and stories in general. This search for a new Monster Manual page started long before the kids RGP journal, but has finally solidified into something I am happy with.

Angry Bees

Ghoul

angry bees monster sheet top - profile, instinct, role-playing notes, keywords

These monster sheets are almost entirely focused on role-playing. It emphasizes the instincts and mannerisms on the top of the sheet, with keywords right in the center to help get focused right away. The bottom has easy to find moves and precautions which further the role-playing aspects. There are a number of ways to deal with each monster that does not have to involve combat. In fact, some of their own moves may pull them out of a fight.

angry bees monster sheet bottom - custom moves, precautions

There is a lot of work to do on the design before I would ever consider putting it out for public use, but the format will work perfectly for my use in-game. I will tinker with them here or there as I build out the content, and the more monsters I add, I’ll inevitably get the bug to make it shiny. But for now, I am really happy with what I have to work with.

Kids RPG Journal – #46 Character Sheets

I finally designed character sheets and monster sheets that I am happy with. It includes seven sections to help me role-play the characters from one sheet.

  • Profile: the character’s name, overall concept, and portrait
  • Role-Playing: the character’s motivation, appearance, voice and mannerisms
  • Keywords: Just a list of keywords to keep in mind while playing the character
  • Health
  • Custom Moves: key actions the character can take
  • Gear: anything cool that they carry on their persons
  • Thoughts: Short quotes in the character’s voice about key topics

The format will allow me to quickly scan things at a glance, so I don’t miss a key characterization and focuses on creating a compelling and memorable character. Now that the design was completed, all I had to do was create a sheet for all of my NPCs (non-player characters).

The main problem with designing my various game materials with Clip Studio on the iPad is that adding and updating text is kind of a pain. The popup keyboard takes half of the screen and maintaining font styles can be inconsistent. I wanted to find a better flow for the kind of sheets I plan on putting out with lots of text and styles.

crowded view on Clip Studio Paint for iPad when editing text

To test things out, I built out a NPC sheet in Affinity Publisher to see if I could get something that would be easy to templatize and make multiple characters with minimal design work (outside of the character portrait). The template was more manageable than Clip Studio, but I still had to manually click into each field to update content and that would get tedious pretty quick.

affinity publisher character sheet template

Publisher, Affinity’s competitor to InDesign, is still in beta and does not have the full range of features that it will hopefully have later on. One bit of functionality that InDesign has that Publisher is currently lacking is the ability to import data into a template. 

Unfortunately, this was kind of a deal breaker for me. And I’m not about to go back to Adobe’s products.

I work with lots of data in my day job and I enjoy building out data systems. I knew if I could find some way store data and import it into   a template without messing with design, I would have an ideal setup.

So I went back to the drawing board and back to my comfort zone, building it in HTML. I created all of the data tables and input a good chunk of content into the database, so I could test out the template and started building the web pages. This wasn’t a small task and I’ve spent about three weeks putting everything together.

harrowlands.com character web page - plunk

And I’m finally finished with the basic template for NPCs on the upcoming Harrowlands website. The three characters I have completed are:

Plunk

Momma Yrla

Gurla

Having everything online and in a database has many benefits: I can access with any device, everything is easily indexed, and of course the more content I can put online, the better the search rankings become. And most importantly, I am getting started on building the knowledge base for the Harrowlands game.

The one place this is lacking is when I want to have a copy of the sheet in hand.

Which is why one of my next steps is to edit the print CSS styles to give me the ability to print a single page directly from the browser. It may lack a little of the nuance of a custom designed sheet in a graphics program, but I won’t need things to be super pretty for games. Besides, I’m confident I can get the stylesheets to print out something quite nice.

Kids RPG Journal – #40 Session 2 Audio

Last weekend, we ran the second session of the Harrowlands game with the kids and everyone had a blast. The party ran into swarms of frenzied bees on the road through Saksaland and had mixed results during the encounter. The audio is below.

Unfortunately, my production on the game has come to a halt, as I’ve been dealing with being sick. It’s not likely to pick up soon as I’m heading out to Seattle for Emerald City Comic Con in a few days.

Hopefully, I can find a little down time and get some work in during the convention. The coolest part is the boys will be coming up to meet me on Friday, so I get to show them around all day Saturday.

Flight from the Bumble Bees

Kids RPG Journal – #38 Session Zero Thoughts

It’s been nearly two weeks since we made our first foray into the Harrowlands game. I figured it was finally time for me to write up my thoughts. There were some things that I liked and others that I didn’t, which is to be expected. More importantly, the boys had a really good time and are still talking about it nearly two weeks later. It helps that they’ve been watching me put together the audio clips and they’ve asked to listen to them over and over again.

In this session zero, we did the following:

1) Explained the core rules and basic moves of the game, including reviewing the character sheets and the various props (10 minutes)

2) Went over the guidelines for how we would play: be respectful, work together (no PC infighting), and no death. (5 minutes)

3) Player Character backstories (20 minutes)

4) Travel montage and local lore (10 minutes)

What Worked Well

video recording of Harrowlands session zero

Player Ownership. One thing that seemed to resonate was when in each backstory I had the player choose the villain from a couple of options. Additionally, I made them roll one of their moves to see how well they fared. The backstory was completely railroaded, where the outcome was written regardless of the rolls, but the dice revealed how they got there. The kids responded well to being able to choose, and it was kind of neat for me to be able to later illustrate their choices for the audio clips. (I’ll also be repurposing the illustrations for the Adventure Journals)

Fart Jokes. This one is pretty obvious, but once I threw in that Plunk was gassy and smelly, it really upped the engagement with the boys. They’re still talking it two weeks later: “Daddy, you know why I didn’t like Plunk?” “Why?” “Because he kept farting all the time.” I guess it really helps to know your audience.

Recording and Camera Setup. I definitely wanted to have a record of the session, so I recorded with OBS. I set my laptop on the game table in front of me, a webcam on the kitchen counter to get the whole table, and my Yeti microphone. I played around with some pretty basic overlays for the video, and was pleasantly surprised by the results we got playing on a folding table in the middle of the living room. This was the first time I used the Yeti to record audio for an entire table and I feel like it picked up all of the voices without being overly loud with the items on the table (the padded dice boxes definitely helped). 

At one point, my oldest pug decided to trot around on the hardwood floors which was quite distracting. I may have to lock them up somewhere during the sessions, but they are pretty needy and would likely bark or whine.

I don’t know if I will put up the video or not, but really glad that I put in the effort to get it going. I believe it will really help me as a GM to hear and see where I tend to lose the thread and fall short, and where I have everyone involved and where I lose them.

What I Didn’t Expect

too much temptation for little hands

Playthings. I was so focused on making sure that the gameplay would be a visceral experience for the boys that I did not stop to think about how all of the stuff I was putting on the table would also serve as distractions and playthings. My wife and I quickly took away pencils, extra dice, and candy hearts so that the boys could focus and work on sitting still. 

Basic Moves. Part of the distraction problem might have been that I started with some boring rules. I’d spent a lot of time going over the custom moves and they boys were already pretty well acquainted with what each did. However, I just kind of threw together the basic moves and it really showed while I was trying to explain each one quickly. The boys eyes glazed over pretty quickly and they focused on the toys in front of them.

Some of that was the approach. I could have just skipped it entirely and worked it in later. I’m planning to have mini-quests where I explain a related basic move in game play context, so Saturday’s session will have a good amount of focus on Discern Realities, with possible use of Defy Danger and Spout Lore.

Scheduling. We started the game nearly 40 minutes later than I wanted to as we were working on other projects. This added a little tension for me to try to figure out the timing of the session. In particular, once the backstories were done, we only had about 20-30 minutes to go and I struggled with rushing through the travel montage portion or spending more time on it. I ended up doing the latter, but it felt pretty awkward as I was distracted on if I would have time to get the actual gameplay quest in.

Overall, the experience was really positive and I’m sure as I learn to roll with the game. Next session will have some actual game play and player interaction, so it should be a much different experience.

Kids RPG Journal – #37 Travel Montage

Lore cards for Hugrun's Cauldron, the Scar, Jarnfelt, and Gripa

This is the final audio clip for the first session of our Harrowlands game. We were coming up against time, so it ended up being a little bit more of a travel montage than I was expecting, but the boys had fun and that means we will start right into the action with the second session this weekend.

In the audio, the party travels with Plunk through Saksaland on their way to Kraghall Academy, braving skeletons and foul odors along the way.

Travel Montage through Saksaland

Kids RPG Journal – #36 Iona Backstory Audio

Iona of the Willows exploring an underground ship graveyard before the yarring ghost pirates came for her.
Iona of the Willows exploring an underground ship graveyard before the yarring ghost pirates came for her.

Last weekend, we ran through the first session of the Harrowlands game with the boys. Here is the backstory for my wife’s character, Iona of the Willows, where her fetch travels deep into the earth to meet ghostly pirates in a ship graveyard and has a rough encounter with a dwarf before meeting Plunk and the other members of the party.

Iona of the Willows backstory