Today the Stars of the Screen’s  October update went live! It adds three secret levels. One of these is a simple homage to Flying Toasters (with a twist!) and another is MS Office 6.0 Floppy Disk Installation Simulator. Let’s keep the third one a secret.

I will spoil the Flying Toasters’ twist below, so if you want to explore first yourself, stop right here!

Spoilers below this pic

After I published Stars of the Screen, the most repeated question (and request) was about Flying Toasters. It’s a famous screensaver that I knew about but it wasn’t a part of my own 90s nostalgia — being a DOS kid, I found about it much later in the 00’s. 

The only screensaver I remember from grandma’s office Mac was the one about Bad Dog running about and ruining whatever you had opened on your desktop. Only today I discovered that it’s also from After Dark, the famous collection of screensavers that included Flying Toasters.

How to remake Flying Toasters?

Joecunningham pointed me to the article about Tomoya Ikeda, the artist who did the art for Flying Toasters (written by Matt Sephton, another dev making games (not only) for Playdate as Gingerbeardman) and an interview with the creators of After Dark. 

Oh, I think there’s no question that we grew creatively. (…) Engineers as well as artists contributed creatively. (…) Our philosophy was to remain “aggressively stupid”. (Jack Eastman)

I spent the rest of the evening fascinated, reading everything I found. At times discovering pieces of the “old web” from the 90s and early 00’s. What an emotional trip! I liked how the authors thought deeply, how they worked with utmost care, creating screensavers you can watch for a long time without getting bored.

My enthusiasm grew and I decided to include some kind of ode to FT in a future update. However, I didn’t know how — how do you remake a relatively simple screensaver with funny and beautiful art (in both visuals and programming)? I did not want to create a port or a clone; I wanted to make a true homage.

So… after few weeks it clicked. I read about rad devs making 3D level editors or even dungeon crawlers for Playdate. I think that a thread by Gingerbeardman (that man again!) about prerendering racing cars for a beautiful tech demo helped me to decide to try it out. 

I decided to make Flying Toasters with a twist — that twist being literally the ability to rotate the toasts and toasters by turning the crank.

 
The stupid pipeline

One of the marvelous things about the Playdate’s very own 3D dungeon crawler Legend of Etad is it’s asset pipeline — Gareth Williams described his use of Unity to prerender the environments. I was inspired… though I knew this was a one-off job, so it went very stupid really quickly. 

This is in no way a tutorial, a best practice or a recommendation — I hope that it just shows that you can do a lot using random skills and tools you have at your disposal now. You may discover something to learn thoroughly later, but first, let’s do something in a clunky and broken way. As Yoda wouldn’t say: “There’s do. There’s also a lot of try and try again. And again.”

I hope that in sharing this process, I may push somebody to try stuff they don’t feel qualified for :D

First I wanted to create the 3D models. But I did not work with 3D art before… except that one time I had a 3D printer for few months at my Uni workplace and played with it a lot. So I dug up my Tinkercad account and yep, I still had it in me.

After that I needed to pre-render the rotated models. I found that I can use a browser library Three.js to display the models in a browser, so it can’t be too hard to display them in multiple rotations? I found a random codepen and started with it to prevent myself from reading a manual like a normal person.

And it worked! I knew about Orthographic projection from my brief encounter with Unity last winter — I watched a lot of Tom Francis’ tutorials back then to prevent myself from burning out.

So, here’s some cheesy-looking toasted bread:

This was easy. But what about the wing animation on the toasters? This nearly killed me. 

I knew I needed to split the toaster and the wings into separate models. I did that… but animating it was hard because both models had their origin points at their center. 

And you need the wing to rotate around the point that connects it to the toaster. Mighty Elder Stack Overflow said “this is better solved by adjusting the model”. I don’t argue with Stack Overflow.

So I downloaded Blender. What an overwhelming piece of software. There’s SO MUCH UI! I love it. 

It took me 10 minutes to find how to adjust the origin and phew, it worked.

I imported the models back into browser and discovered that working with that Codepen won’t be enough. I moved to a standalone HTML file (I had to start up a local python server to import the STL models, but that’s actually one of the things I normally do as a web dev). 

I rendered all the rotations with 17 animated steps. Step by step as I did not want to render it all at once. Two examples:

I just made screenshots, combined them in Aseprite, made the background transparent and exported all these into a single large picture. 

If you are still reading this, you are one brave soul! 

After that I thought I’m almost finished — the only thing that remained was to run it through some 1bit dithering script! 

After some tinkering and measuring to find out what size worked best for Playdate’s screen, I used Ditherlicious, a website that processes images into nicely dithered 1 bit images (it preserves transparency which is nice). 

I had to do it twice because I forgot since the last time that it also crops the image a bit. The dithering algorithm needs data from the margin to display correct values on the border — that wasn’t needed in my case as the margins were transparent but the algorithm did not care.

I loaded the images back to Aseprite, added a contour and… found out that I rendered the models too close to each other. Ugh. I moved the columns of toasters to fit into the grid by hand as I did not want to go through the whole process again. The result looks like this:

And this is how a simple toast looks like rendered:

And processed:

Making the rest of the minigame was… not that easy, but I was in a familiar territory by then.

Once again, thanks a lot to Joecunningham who made me look into it. Here’s a special wallpaper version of those dithered toasters in Playdate colors as a thank you! It’s a version that is slightly larger than the one used in the game. I had to remove the last row of animation to keep them all at 4K resolution :D (Also, if you overlay a well-positioned grid over this wallpaper, you’ll find those columns that overlap with each other!)

A small preview follows.

Have a nice day, everybody! Enjoy the update <3