mabbees

(Reblog) Snowpeel

Mabbees — Thu, 26 Feb 2026 01:00:00 GMT

Snowpeel

PostedFeb 21, 2026 by kitasuna

“Snowpeel” is a snowboard action game inspired by Excitebike on the NES.

The game formerly known as XCB is out. It’s now called Snowpeel! Go play it on the BBS or on Splore.

Props to Eric (@kitasuna) on a job well done. It takes a remarkable amount of polish to go from mostly-functional tech demo to stable build to actually fun to play game. Snowpeel is a lot of fun, and has me coming back to try to complete all the extra challenges. It’s also really cool to hear the music I wrote in the game. Here’s how I’ve done so far, can you beat my score?

Snowpeel challenges

(Reblog) RadicalSlice devlog

Mabbees — Sun, 15 Feb 2026 01:00:00 GMT

Eric (@kitasuna) published a new devlog video about XCB. This is the one that talks about integrating the music, so if you saw my last post and are wondering how the music and gameplay fit together, check this one out!

Adding Level Branching (and music!) to my Excitebike-like Snowboarding Game

PostedJan 25, 2026 by radicalslice

The Music of XCB

Mabbees — Mon, 12 Jan 2026 01:00:00 GMT

My friend Eric (@kitasuna) is working on a new PICO-8 game called XCB, and I wrote the music for it! XCB is a game about snowboarding, inspired by the mechanics in Excitebike. Your goal is to dodge the rough spots on the slopes, land sweet jumps, and use your boost power to carve your way down the mountain within the time limit. You can check out his devlog channel, radicalslice, over on YouTube.

I wrote two pieces of music for XCB, Downhill Dash and Sunshine on the Mountain. The second one is the one used in the game, though I’m sure I’ll get a chance to reuse Downhill Dash in a future game. I’ll write about both so you can see how my thought process developed over time by comparing the two.

Downhill Dash

I was thinking about racing game music when writing for XCB. It’s not not a racing game in the sense of going head-to-head against other snowboarders, but it’s still about going fast. The first thing I wrote was the intro to Downhill Dash, which kicks off with a “3… 2… 1… Let’s Go!” kind of phrase.

If the gameplay of XCB is Excitebike, the music is at it’s heart Super Mario Kart.

Downhill Dash

For the rest of the piece, I essentially looked for as many opportunities as I could to reuse the intro motif to build out a short melody. There’s not any completely new material until the B-section. Then to bring it back to the A-section, I reused a similar “rhythm blast” figure to the one in the intro (ba-BUP ba-BUP ba-BUP!). Re-using material is a good approach to songwriting, both in terms of effort and in terms of creating memorable music.

Sunshine on the Mountain

I went in a different direction with the second song, but you can still hear some of their shared “DNA”: the groovy little bass-fills at the ends of phrases, the B-section harmony, the song form. Some key differences though, are the intro and the rhythm.

Instead of the lengthy “3… 2… 1… Let’s Go!” opening, I started Sunshine on the Mountain off with a short drum-fill. I think it turned out to be a better gameplay fit. Get right to the action!

Sunshine on the Mountain

Rhythmically, one big difference between the two songs is that I traded the son-clave rhythm in Downhill Dash for it’s little brother, the half-clave in Sunshine on the Mountain. One way think about half-clave is that it divides the bar into three groups, where the third group is cut short (count “ONE-two-three, ONE-two-three, ONE-two”). Half-clave sounds like it’s always going forward, which makes it a good fit for this kind of game.

Son-clave (top) versus half-clave (bottom)

Dynamic music

When I write for video games, I always look for opportunities to make the music react to what’s happening in the game. There are a couple such spots in XCB.

boost mode

I added a layer of arpeggiated chords over the main song for when the player boosts that I think can best be described as “chirpy”. It’s a little tough to layer tracks like this in PICO-8 while keeping the everything synced, but the cool frame stop effect makes for a good opportunity to get the start of the music to sync with the start of the boost.

Victory fanfare

I also wrote a little fanfare for when you reach the end of a run. It’s got an “extra” bar in it to build anticipation for the final note. I’m not sure what Eric has in mind for scoring yet, but I thought this would make room for the results screen to dramatically “tally up” your final score.

What is a Spritesheet?

Mabbees — Fri, 21 Nov 2025 01:00:00 GMT

In my last post I talked about some tricks for fitting more sprites into your spritesheet, but I didn’t go into a lot of context about what that even means. In this post, I want to cover what a spritesheet is and why you might use one. I’ll start by explaining a bit about how game engines work.

How do game engines work with images?

Here’s a frame of a game. It’s made up of a bunch of smaller images, called sprites in gamedev lingo, that get layered together to produce the final image.

A screenshot of the game Jelpi.

There are a few different ways game engines could handle drawing a frame like this. One way is to load a bunch of separate image files — one for each sprite — and draw each one in its corresponding position in the frame. Indeed, many game engines support this workflow, and if I were inventing a game engine from first-principles, this is probably what I’d come up with.

A frame drawn from individual files

But there’s another way! You could combine all of your sprites into a single image, called a spritesheet, then draw a frame by clipping out rectangular pieces of it and pasting them into place.

A frame drawn from a single spritesheet

So, there you have it. A spritesheet is an image that contains a collection of individual sprites!

But that raises an important question… why?

Why use spritesheets?

Depending on your game engine or target platform, the answer could be “that’s just how it works”. For example, PICO-8 doesn’t support loading and drawing separate image files. There’s only one spritesheet that has to contain everything, and its size is limited to 128x128 pixels (this is why Spooky Stylin’ needed to use some clever Spritesheet Tricks). A lot of “retro” consoles had similar constraints as well due to limitations of the technology.

But spritesheets aren’t just a retro thing. A lot of modern games still use spritesheets or texture atlases, a similar technique of combining multiple 3d-model textures into one image. Why is that?

One reason is performance. It can be much more efficient to load a batch of images all in one go, rather than one at a time, both in terms of getting the images from your filesystem into your game, and in terms of getting the images from your game onto the graphics card where they’ll be ready to be drawn to the screen. That is to say, spritesheets are a useful optimization technique.

Another reason is that, depending on your workflow, spritesheets can also be more convenient to work with. A lot of animation programs have a way to export frames as a spritesheet — some can also export useful metadata about how many frames there are, which frame each animation starts on, etc. This means you can export a single file instead of a bunch of individual frames.

It’s not all-or-nothing

So far, I’ve talked about two extremes—one spritesheet for everything, or one file per sprite—but in practice, that’s quite rare. Lots of games use an approach that’s somewhere in between. For example, each character could be on a separate spritesheet, the tileset used for the level could be another spritesheet, and rarely used or one-off sprites could be loaded as individual images. Splitting up sprites like this is a good middle-ground. That way, your game engine has to load fewer images in total compared to the one-image-per-sprite approach, and you can also keep your assets organized more easily compared to the one-spritesheet-for-all approach.

Spritesheet Tricks

Mabbees — Sat, 15 Nov 2025 06:16:00 GMT

Last month, CJ and I published a new dressup game called Spooky Stylin’ as part of our arcade bundle Tomodachi 8-in-1. In this post, I want to talk about some of the programming techniques we used.

PICO-8 has limited spritesheet space, but Spooky Stylin’ needs to be able to draw a lot of different outfits. So how did we get our images to fit? We used a technique to cram two spritesheets into one! Of course, this space-saving doesn’t come for free. In order to make it work, we need to carefully manage our color usage.

The plan

At a high level, here’s the technique. There are two major steps, encoding and decoding.

Encoding

Recolor layer 1 to use only colors 0, 1, 2, and 3 (the “column” colors)
Recolor layer 2 to use only colors 0, 4, 8, and 12 (the “row” colors)
Combine the layers, using the palette grid as a look-up-table to determine the combined color

Decoding

Use only the column colors to recover layer 1
Use only the row colors to recover layer 2
Remap the row/column colors to the original image colors

Arranging the 16 colors into a grid to shows how to encode and decode colors. The columns tell you the color of the first image, the rows tell you the color of the second image.

Using a color grid as a look-up-table to combine two colors.

One thing to notice is that step one restricts each layer to using only 4 colors. That’s the tradeoff we make.

A bit of theory

PICO-8 stores color using 4 bits per pixel¹. In Spooky Stylin’, we restricted ourselves to using only 3 colors per clothing item, plus a transparent background color, making 4 colors in total. That means we only need 2 bits per pixel, leaving 2 bits left over for a second 4-color spritesheet!

Two spritesheets layered into one. It looks messy and chaotic.

This looks really messy, but the important part is that all the data we need is there, ready to be decoded.

Implementation details

If you believe the math then it’s possible to fit two 4-color spritesheets into one 16-color spritesheet, but making it happen in code still poses some challenges.

Encoding

The first problem we needed to solve is combining our two spritesheets so we can store them as one in the final cart. I initially assumed this would require looping through all the pixels and doing a bunch of bitwise math, but it turns out there’s a faster way!

We can use a feature of the PICO-8 graphics system called bit masking. With bit masking, when we draw to the screen, PICO-8 won’t overwrite the screen color directly. Instead, it will combine the color we’re drawing and the color that’s already on the screen. It’s like changing the layer blend-mode in Photoshop². The final color is determined using a formula:

dst_color = (dst_color & ~write_mask) | (src_color & write_mask & read_mask)

The mask values come from an 8-bit number that we can specify by poke-ing it into memory (the first 4 bits we poke define the read_mask, and the next 4 bits define the write_mask). For example, setting the mask to 0b00110011 will make our draw calls affect only the lowest 2 bits.

We used this to combine two layers into one like so:

clear the screen
draw layer 1 using only the lowest 2 bits
draw layer 2 using only the highest 2 bits

cls()
-- draw the first layer using the "column colors"
poke(0x5f5e, 0b00110011)
pal({[0]=0,1,2,3})
draw_layer_1()
-- draw the second layer using the "row colors"
poke(0x5f5e, 0b11001100)
pal({[0]=0,4,8,12})
draw_layer_2()

Decoding

Once the data is written, we still need to be able to decode it. Getting back the original image requires multiple passes of recoloring: one pass to get the layer from the combined image, and a second pass to restore the original colors. Taking it one step further, in Spooky Stylin’ we let the player pick the character’s skin tone and hair color, which sometimes adds a third recoloring.

Conceptually, my approach to managing all of this is to define each recoloring as a function. Then I can use function composition as the glue to stick multiple recoloring passes together. I go into more depth on this topic in my post on Palette Swaps. In code it could look something like this:

-- define palettes for separating layers
-- and recoloring to original colors
lyr_1_pal = tbl_to_pal({
		[0]=0,1,2,3,
		0,1,2,3,
		0,1,2,3,
		0,1,2,3,
	})
lyr_2_pal = tbl_to_pal({
		[0]=0,0,0,0,
		1,1,1,1,
		2,2,2,2,
		3,3,3,3,
	})

skin_pal = tbl_to_pal({4,2,7})

green_skin_pal = tbl_to_pal({
  [4]=11,
  [2]=3,
  [7]=7,
})

hat_1_pal = tbl_to_pal({9,10,7})

-- draw the base character from layer 2 using green skin
pal(pal_to_tbl(chain({lyr_2_pal, skin_pal, green_skin_pal})))
draw_character()

-- draw hat 1 from layer 1
pal(pal_to_tbl(chain({lyr_1_pal, hat_1_pal})))
draw_hat_1()

Acknowledgements and Inspiration

I wrote my own implementation, but I’m certainly not the first to try out this technique in PICO-8. I first learned about it from the post Layering Sprite Data by 8bit Caaz. I also found these two BBS posts by Two_Owls helpful.

Footnotes

Quick binary refresher (or primer): a bit holds one of 2 values (either 0 or 1). An n-bit number can differentiate between 2ⁿ values. Equivalently, a choice between n values can be stored in one log₂(n) bit number. A 16-color image uses log₂(16) = 4 bits per pixel. ↩
I haven’t actually used Photoshop in years, but I think it’s still the most widely-recognized image editing software that has layers. I would have felt a little too hipster saying “it’s like layer blend-modes in Procreate”. ↩

On verbal shutdown

Mabbees — Fri, 19 Sep 2025 06:16:00 GMT

I want to tell you something very personal about myself today. I’m someone who experiences verbal shutdown¹.

It usually happens in situations with loud noises, crowds, bright lights, or other distractions, and it sometimes results in well-meaning people around me wanting to know “what’s wrong?” or “how can I help?“. The frustrating thing is that in asking, they’re implicitly seeking a verbal response, which is exactly what I’m NOT able to provide.

I’m writing this post for exactly those people. I completely understand wanting to help and not knowing how, and I understand feeling anxious about it. The thing is, I’m not sure I have an answer. If I ever figure that out, maybe I’ll make a separate post about it. For now, the best I can do is try to put some words to what verbal shutdown feels like — a task I’ve found fiendishly difficult due to the aforementioned verbal shutdown (and because, in my experience, shutdown affects my ability to think and therefore write words not just to say them). I want to describe it to you the best way I know how: through analogies. None of them are perfect, but together they form a more complete picture.

Analogy 1

I’m sure you’ve had the experience of having a word “on tip of your tongue”. You know there is a word that you want to say — a word that would perfectly fit the situation — but you can’t quite remember it. If you speak multiple languages, you’ve probably experienced the version of this where you can remember the word for something… just not in the language you’re currently trying to speak.

When tip-of-the-tongue moments happen once in a while, you can shrug them off. When they happen multiple times in a single conversation, you might start to feel like something’s wrong. When they happen multiple times per sentence, well… you’ll probably feel like giving up entirely.

That’s what verbal shutdown feels like to me. It’s not necessarily about being unable to speak in an absolute sense, but it is a feeling of being unable to communicate, often alongside intense feelings of failure. The pain of verbal shutdown is that I know, in general, I have the ability to communicate with words—sometimes, I daresay I even manage to be fucking eloquent—but in this moment, I am utterly failing at a task most people take for granted. It sucks.

Analogy 2

You know you need to say something, but your mind is suddenly blank… and yet at the same time, no! Not blank, not blank at all! It’s a crowded room full of people all talking over each other all at once. In one way, you’re at a loss for words, in another way, it’s the exact opposite. You have plenty of words. Too many, in fact — so many, you can’t organize any of them into a coherent thought.

You think, maybe if you concentrate on a single voice, you’ll be able to make out a coherent sentence. You give it a try, focusing in on the loudest person. Turns out, the loudest person in the room is also an asshole. You don’t want to say that. You try focusing in on someone else—anyone else—but the loud asshole keeps talking, and it’s hard to make out other voices. You decide to say nothing.

Analogy 3

Have you ever played the game Taboo? It’s a party game where you try to get your teammates to guess a secret word by telling them clues. You’re not allowed to say the word directly, and to add to the challenge there’s a list of related words you can’t say either. To enforce the rules, one person from the other team acts as referee, ready to press a buzzer if you screw up by saying a banned word. With the right group of people and the right mindset, it can be a really fun game! It can also be anxiety-provoking.

Experiencing verbal shutdown feels like I’m playing the game Taboo, but with real-life stakes. Taboo meets Squid Game. It feels like there are gaps in my vocabulary, and there are things I desperately need to communicate in spite of them. If I’m successful, well… it doesn’t feel like winning. My reward is that my doctor doesn’t misdiagnose me, my partner doesn’t get mad at me, or my waiter doesn’t get my order wrong. Speaking of…

Analogy 4

My next analogy is ordering at a restaurant. The main thing I want to get across in this analogy is that I don’t experience verbal ability and verbal shutdown as a binary (“can speak” or “can’t speak”). They feel like a continuous gradient, but with discrete tipping points. One tipping point is when my ability to form words is hampered enough that not talking starts to seem more attractive than continuing to talk and risking having a frustrating miscommunication or saying something I regret. Unfortunately, even past this tipping point there can be immense social pressure to keep talking anyway (not to mention consequences for breaking these expectations). It’s situations where I have to aggressively mask that bring me to the second tipping point: where forming coherent words is essentially impossible.

Finding something to eat sometimes comes with varying degrees of challenge. Analagously, here are what different degrees of verbal ability feel like to me:

Very verbal - you can say exactly what you mean to say.

You’re at your favorite restaurant. You’ve tried everything on the menu and you love all of it. You’re good friends with the cook and feel comfortable ordering off-menu.

Mostly verbal - you can say most of what you want to say. You sometimes need to “talk around” points where you don’t have the right words.

You’re at a restaurant you’ve been to before. You know the menu pretty well. They don’t have root beer floats like you wanted, but you can still order a root beer and a scoop of ice cream. Close enough!

Somewhat verbal - you can communicate the broad message you want to get across, but not without effort.

You’re at a restaurant you’ve been to once or twice. You don’t know the menu very well. You find a few things that look okay but aren’t quite your speed. Maybe the kitchen can hold the mustard. Maybe you can pick off the mushrooms… that kind of thing.

Partial verbal shutdown - you can’t access many parts of your vocabulary. The things you can say aren’t what you mean. Face it, you’d probably be better off keeping your mouth shut.

You’re at a restaurant you’ve never been to before. The menu has stains on it, and some items are scribbled out. Most of the things you can read look unappetizing, but one seems okay. You try ordering that only to be told it’s sold out. You give up on eating something you actually enjoy. If you’re lucky, maybe you can stomach the stinky tofu without vomiting. At least it’s calories.

Total verbal shutdown - you can’t access most of your vocabulary. You’re just about physically incapable of forming a full sentence. Most words you try to say come out garbled and incomprehensible.

You’re at a restaurant you’ve never been to with a cuisine you’ve never tried. You can’t read anything on the menu at all. Most of the items have an ominous number of spicy pepper icons next to them. You try to pronounce the name one of the dishes you hope is safe, but the waiter just shoots you a nasty look. You sheepishly gesture at what you were trying to order. They impatiently tell you the thing you were pointing to was a side dish and you need to order an entrée for it to come with. You break down in tears.

Closing thoughts

If you have people in your life who struggle with communication, I hope I’ve given you some framing to empathize with their struggles. If you’re someone who can relate strongly to the analogies I’ve described here, I hope I’ve given you ways of explaining them to people in your life. And if you relate to these descriptions, but you’ve never had a label to describe it, consider that verbal shutdown might be what you’re experiencing. I hope you can find some comfort in knowing you’re not alone.

Footnotes

I’m using the phrase “verbal shutdown” as opposed to “nonverbal” or “nonspeaking”. The former is temporary, whereas the latter can be long-term or lifelong. I make the distinction because I don’t want to give the false impression that because I can speak (most of the time), someone who is nonverbal must therefore be able to “snap out of it” and is selfishly choosing not to speak. ↩

PICOJAM 2025

Mabbees — Fri, 15 Aug 2025 06:16:00 GMT

I had a great time at PICOJAM 2025 last weekend! A bunch of other game developers and I got together at Pico Pico Cafe to make games based on the theme ‘祭り’ (festival) or ‘溶ける’ (melt).

A lot of the folks at the jam were already seasoned game-jammers and programmers, and were confident enough in their skills that they split into smaller teams. As a result, it had a much different vibe than, for example, Global Game Jam, which tends towards larger team sizes with a mix of veterans and newbies.

I mostly focused on writing music, which worked out well both because I enjoy it and because the small team sizes meant there were a lot of games in need of music. I contributed to 3 games over the course of the jam.

Taiko Terror

Taiko Terror - by ugokoware, CJ, and mabbees

A game about a devious little beetle. Dash to avoid getting hit by the taiko drummer’s bachi, but gain points by taunting them. The closer you can get without being hit, the higher your score. You can play Taiko Terror on itch.

I wrote a short taiko rhythm and shamisen melody for this game. It was fun playing around with the PICO-8 sound effects editor to get a satisfyingly boom-y taiko drum sound. I later used the same taiko sound-effect as a custom instrument in the other two songs as well.

Writing the melody was definitely the hardest part for me. I used the 平調子 (hirajoshi) scale¹, which I haven’t composed with before. It’s got a very distinctive sound that doesn’t map well to anything in western music theory. I think it turned out well.

Taiko Taikai

Omatsuri TD

Omatsuri TD - by uchuzine, npckc, and mabbees

A wholesome reskin of the tower-defense genre. Rather than fighting off invaders, the goal of this game is to build out the festival grounds so that everyone can find something to enjoy before they leave. You can play Omatsuri TD on itch.

I started out by writing 8 bars or so to get the general festival vibe, and only expanded it into a longer song after hearing it in the context of the game. The tower defense levels lasted long enough that it started to feel repetitive. My main idea was to write something that sounds like a Bon Odori folk song. I included a clapping rhythm that I remember from going to my local Bon Odori in Koenji (it’s the part that goes “ONE AND two AND …”).

Odorimasho (Let’s Dance)

Picogori

Picogori - by davemakes, npckc, and mabbees

A cozy little game about making shaved ice for animals at the festival. Each animal has different syrup preferences — you’ll have to try different combinations to find out what they like. No scoring, time-limit, or ending, just endless shaved ice.

Kakigoori March

This song came together the fastest, probably because I was already warmed up from the previous two and had already figured out some techinques for sounding like a 祭り.

Closing thoughts

One of my favorite moments from the jam was hearing npckc humming along with the songs I wrote. I generally aim for “hummability” when writing songs, so it was very gratifying. I think it makes songs more memorable when there’s some melody or hook that you can hum along to — even if it’s only for part of the song. It also helps me keep track of them more easily.

I had a couple additional songwriting goals in mind for this jam as well. One was to capture the summer festival vibe, another was to develop a unique identity for each one. I’m really happy with the results. Each song sounds like it belongs at a 祭り, and each one sounds distinct.

I’m really proud of all the games we made in such a short time at the jam, and I liked seeing everyone’s creativity on display. I hope it becomes a yearly tradition!

Footnotes

Here’s what the 平調子 scale sounds like by itself. …at least, I think it’s the 平調子 scale. The Wikipedia page for it didn’t clear up my confusion. ↩

Happy birthday, Illuminesce!

Mabbees — Mon, 04 Aug 2025 06:16:00 GMT

The card reads happy birthday. Underneath that, a bunch of tiny dinosaurs move into position to spell out CJ.

Happy birthday, Illuminesce!

I made a little card for illuminesce for their birthday a few days ago. I was inspired by something Zep made for Picotachi 74.

Lessons From Oz

Mabbees — Fri, 18 Apr 2025 13:49:29 GMT

(Minor spoilers ahead for both The Wonderful Wizard of Oz and Wicked)

I recently went to see the movie adaptation of Wicked (part 1) with a friend who had never seen The Wizard of Oz in any of its incarnations. I was surprised to hear she didn’t know the original story, given how influential it has been to American media. It’s inspired stage adaptations, movies, TV shows, and lots of parodies — maybe because it’s so imaginative, maybe because so few other stories since have been allowed to enter the public domain.

In any case, it gave her friends and I a chance to fill her in on the references she missed, and sparked some conversations about themes in the movie. It also gave me an excuse to talk about the theory that The Wonderful Wizard of Oz, written by L. Frank Baum in 1900, was a political allegory.

”The Wizard of Oz” and fiat currency

A theory put forth by Henry Littlefield, and discussed further in The Historian’s Wizard of Oz by Ranjit S. Dighe, is that the book The Wonderful Wizard of Oz is an allegory for the gold and silver monetary standards. For what it’s worth, current scholarly consensus is that the parallels are more likely coincidence than intentional inclusions by Baum, but in any case, here’s the summary:

Dorothy is transported to the land of Oz (ounces?), where she dons the silver shoes—the iconic ruby slippers weren’t introduced until the technicolor film—and journeys down the yellow brick road (symbolizing gold) making new friends along the way. This brings her to the Emerald city (symbolizing greenback paper money), a supposed utopia that turns out to be hollow and fake. She meets the Wizard and finds that he is a fraud. In the end, the magic that brings her home was with her all along — the silver shoes.

For context, when the book came out in 1900, the Coinage Act of 1873 would have still been on a lot of Americans’ minds. Prior to this act, Americans who owned gold or silver bullion could get their metals struck into dollar coins by the US mint. The Coinage Act phased out the silver dollar coin, effectively giving preference to gold and ending “bimetallism” in the US. 1873 also marked a year of economic depression and financial crisis now known to historians as the Panic of 1873 though at the time it was known as the Great Depression (the 1929 financial crash would later steal that title). The deflation that resulted from the new gold standard, and the losses felt by miners and investors who found their silver suddenly drop in value both contributed to the depression, though they were not the only factors.

Knowing this political context gives some weight to the idea that turn-of-the-century Americans, following the “cyclone” of economic disruption, might have seen bringing back the silver standard as a “magic spell” to return them to more familiar times.

”The Wizard of Oz” and fascism

The more modern telling, Wicked, originally a book written by Gregory Maguire in 1995 and later adapted for Broadway by Stephen Schwartz in 2003, is also political allegory. In this case, we don’t need to speculate or theorize. Wicked clearly warns against the dangers of fascism, and wears that fact proudly on its sleeve.

A charismatic Wizard blames animals for all the problems in Oz, rather than address their root causes. His and Madame Morrible’s propaganda urges the people follow a black-and-white morality of “goodness” and “wickedness” marked by an extreme intolerance of otherness. We see this play out in the intimidation tactics and systemic violence levied against Professor Dillamond, the Cowardly Lion, and the other animals. We see it in the way Elphaba is ostracized and vilified both for looking different and for daring to stand up for the oppressed.

Wicked the Broadway show hit the stage amid the Iraq War, and used the opportunity to take some well-aimed shots at the Bush administration. We the audience are invited to draw parallels between the Wizard’s anti-animal crusade and the Bush administration’s scapegoating of Muslims. Broadway’s Glinda pointedly refers to Nessarose’s death as a “regime change”, mirroring the president’s rhetoric in overthrowing Saddam Hussein.

Lessons for 2025

I’m far from the first to have noticed how relevant the political allegory in Wicked is to the Trump administration’s fascist machinations. One only need replace “talking animals” with “immigrants and trans people” in the narrative to see it. What’s strange to me is how relevant the theorized allegory about money from The Wizard of Oz seems. Trump is causing tremendous damage to the economy, to global trade, and to faith in the dollar. His cryptocurrency ventures, built on hype, speculation, and hucksterism, seem to ask that we pay no attention to the man behind the curtain, but perhaps the magic we need is in the financial system we’ve had all along.

Allegories can’t predict the future, nor should we expect works of fiction to contain the answers we need to present-day crises, but they can clue us into historical sentiments we might have otherwise missed.

Tracker Tips

Mabbees — Fri, 21 Mar 2025 07:00:00 GMT

I wrote a lot of songs in PICO-8 over the last two years. Not long enough to call myself an expert, but long enough to no longer call myself a beginner. I thought I’d take some time to write down some of the things I’ve learned—techniques that have helped me get the kind of sound I want out of the PICO-8 tracker.

These techniques are not broad enough to qualify as general songwriting advice, but not specific enough to act as a tutorial for someone still figuring out how to use the tools. But if you’re in a similar part of your learning journey to me, I hope you find them useful to you as well.

Brighter waveforms need less volume

If you open up the SFX editor and start writing music without changing anything, you’ll get samples using the triangle wave at volume 5. I think this is a little louder than you need for background music, but in general it sounds fine. Switch over to the square or sawtooth wave though, and at least to my ears, it sounds really harsh. So much so that for my first couple songs, I shied away from using those waveforms at all!

Square and sawtooth waves can sound musical though, they just need a little less volume. Those waveforms have a lot stronger overtones than the smoother waves, so you don’t need to set them as loud for them to stand out. Try a base volume of 3 or 4, and reserve 5, 6 and 7 for when you really want to accent a note.

For drum parts, vary pitch instead of volume

I like to use the noise waveform to write drum parts, but I’ve found that getting good sounding drums is tough. One difficulty is that there are only 7 levels of volume. I often wish I could set the volume to something in between (for example) 2 and 3 in order to get nice phrasing without the part getting too loud or too quiet.

Luckily, there’s a way to get more variation: change the pitch instead of volume, or combine both approaches. Higher pitches seem louder even when they’re at the same volume, so you can increase the pitch to create subtle accents in your drum parts without raising the volume too much.

Left: a drum track with no pitch variation.
Right: a drum track that varies the pitch to add accents to some beats.

Use the slide effect for smooth volume changes

The slide effect is a nice way to add some articulation to a melody. You can use it to “bend” between pitches. I used to think that was all it was for, but it turns out it’s also very useful for making notes change volume smoothly. In fact, that’s probably the primary way I use it now.

I like to vary the volume on notes starting with a louder attack on the first sample, then dropping to a lower volume for the sustain — like an ADSR envelope on a synthesizer. The sudden change in volume is quite noticeable, especially at slower tempos. It can sound like the note is being re-struck. The slide effect smooths out the volume change.

Use the vibrato in the middle of notes

When I use the vibrato effect, I like to add it to the middle of a note. That is, let the first sample or two play with no vibrato, and let the last sample or two play with no vibrato. To me, it sounds more musical that way. It matches the way a singer would sing it.

Use the detune filter for power chords and octaves

The detune filter has some cool effects depending on what waveform you’re using. I like to use it with the triangle wave to get power chords. In general, it’s a good way to make harmonies and accompaniment parts sound fuller without using multiple sound channels.

Here are what the different waveforms sound like to me with the detune filter applied:

Detune level 1

triangle - sounds like note + fourth below
tilted saw - sounds like a chorus effect
sawtooth - sounds like a chorus effect
square - sounds like a chorus effect
pulse - sounds like a chorus effect
organ - sounds like a chorus effect
noise - still sounds like noise
phaser - sounds out of tune (almost like the note + semitone above)

Detune level 2

triangle - sounds like note + fifth above
tilted saw - sounds like note + octave above
saw - sounds like note + octave above
square - sounds like note + octave above
pulse - sounds like note + octave above
organ - sounds like note + octave above
noise - still sounds like noise
phaser - sounds like note + octave above

When I first started writing music in PICO-8, the limit of 4 sound channels felt very constraining. I’m used to writing music for piano or guitar, where playing chords with 4, 5, 6 or more notes is normal, so it was a happy discovery when I found out that I could get some basic harmony out of a single channel by detuning it.

Business Cart

Mabbees — Thu, 13 Mar 2025 06:16:00 GMT

Back in 2019, I attended a fair share of professional conferences and networking events. I brought a couple small problems to mind. One was that I often forgot to bring my business cards — or if I did remember to bring them, I ran out of the small supply I had with me. Another was that exchanging cards always felt wasteful to me. All these cards changing hands were eventually destined for the recycling bin or landfill.

I had the idea to build a small website where you could upload a photo of your business card, or design a digital one. The site would generate a QR code that other people could scan to “collect” your card (and hopefully also consider adopting the habit of using digital cards). I never got that far along into building it before 2020 came crashing in, and suddenly the mild annoyance I had around networking events was not such a priority for me. For what it’s worth, I suspect the culture of 名刺交換 (business card exchange) is too strong here in Japan for much to have come of it anyway.

But the idea of a digital business card still appeals to me. So I built one in PICO-8. I’m calling it my business cart! Hopefully people find it quirky and memorable.

Make your own

Will business carts catch on? Who knows. Probably not. But if it seems cool to you, you can make one too. Here’s how:

Download the cart below to your PICO-8 folder
Open the cart - load business-cart.p8.png
Draw your logo and on contact details on the spritesheet
Save it

That’s it!

I’m licensing it under CC BY 4.0.

Pride flags

Mabbees — Thu, 20 Feb 2025 06:22:00 GMT

I made some pride flags in PICO-8. You can cycle between rainbow, trans and non-binary pride flags with the ❎ button.

This was my first time making a postcart! It was fun, and I learned some new code-size optimization tricks from demo-man. My first implementation already wasn’t too far off from the 300 character limit, so it didn’t take much extra fiddling. Maybe next time I’ll be more ambitious and try to make a postcart game.

Global Game Jam 2025

Mabbees — Wed, 29 Jan 2025 06:10:53 GMT

Over the weekend I helped organize, and participated in Global Game Jam over at Let’s Games! Tokyo. I helped make a game called ‘What is it Like to be a Bubble’. I’m proud of my team, and also what the other teams at our site accomplished. You can see all the games on our site’s demo video:

Team Peaceful Bubble

This year, I was glad to find other PICO-8 enthusiasts at the site to team up with. Josh (acedio) and Shane worked on a PICO-8 game at last year’s Global Game Jam. Eric (kitasuna) has made PICO-8 games at the last 2 Global Game Jams, and runs a vlog about some of his PICO-8 experiments. Douglas was new to PICO-8, but picked it up quickly.

I’m certainly not new to PICO-8, but what was new for me was working in PICO-8 with a team. Other PICO-8 games I’ve made have been with at most one other person. Other game jams where I’ve worked in a team of 3+ people have used Unity or Unreal.

I was pleasantly surprised by how smoothly our team of 5 was able to collaborate without stepping on each others’ toes. There were a few times we had merge conflicts in the spritesheet, which were somewhat hard to resolve, but thankfully that didn’t take up too much of our time. It was more common to have merge conflicts in the code, and those were straightforward to resolve.

Making a Shmup

This year, it felt like the hardest part of the jam was deciding on what to make. The theme for the jam was ‘bubble’, which is thankfully open to plenty interpretations, but is also less helpful in picking a direction.

We settled on making a shmup, as both a genre that our team members had an interest in, and something that could be reasonably executed on within 48 hours. It may be more accurate to say a shmup inspired game. Our game has no shooting, which reduced our development scope, and seemed to fit the theme more nicely. We wanted our player to feel floaty and fragile like a bubble, not powerful like a fighter ship.

Without the shooting part, our gameplay focuses on dodging bullets, and collecting pickups. I think it worked out well. Even with just those mechanics we were able to make an interesting challenge for players. Bullets and pickups working together to create push/pull tension.

We’re in Space

I made a lot of “scattered” contributions to the game: the credits page, the label image, sound effects, and little bits of code. But the part I’m most proud of is the music. Within a couple of hours of posting our game on itch.io, I already got a very flattering comment about the games’ music.

I wrote two short songs for the game: Liftoff and Zero-G. The first one has a pensive mood. The second is more going for dance-club vibes — something the player can get into flow to. I think both sound pretty space-y.

Liftoff

Zero G

One of the challenges of writing Zero-G was trying to mimic the way sidechain compression sounds using the sfx tracker. It turns out that writing the drum part the way I would notate it on staff paper ends up sounding wrong to me. Instead I shifted the drum part back by a 32nd note, so it starts just before the beat. This means there’s a slight rhythm shift between the A section and B section of the song that sounds a little bit wonky to me, but I’m not sure how noticeable it is.

Check it out

You can check out our game, ‘What is it Like to be a Bubble’ over on itch.io. It’s playable right in your browser.

What is it Like to be a Bubble by mabbees, Acedio, Douglas Driving, radicalslice

Christmas concert

Mabbees — Thu, 23 Jan 2025 01:00:00 GMT

Last month, I played a Christmas concert in a band with my friend Honami and some of her other musician friends. It was a lot of fun, and I daresay went pretty well for my first time playing guitar on stage (I’ve played concerts before, but I started playing guitar relatively recently compared to piano, which I feel more comfortable on).

I’m looking forward to playing more live music with them. We’re planning another gig for sometime this year.

CJ wrote nice things about me over on their blog! Big thanks to them, both for their support, and for recording the show — I’m linking their videos below.

social media types

PostedDec 5, 2024 by illuminesce

As some of you may already know, my co-dev and partner mabbees is very into music. He plays the cello, piano, and guitar, and has a great voice. He did the PICO-8 music for our game, Tomodachi 8in1.

Check out the albums on Bandcamp.

I am biased, but multiple sources close to me say that he’s quite talented. He even did a talk on musical modes for Nerd Nite Tokyo! It’s one of the most-watched videos on Nerd Nite Tokyo’s YouTube.

Santa Claus is Coming to Town

ステキなホリディー (Suteki na Holiday)

Jingle Bell Rock

(Reblog) Fortune Telling and Creative Pursuits

Mabbees — Tue, 07 Jan 2025 09:26:56 GMT

My friend perroquadrado shared a project they made over the break — a short fortune-telling web experience. They even wrote background music for it!

Fortune Telling and Creative Pursuits

PostedJan 7, 2025 by perroquadrado

…I’ve been spending the past six months or so trying to build a healthier relationship with technology. I hate a lot of what’s going on in the industry these days, but I decided that it’s not really healthy that it’s gotten so bad that I hate being at my laptop or on my phone at all. I’m not going to let tech companies take something I used to enjoy tinkering with, and there’s a ton of great tech out there that lets me feel like I’m in control of my life again. Customising my own internet radio station player was so much fun that it gave me the push I needed to come back and consider this idea again.

I can relate a lot to their struggles with technology and the tech industry, and trying to regain a sense of fun with it. I think that’s part of what has drawn me to PICO-8. It feels fun to tinker with. It feels like a system that I can master. Although it’s closed-source, it still feels like it isn’t trying to hide anything from me.

I’m also trying to make smaller projects that I can actually finish. Hopefully I’ll be able to put out more games and things this year.

Anyway, you can check out the full post above, or head on over to the Star Stuck Fortune Teller to get your horoscope. Here’s mine from today:

The star stuck fortune teller booth. A dog in glasses and a comfy sweater reads your fortune from a crystal ball. The horoscope reads:

A major change is on the menu for love — a really extravagant one. You’ve been carefully watched by the powers that be for some time now, and they’re well pleased with what they saw. Congrats.

Palette swaps

Mabbees — Tue, 10 Dec 2024 09:45:26 GMT

In a previous post, I talked about drawing effects and how they can be chained together using function composition. Composing functions is one of my all-time favorite techniques, and there’s another neat application of it in PICO-8: palette swaps.

What is a palette swap?

The concept of a palette swap is drawing something with a different set of colors. It’s a good way to get more mileage out of your PICO-8 sprites. There are a bunch of things you can do with palette swapping

create variations on a character
make simple looping animations
fade in or out of a scene
simulate day/night cycles

But what does this mean for us as programmers? How do we represent the concept in code?

Palette swaps as tables

One choice of representation is to use a look-up table. Keys in the table tell what color we want to remap, their corresponding values tell what color to map it to. Pretty straightforward. A nice benefit of using tables is that we can pass them directly to the PICO-8 pal function.

-- a palette defined as a look-up table
my_palette = {
	[5] = 2,
	[6] = 4,
	[7] = 9,
}

pal(my_palette)

Palette swaps as functions

There’s another reasonable choice of representation, and that’s to use a function. At its core, a look-up table is hardly any different from a function. Both are ways of defining a relation, it’s just that a table maps keys to values, whereas a function maps inputs to outputs.

-- a palette defined as a lua function
function my_palette(c)
	if c == 5 then return 2 end
	if c == 6 then return 4 end
	if c == 7 then return 9 end
	return c
end

-- apply a remapping to the
-- draw palette
function set_pal(f)
	for i=0,15 do
		pal(i,f(i))
	end
end
set_pal(my_palette)

It’s often more convenient to define palettes as look-up tables than functions. Functions do have other upsides, which we’ll get to in a minute.

Luckily, it’s easy to convert back and forth between these representations. To build a look-up table out of a function, we can iterate through all 16 colors and store the results in a table. To convert a look-up table to a function, we can build a function that checks the table for the input and returns the value it finds.

-- convert a remapping function to a look up table
function pal_to_tbl(f)
	local tbl = {}
	for i=0,15 do
		tbl[i] = f(i)
	end
	return tbl
end

-- convert a look up table to a remapping function
function tbl_to_pal(tbl)
	return function(c)
		return tbl[c] or c
	end
end

Drawing with palette swaps

Check out this image. The rabbit on the right is drawn with a palette swap, remapping brown to peach.

What’s that, you say? They’re both still brown?! How strange. I definitely applied a palette swap to the second one. Here’s the code to prove it:

alt_palette = {
	-- set color 14 (pink) to color 2 (maroon)
	[14] = 2,
	-- set color 4 (brown) to color 15 (peach)
	[4] = 15,
}

function _draw()
	cls(6)
	-- draw sprite on the left
	camera(-40,-64)
	draw_bun()
	-- draw sprite on the right with a palette swap
	camera(-88,-64)
	pal(alt_palette)
	draw_bun()
	-- reset the palette
	pal()
end

What I didn’t mention is that the left sprite was already being drawn with a palette swap. The original sprite looks like this. With the right palette swaps, this base sprite can be used to draw all 9 of the rabbits in the grid above.

And here’s the code for draw_bun.

function draw_bun()
	pal({
		-- set all fur colors to 4 (brown)
		[1] = 4,
		[2] = 4,
		[5] = 4,
		[7] = 4,
	})
	local x,y = -20,-16
	spr(1,x,y,5,4)
end

Admittedly, I cheated to make a point, but the point is it would be nice if we were able to apply a palette swap to arbitrary drawings, not just to original drawings. I want the concept of palette swapping to be general and composable.

Combining palettes

How can we change the code to get the expected result for the second sprite — namely, a peach colored rabbit?

We have a palette we can use to draw a brown rabbit and a palette to change brown to peach. What we still need is a way to combine both palette effects. This is where the function representation for palette swaps really shines. Combining palette swaps is function composition!

-- compose two functions
-- can be used to chain two palette swaps together
function compose(f,g)
	return function(x)
		return g(f(x))
	end
end

brown_bun = tbl_to_pal({
	-- set all fur colors to 4 (brown)
	[1] = 4,
	[2] = 4,
	[5] = 4,
	[7] = 4,
})
peach_bun = tbl_to_pal({
	-- set color 14 (pink) to color 2 (maroon)
	[14] = 2,
	-- set color 4 (brown) to color 15 (peach)
	[4] = 15,
})

function draw_bun()
	local x,y = -20,-16
	spr(1,x,y,5,4)
end

function _draw()
	cls()
	-- draw brown bunny on the left
	camera(-24,0)
	pal(pal_to_tbl(brown_bun))
	draw_bun()
	-- draw peach bunny on the right
	camera(24,0)
	pal(pal_to_tbl(
		compose(brown_bun, peach_bun)
	))
	draw_bun()
	-- reset the palette
	pal()
end

And with that, we’ve fixed the bug. Combining the two palette swaps gives us the peach colored rabbit we wanted.

Refactoring

The code above produces the results I want, but not without making some significant changes to the code’s structure. Ideally, I want a way to define the draw_bun function in a self-contained way that includes the palette swapping. Then I’d like to draw the peach colored rabbit as a variation on that function. That is to say, I want drawing with a palette swap to be a composable effect.

Here’s a draw_with_palette function we can use to manage palette swaps, even repeated ones. It makes use of a state variable, draw_pal, to track what palette-swap we’re currently drawing with. It also takes care of combining palette swaps, and restoring the old palette afterwards. As long as we avoid calling pal directly anywhere else, this function handles all our composable palette-swapping needs!

function id(x) return x end

draw_pal = id
function draw_with_palette(p)
	return function(draw)
		return function()
			local prev = draw_pal
			-- combine the old palette with the new one
			draw_pal = compose(p,draw_pal)
			pal(pal_to_tbl(draw_pal))
			draw()
			-- restore the old palette
			draw_pal = prev
			pal(pal_to_tbl(draw_pal))
		end
	end
end

-- usage:
brown_bun = tbl_to_pal({
	-- set color 5 (gray) to color 4 (brown)
	[5] = 4,
	-- set color 7 (white) to color 4 (brown)
	[7] = 4,
})
peach_bun = tbl_to_pal({
	-- set color 14 (pink) to color 2 (maroon)
	[14] = 2,
	-- set color 4 (brown) to color 15 (peach)
	[4] = 15,
})

draw_bun = draw_with_palette(brown_bun)(function()
	local x,y = 24,24
	spr(1,x,y,2,2)
end)

function _draw()
	cls()
	-- draw brown bunny on the left
	camera(-24,0)
	draw_bun()
	-- draw peach bunny on the right
	camera(24,0)
	draw_with_palette(peach_bun)
		(draw_bun)()
end

Putting it all together

Having a composable palette swapping system is great for getting the most out of your sprites. It dovetails nicely with the system of drawing effects from my post Suspend Your Draw Calls!

Here’s the code for the rabbit grid from earlier. Each one is drawn with a combination of two palette swaps. One to select which fur pattern to use, and the other to choose the colors.

function draw_bun()
	local x,y = -20,-16
	spr(1,x,y,5,4)
end

--patterns
pal_solid = tbl_to_pal({
	[1]=5,
	[2]=5,
	[5]=5,
	[7]=5,
})
pal_dutch = tbl_to_pal({
	[1]=5,
	[2]=7,
})
pal_spotted = tbl_to_pal({
	[1]=5,
	[2]=5,
	[5]=7,
})

--colors
pal_gray = id
pal_orange = tbl_to_pal({
	[5] = 9,
})
pal_brown = tbl_to_pal({
	[5] = 4,
	[7] = 15
})

--buns
solid_bun = draw_with_palette(pal_solid)
	(draw_bun)
dutch_bun = draw_with_palette(pal_dutch)
	(draw_bun)
spotted_bun = draw_with_palette(pal_spotted)
	(draw_bun)

function _draw()
	cls(6)

	camera(-24,-24)
	draw_with_palette(pal_gray)
		(solid_bun)()
	camera(-64,-24)
	draw_with_palette(pal_gray)
		(dutch_bun)()
	camera(-104,-24)
	draw_with_palette(pal_gray)
		(spotted_bun)()

	camera(-24,-64)
	draw_with_palette(pal_orange)
		(solid_bun)()
	camera(-64,-64)
	draw_with_palette(pal_orange)
		(dutch_bun)()
	camera(-104,-64)
	draw_with_palette(pal_orange)
		(spotted_bun)()

	camera(-24,-104)
	draw_with_palette(pal_brown)
		(solid_bun)()
	camera(-64,-104)
	draw_with_palette(pal_brown)
		(dutch_bun)()
	camera(-104,-104)
	draw_with_palette(pal_brown)
		(spotted_bun)()
end

Reference

If you’d like to use these functions in your own carts, here’s a summary of the library code from this article. You can also check out the demo cart for example usage.

I’m licensing both under CC BY 4.0.

function id(x) return x end

function compose(f,g)
	return function(x)
		return g(f(x))
	end
end

function pal_to_tbl(f)
	local ret={}
	for i=0,15 do
		ret[i] = f(i)
	end
	return ret
end

function tbl_to_pal(tbl)
	return function(c)
		return tbl[c] or c
	end
end

draw_pal = id
function draw_with_palette(p)
	return function(draw)
		return function()
			local prev = draw_pal
			draw_pal = compose(p,draw_pal)
			pal(pal_to_tbl(draw_pal))
			draw()
			draw_pal = prev
			pal(pal_to_tbl(draw_pal))
		end
	end
end

(Reblog) social media types

Mabbees — Fri, 06 Dec 2024 10:01:29 GMT

social media types

PostedDec 5, 2024 by discographette

…in the Fixed Type version of the scenario, if I see a friend who posts not often but see a post I like by them, I can hit like- all it serves is to signal to them I saw it, and that I liked it. This is like waving to someone you haven’t seen in a while, or nodding in response to something a friend said in a group you literally liked.

In a Reactive Type, this action is interpreted entirely differently (and varies platform to platform) but inevitably, much like buying a toilet on amazon will recommend you more toilets, you will now be served MORE of that friend’s content. It’s essentially an onramp button that weights their posts being mixed into your timeline, which is not necessarily how everyone is using it…

Discographette wrote a neat breakdown of different design decisions across social media platforms, and their ramifications. I like her taxonomy of fixed vs reactive types.

In general, I wish more platforms would take the “fixed” route. I found Cohost’s design to be quite refreshing—namely, showing only posts from people or tags that I follow, and always showing them in chronological order. The feedback loops inherent to “reactive” social media seem both harmful and inevitable.

That said, as an American living in Japan, I can relate to the problem of not being able to keep up with my friends in different time zones. Chronological timelines tend to make this harder, since things that were posted while I’m asleep will require scrolling further back to see. It’s a prime example of something algorithmic curation could be harnessed for to do good.

Suspend Your Draw Calls!

Mabbees — Tue, 26 Nov 2024 08:50:28 GMT

I want to show you some cool graphic effects you can achieve in PICO-8. It’s also a nice case-study for applying some functional programming techniques. What do I mean by graphic effects? Let’s take a look at some examples.

Text drawn with the regular print function looks very plain. There are some things we can do to make it stand out more. We could add a drop shadow, or an outline. Or how about both?

Basic implementation

One way to code this is like this:

function print_outline(text,x,y,c,o)
	for i=-1,1 do
		for j=-1,1 do
			print(text,x+i,y+j,o)
		end
	end
	print(text,x,y,c)
end

function print_shadow(text,x,y,c,s)
	print(text,x,y+1,s)
	print(text,x,y,c)
end

function print_outline_shadow(text,x,y,c,o,s)
	for i=-1,1 do
		for j=-1,2 do
			print(text,x+i,y+j,o)
		end
	end
	print(text,x,y+1,s)
	print(text,x,y,c)
end

-- usage:
function _draw()
	cls(2)
	print_outline("outline",50,54,7,14)
	print_shadow("shadow",52,62,7,0)
	print_outline_shadow("both",56,70,7,14,0)
end

This is fine, but I think we can do better. Conceptually, print_outline_shadow is combining the effects of the other two functions. It would be nice if the structure of the code reflected this. Come to think of it, there’s another way to combine both effects. We could add an outline to text with a drop-shadow instead of adding a drop-shadow to outlined text. Right now the code doesn’t give us a good way to do that—we’d have to define a new function from scratch for print_shadow_outline.

I’m going to take this code through some refactors to bring out the shared structure and make these effects composable.

Refactoring

For starters, I’m going to change the print calls to use the current draw color instead of passing the color as an argument. This means adding calls to color to setup the draw state.

function print_outline(text,x,y,c,o)
	for i=-1,1 do
		for j=-1,1 do
			color(o)
			print(text,x+i,y+j)
		end
	end
	color(c)
	print(text,x,y)
end

function print_shadow(text,x,y,c,s)
	color(s)
	print(text,x,y+1)
	color(c)
	print(text,x,y)
end

The next refactor I’ll make is similar. I’m going to use the camera function to handle the offsets.

function print_outline(text,x,y,c,o)
	for i=-1,1 do
		for j=-1,1 do
			camera(-i,-j)
			color(o)
			print(text,x,y)
		end
	end
	color(c)
	camera(0,0)
	print(text,x,y)
end

function print_shadow(text,x,y,c,s)
	camera(0,-1)
	color(s)
	print(text,x,y)
	camera(0,0)
	color(c)
	print(text,x,y)
end

That was a lot of change with not much to show for it. The functions still behave the same, but the code is looking a lot worse! There was a purpose to all this though. All the print calls are now exactly the same. That sets us up nicely for the next refactor.

Higher-order functions

This is where I’ll show of the first bit of functional programming knowhow. The print call is now repeated in several places. What can we do to clean up a repeated section of code? Same thing we always do as programmers — store the repeated part in a variable and reuse it!

It’s important to take care while doing this. We can’t just say draw = print(text, x, y) because we’re not interested in the return value of print, we want to reuse its side-effect. We can achieve this by wrapping the print call in a function.

function draw_with_outline(draw,c,o)
	for i=-1,1 do
		for j=-1,1 do
			camera(-i,-j)
			color(o)
			draw()
		end
	end
	color(c)
	camera(0,0)
	draw()
end

function draw_with_shadow(draw,c,s)
	camera(0,-1)
	color(s)
	draw()
	camera(0,0)
	color(c)
	draw()
end

-- usage:
function _draw()
	cls(2)
	local draw_text_1 = function()
		print("outline",50,54)
	end
	local draw_text_2 = function()
		print("shadow",52,62)
	end
	draw_with_outline(draw_text1, 7, 14)
	draw_with_shadow(draw_text2, 7, 0)
end

Generality

Even though we started with text effects, the fact that we abstracted out the draw function means this also works when drawing circles, rectangles, lines, etc. Cool!

function _draw()
	cls(2)
	-- both the text and the rectangle
	-- are drawn with a shadow!
	draw_with_shadow(function()
		print("my cool game",42,60)
		rect(32,32,96,96)
	end, 7, 0)
end

It would be even cooler to do the same thing when drawing a sprite. Luckily, there’s not too much else we need to change to make that work. All we need to do is stop relying on the color function, and use of pal instead. pal gives us control over the palette PICO-8 uses when drawing anything, in much the way that color gives us control over the draw color PICO-8 uses for print, circle, etc.

function set_color(c)
	-- set all 16 colors to 'c'
	for i=0,15 do
		pal(i,c)
	end
end

function draw_with_outline(draw,o)
	for i=-1,1 do
		for j=-1,1 do
			camera(-i,-j)
			set_color(o)
			draw()
		end
	end
	set_color(c)
	camera(0,0)
	draw()
end

function draw_with_shadow(draw,c,s)
	camera(0,-1)
	set_color(s)
	draw()
	camera(0,0)
	set_color(c)
	draw()
end


-- usage:
function _draw()
	cls(2)
	draw_with_outline(function()
		spr(1,64,64)
	end, 7, 14)
end

Now we can apply an outline or drop-shadow effect when drawing sprites.

Suspended functions

There are more changes I want to make. I want to show how these effects can be composed together. To make that easier, instead of writing functions that we call to draw something to the screen, I’m going to switch to functions that return a “suspended” draw call. I’m also going to change the argument order, to put the draw function last.

We’ve already seen closures once before. I used a closure to extract the print call earlier and pass it as an argument to draw_with_outline. We can return a closure from a function too.

function draw_with_outline(c,o,draw)
	return function()
		for i=-1,1 do
			for j=-1,1 do
				camera(-i,-j)
				color(o)
				draw()
			end
		end
		color(c)
		camera(0,0)
		draw()
	end
end

function draw_with_shadow(c,s,draw)
	return function()
		camera(0,-1)
		color(s)
		draw()
		camera(0,0)
		color(c)
		draw()
	end
end

-- usage:
function _draw()
	cls(2)

	-- don't forget the extra `()` at the very end!
	draw_with_outline(7,14,
		draw_with_shadow(7,0,function()
			print("outline",50,60)
		end)
	)()
end

There is an issue to watch out for now—it’s easy to forget the extra set of () needed to call the closure. I’ve forgotten it many times and wondered why on earth my sprites were never showing up.

Composing effects

The last refactor I want to do is to address the deeply nested code. Ironically, the way to address the nesting (in the usage), involves more nesting (in the library functions). Such is life. The extra level of nesting comes about by returning a partially applied or “curried” function.

function draw_with_outline(c,o)
	return function(draw)
		return function()
			for i=-1,1 do
				for j=-1,1 do
					camera(-i,-j)
					color(o)
					draw()
				end
			end
			color(c)
			camera(0,0)
			draw()
		end
	end
end

function draw_with_shadow(c,s)
	return function(draw)
		return function()
			camera(0,-1)
			color(s)
			draw()
			camera(0,0)
			color(c)
			draw()
		end
	end
end

Now we come to one of my favorite techniques. Since these effects are now functions that accept a draw function and return another draw function, they can be composed end-to-end. The combinators compose and chain do just that for a pair or a list of effects, respectively.

function id(x) return x end

function compose(f,g)
	return function(x)
		return g(f(x))
	end
end

function chain(fs)
	local ret = id
	foreach(fs, function(f)
		ret = compose(ret,f)
	end)
	return ret
end

-- usage:
function _draw()
	-- a nice flat list of effects
	-- no "extra" nesting required
	chain({
		draw_with_shadow(7,2),
		draw_with_outline(7,14),
		draw_with_shadow(7,0),
	})
		(function()
			print("fancy text",44,60)
		end)
		()
end

Debugging and cleaning up

We’ve done the refactoring we need in order to make effects composable, but there are still a few minor details to work out. One issue is with the camera, and one is with the color palette.

Now that our implementation uses camera, it might cause problems when our _draw() function is already using camera. It also causes problems when using multiple effects. It would be nicer if we took into account the current camera state when we use draw_with_shadow or draw_with_outline and put it back how it was when we’re done. We can do this by reading the camera state from memory and storing it in a variable. Similarly, let’s put the palette back how it was. We can also address a bug that happens when chanining effects — we want to override the palette only if we haven’t already changed it with another effect.

While I’m at it, I’ll also drop the argument for the initial color. Instead I’ll let PICO-8 use the current palette and draw color, which will handle the case when the sprite we want to draw uses multiple colors.

draw_color = nil
function draw_with_color(c)
	return suspend(function(draw)
		-- get the current palette state
		local p1,p2,p3,p4 = peek4(0x5f00,4)
		local prev = draw_color
		-- set the draw color, but only if it hasn't already been changed
		draw_color = prev or c
		for i=0,15 do
			pal(i,draw_color)
		end
		draw()
		-- restore the palette
		poke4(0x5f00,p1,p2,p3,p4)
		draw_color = prev
	end)
end

function draw_with_outline(o)
	return function(draw)
		return function()
			-- get the current camera state
			local x,y = peek2(0x5f28,2)
			draw_with_color(o)(function()
				for i=-1,1 do
					for j=-1,1 do
						camera(x-i,y-j)
						draw()
					end
				end
			end)()
			-- restore the camera state
			camera(x,y)
			draw()
		end
	end
end

function draw_with_shadow(s)
	return function(draw)
		return function()
			local x,y = peek2(0x5f28,2)
			draw_with_color(s)(function()
				camera(x,y-1)
				draw()
			end)()
			camera(x,y)
			draw()
		end
	end
end

Closing remarks

I hope I’ve passed along some useful functional programming knowhow, some PICO-8 tips, or maybe even both. If it’s useful to you, feel free to build on this code for your own projects. It’s something I use in a lot of my own carts.

If you’re not used to functional programming, these techniques can seem obtuse—they certainly felt that way to me when I was first learning them. Over time, I developed enough familiarity with them that they became second nature. I hope by showing the refactoring process step-by-step, I could help to de-mystify the way this code works.

I started out by saying I wanted to do “better” than the straightforward implementation. I certainly like my approach better. I like composable code, in particular because of how it makes it easy and fun to try different combinations, but I want to acknowledge that there are tradeoffs. My implemantation is a lot longer than the straightforward version, and not so straightforward to debug. If you’re trying to optimize your token count, this might not be the best approach.

Reference

Here’s a complete reference of the effects in this article, and a demo cart showing them off.

I’m licensing both under CC BY 4.0.

function id(x) return x end

function compose(f,g)
	return function(x)
		return g(f(x))
	end
end

function chain(fs)
	local ret = id
	foreach(fs, function(f)
		ret = compose(ret,f)
	end)
	return ret
end


draw_color = nil
function draw_with_color(c)
	return function(draw)
		return function()
			-- get the current palette
			local p1,p2,p3,p4 = peek4(0x5f00,4)
			local prev = draw_color
			draw_color = prev or c
			for i=0,15 do
				pal(i,draw_color)
			end
			draw()
			-- restore the palette
			poke4(0x5f00,p1,p2,p3,p4)
			draw_color = prev
		end
	end
end

function draw_with_outline(o)
	return function(draw)
		return function()
			-- get the current camera state
			local x,y = peek2(0x5f28,2)

			draw_with_color(o)(function()
				for i=-1,1 do
					for j=-1,1 do
						camera(x-i,y-j)
						draw()
					end
				end
			end)()

			-- restore the camera state
			camera(x,y)
			draw()
		end
	end
end

function draw_with_shadow(s)
	return function(draw)
		return function()
			local x,y = peek2(0x5f28,2)

			draw_with_color(s)(function()
				camera(x,y-1)
				draw()
			end)()

			camera(x,y)
			draw()
		end
	end
end

Microformats and Webmentions

Mabbees — Thu, 31 Oct 2024 07:53:44 GMT

I made a couple of updates to my site: microformats and webmentions. They’re mostly invisible changes, but hopefully they will make blogging here on neocities more fun and engaging.

Changes

My posts now use the h-entry microformat, which makes it easier for software to parse. Software such as … maybe your blog! It’s a format for making posts rebloggable. Going the other direction, I added some tools to my site-generator to embed posts. Now I can reblog other posts here! The embeds are generated automatically by (you guessed it) parsing the h-entry microformat.

I also set up webmentions. This is a way for me to notify other people when I link to their sites, and for other people to notify me when they link to my site. I handle outgoing webmentions through @remy/webmention, and incoming webmentions through webmention.io.

Inspiration

What’s the point of all this? The point is to have conversations! Right here on our very own websites, without needing to have Tumblr or Bluesky or Facebook act as the middleman. I was specifically inspired by what Natalie Weizenbaum is doing over at nex-3.com, and her essay on what she calls the “Sociable Web”. If everything went according to plan, maybe you’ll see this post in the webmentions list over on Natalie’s blog.

A Sociable Web

PostedOct 19, 2024 by Natalie

The deepest virtue of independent websites communicating with loosely-coupled conventions and protocols isn’t anything technical. It’s the fact that you can just do it. You don’t need a platform to exist, you don’t even need anyone else to be doing the same thing (although it’s more fun that way). You can write a blog and people can read it via RSS or just by loading it up every now and then. You can hook up as much IndieWeb technology as you want, or just focus on the cultural aspect by writing link roundups and leaving comments on the stuff you read.

The web is feeling more and more corporate every day, and the corporate web is feeling more and more hostile every day. It’s nice to have spaces that are our own. It’s nice that folks on the indie web are figuring out how we can do that without completely giving up the functionality of other platforms. It’s not, at this point in time, as convenient and easy to use. Maybe it never will be completely. But none of the technology involved is so arcane that it couldn’t be made easy to use.

QR codes in PICO-8

Mabbees — Thu, 31 Oct 2024 02:30:01 GMT

My partner gifted me a Miyoo Mini Plus for Christmas last year. I love it! It’s such a cute little system. One of the best things about it is that with a little convincing, it can run PICO-8 natively.

I’ve enjoyed bringing it with me to indie game developer meetups and I showing off the PICO-8 games I’ve been working on. It’s been a fun way to share my portfolio. It’s made me realize it would be really convenient if I could pull up a QR code on the miyoo, then people could scan it and find the games online. So of course, I built a PICO-8 cart to generate QR codes. A saner person might have generated a QR code using an existing tool and simply imported it into PICO-8, but well… where’s the fun in that?

Implementation

I followed Thonky’s QR code tutorial to work out the implementation. To me, the most interesting part was learning about error-correcting codes. QR codes use a method called Reed-Solomon Error correction, which uses some clever number theory, and can be implemented efficiently using some clever programming tricks. Apart from that, there are a bunch of fiddly details that are easy to get wrong, but I did eventually get my program to make QR codes that my phone can scan. As coding exercises go, this one felt pretty rewarding.

I only implemented a subset of what QR codes are capable of. My cart always uses alphanumeric mode, error-correction level Q, and version 10 (57 × 57). That puts a limit on how long a message it can encode of 221 characters — still more than enough for sharing URLs.

The Cart

Here’s the cart. You can generate a QR code either by dragging and dropping a text file, by hard-coding a value, or by running the cart from the command-line.

Spooky Halloween Tune

Mabbees — Mon, 21 Oct 2024 09:45:39 GMT

This is a little tune I wrote for Tomodachi 8in1. It’s going to be the background music for a Halloween themed dressup mini-game.

I think the theremin part at the end sounds like a ghost had to sneeze!

Egg'ry Buggy Clap Your Hands!

Mabbees — Mon, 30 Sep 2024 09:56:27 GMT

I wrote this song for COMPOST #6, a community music jam over on cohost. The theme was “party”, and entries were supposed to be completed in under 2 hours. I did pretty well, though it probably took me a little longer (especially if you include the time it took to add eggbugs).

I’m really happy with what I was able to come up with! I can tell I’m getting better at writing songs with the PICO-8 tracker, and better at being able to put my ideas down quickly.

Remixing

Feel free to use this in your own PICO-8 projects with attribution! I’m licensing it under CC BY 4.0.

Music by mabbees
Eggbug sprite by Axolotine (adapted by me for the PICO-8 color palette)

mabbees

(Reblog) Snowpeel

Snowpeel

(Reblog) RadicalSlice devlog

Adding Level Branching (and music!) to my Excitebike-like Snowboarding Game

The Music of XCB

Downhill Dash

Sunshine on the Mountain

Dynamic music

What is a Spritesheet?

How do game engines work with images?

Why use spritesheets?

It’s not all-or-nothing

Spritesheet Tricks

The plan

Encoding

Decoding

A bit of theory

Implementation details

Encoding

Decoding

Acknowledgements and Inspiration

Footnotes

Footnotes

On verbal shutdown

Analogy 1

Analogy 2

Analogy 3

Analogy 4

Very verbal - you can say exactly what you mean to say.

Mostly verbal - you can say most of what you want to say. You sometimes need to “talk around” points where you don’t have the right words.

Somewhat verbal - you can communicate the broad message you want to get across, but not without effort.

Partial verbal shutdown - you can’t access many parts of your vocabulary. The things you can say aren’t what you mean. Face it, you’d probably be better off keeping your mouth shut.

Total verbal shutdown - you can’t access most of your vocabulary. You’re just about physically incapable of forming a full sentence. Most words you try to say come out garbled and incomprehensible.

Closing thoughts

Footnotes

Footnotes

PICOJAM 2025

Taiko Terror

Omatsuri TD

Picogori

Closing thoughts

Footnotes

Footnotes

Happy birthday, Illuminesce!

Happy birthday, Illuminesce!

Lessons From Oz

”The Wizard of Oz” and fiat currency

”The Wizard of Oz” and fascism

Lessons for 2025

Tracker Tips

Brighter waveforms need less volume

For drum parts, vary pitch instead of volume

Use the slide effect for smooth volume changes

Use the vibrato in the middle of notes

Use the detune filter for power chords and octaves

Detune level 1

Detune level 2

Business Cart

Make your own

Pride flags

Global Game Jam 2025

Team Peaceful Bubble

Making a Shmup

We’re in Space

Check it out

Christmas concert

social media types

All I Want for Christmas is You

Santa Claus is Coming to Town

ステキなホリディー (Suteki na Holiday)

Jingle Bell Rock

(Reblog) Fortune Telling and Creative Pursuits

Fortune Telling and Creative Pursuits

Palette swaps

What is a palette swap?

Palette swaps as tables

Palette swaps as functions

Drawing with palette swaps

Combining palettes