Death is but another chapter. Norrøngard. CSS Spritesheet Animations.

Hey, it's been a while. Welcome to my new subscribers - I'll catch you all up fast.

Last month I had to stop working with LegendKeeper (you can read the full story here). It was a hard decision and I'd be lying if I said it didn't affect me. But these are the kinds of decisions I've become used to in 2 years of self-employment. There are no great rewards without equal risk. LegendKeeper is an incredible project and I will continue to support it however I can. The roadmap is alive and well, and I still believe LegendKeeper will become the best worldbuilding software in the world.

The good news is this: I now have an opportunity to seriously consider what the future of Sword & Source looks like. While I am not ready to share specifics, I can say that I have a few blades in the forge-fires.

You can expect this newsletter to continue, along with new project launches that explore the best parts of tabletop RPGs in web software.

What's to love about cemeteries?

One of my upcoming projects explores the cemetery as a setting. I can't share much yet, but here's the tagline:

“Death is but another chapter in your story.”

The rules surrounding player character death vary wildly from table to table. I would argue that a design goal of Dungeons & Dragons 5th edition is to make death completely optional. The system promotes deep investment in every character sheet, so the death of a character is a big loss. Fifth edition remains the onramp into TTRPGs for many people, and as a newer player you might be less comfortable with the idea of not being able to press a continue button when the dragon rips your heart out.

By contrast, one of the OSR movement's driving forces is its reaction against how safe your PC is in D&D 5e. In OSR games like Knave, character creation only takes 5 minutes. You are expected to die. Deep investment in one character would be naive and foolish. In my experience, this lowers the potential payoff that comes from long-term character development but it raises the stakes of every individual adventure. Death looms. Your heart rate spikes with every roll of the dice.

Regardless of your personal preferences, I think we can all agree on this point: The death of a player character is always interesting. This is what I want to explore.

I find that random tables are one of the best ways to explore a design space. Here's a simple one you might use the next time you find yourself wandering a garden of graves.

d6	gravestone	remembrance	secret
1	unmarked	None have visited. None have remembered.	The name is fake.
2	flat plate	A single blue rose.	Someone watches this grave.
3	simple wooden cross	Bouquet of wild flowers.	The remembrance was stolen from another grave.
4	simple boulder	A carved, wooden toy. Shape of local animal.	The inscription is a cipher.
5	carved headstone	Golden bracelet. Protected by a spell.	A treasure lies beneath in a secret chamber.
6	mausoleum	Astral projection of the loved one who lies beneath.	The grave is a portal. It beckons.

Highlight: Norrøngard, the land of the ice and snow

A land beset by undead horrors, marauding trolls, mercurial spirits, and monstrous beasts. In such a danger-fraught and challenging environment, heroes emerge to perform deeds worthy of the skalds, and those who don’t meet an early demise as a troll’s breakfast or a linnorm’s lunch carve out new domains or conquer existing ones.

Earn your honor exploring the cold heights of the Ymirian Mountain Range and the dark forest of the Raven’s Wood. Risk your life to snatch the knowledge of rune magic from the jaws of death. Contend with powerful vættir in the mysterious Wyrdwood, or brave the perilous caverns of Svartálfaheim.

- Norrøngard campaign setting on DriveThruRPG

Lou Anders wrote a highly regarded series of young fantasy books called Thrones and Bones and this campaign setting takes you deeper into the world. I recently had the pleasure of meeting Lou Anders and was impressed by the depth of his worldbuilding. Just to give an example of what I mean by depth: this campaign setting has detailed rules for a Viking board game!

If you are like me and have an endless thirst for more Norse-inspired content, check out Norrøngard.

Hack: Spritesheet animations for CSS

I recently learned this simple trick for animating sprite sheets using CSS. You can use the steps property in any CSS animation to make it instantly jump from frame to frame. This means you can load up a sprite sheet (ie. a series of frames for an animation presented in a single image) in an img tag and then have CSS loop through each frame for you

Here's an example of my sprite sheet. The entire thing is one PNG image with the blue grid lines dividing each "frame". Each frame is 64px wide and 128px tall:

You can find many great pixel art assets like this on Itch.io.

Now we load this up in HTML as an img tag, using a div as a mask to hide the overflow.

<div class="sprite-container">
  <img
    class="pixel-art animated-torch"
    src="./images/blue-torch-spritesheet.png"
    alt="Glowing blue torch"
  />
</div>

Finally, we animate it with CSS using the steps property.

.pixel-art {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.sprite-container {
  width: 64px;
  height: 128px;
  overflow: hidden;
}

.animated-torch {
  height: 128px;
  animation: torch 0.8s steps(6) infinite;
  max-width: none;
}

@keyframes torch {
  100% {
    /* 64px wide * 6 frames */
    transform: translateX(-384px); 
  }
}

One final learning: using image-rendering: crisp-edges means you can scale pixel art images up as much as you want without losing resolution. This makes it easy to use browser zoom or change the size of a scene. It's a nice added benefit you get when you choose this art style which is made up entirely of solid-colored squares.