How We Built A Mini-game

Today, we're proud to share our latest marketing project: a mini-game that can be played at threads.com/game. As the brand designer and creator of this experience, this post contextualizes the decisions made and what led to the release of this delightful exercise.

We'll cover:

1. The voxel characters
2. The mission
3. Character animation
4. Game controls & scoring mechanisms
5. Game concept and narrative

Voxel characters

At Threads.com we feature simple, abstract, 3D avatars built from volumetric pixels (voxels). They're used as avatars in our desktop app, they float around on our website, and "speak" in our marketing.

the medium is the message

More than illustrations, they represent ourselves, our customers, and some aspects of pop culture. They're an important part of our brand.

I saw an opportunity to build a 3D world for these voxel characters. One that could inform where these voxel characters are, and what they're doing.

So I pitched the idea of building a mini-game. The intention was for the average player to pilot one of our voxel characters in a simple scenario, driving the point of Threads home.

Modeling

Our voxel characters are modeled in MagicaVoxel, a lightweight GPU-based voxel editor. Apart from its speed and utility, I rely on this tool to keep the proportions of our characters consistent. A voxel editor only has a single unit of measurement: 1 voxel

There are no decimals, half-voxels, curves, or fractions. Everything snaps to a gridline.

The simplicity is a beautiful constraint.

animating for gameplay

Magicavoxel is great for modeling, but it's not for animating.

I tried exporting the .OBJ file and opening it in Blender, but that requires a UV Map (a single image file with the "skin" of the 3D figure). This process is tedious and requires several other files just to render different textural information (clothing, skin, hair) because light diffusion, shadows, and reflections need to be treated accordingly.

I needed a lightweight solution.

meanwhile...

Back in October, Spline introduced conditional logic to their lightweight browser-based 3D editor. I was already thinking about what I could do to bring our voxel characters to life, and this new development caught my eye.

Spline is already built for creating interactive 3D experiences. In addition to 3D modeling, gameplay controls, and animation, it has physics, so real-time simulations (objects colliding, falling) are all possible.

For this standalone mini-game, Spline was the perfect tool.

I quickly found that importing a 3D object into Spline wouldn't work. All of the voxels I modeled previously were fused together to create a single combined shape.

By contrast, you can see how much more animated the worm is as it runs circles around the solid figure. That's because it has independent body parts that move in relation to the head. The resulting animation is more fluid and delightful.

body movement

To animate each part of our voxel character, I rebuilt it from scratch in Spline using individual blocks and used boolean commands (merging geometry) wherever it made sense.

By doing this, I could specify idle animations—like the torso moving up and down to breathe—walking animations, and jumping animations.

keeping score

While game controls have been established and movement animation is set, a fully formed game can't exist unless it has a goal. Players need a way to "win."

To establish a goal, I needed to test the constraints. Currently, Spline doesn't have a way of storing variables or numeric information (like a score) out of the box. Dynamic text fields are not supported yet either. I'm not an engineer, so custom code would not have been an option for me.

I had to get creative.

If you've played Nintendo's Mario Party, you'll know that it involves a random assortment of 100's of mini-games.

Each mini-game has a different premise, and therefore a different set of rules. Sometimes the format is "Last man standing" or a traditional "Race to the finish" and these rules don't require a point system.

In some cases, the format is a "Puzzle" — and the goal is to figure out how to arrange the pieces correctly within the timeframe. I had a feeling this was it.

For this format, I needed to create the interactions for the following:

• A timer/countdown
• Whether an object is in the right place

hacking a scoreboard

Since Spline doesn't support dynamic text, I had an idea to use a Video Layer to display the countdown. The benefit of this is that I can link the video to a few events and triggers

• Event — When the scene loads, the video autoplays, so the countdown starts.
• Trigger — When an object is placed where it's supposed to be, the video pauses, causing the countdown to stop.

This is what it looks like when I added a basic Video Layer to the scene

In After Effects, I prototyped a countdown video with minimal styling, just to get the idea across. This was exported as an MP4.

Once I had the countdown sorted, all I had to do was create the interaction (and animations) that confirm a correct placement:

• The block gets pushed by Super Fabio
• Once it's in the right area, the dynamic block disappears, and the finished block reappears in its place — this creates a "snapping" interaction.
• As soon as it snaps into place, the timer stops.

The remaining time then functions as the "score" — and from this mechanism, we decided on the final approach to the mini-game.

In this "Puzzle" format, the challenge is presented by the environment. To win, the player must re-arrange the environment to satisfy a condition.

Threads is a workplace platform. We position ourselves as a replacement for Slack by balancing threads (asynchronous discussions, notes, presentations) with voice and text chat (real-time communications) in a more thoughtful way.

Our positioning was taken literally as the instruction for the mini-game.

The goal is to put Threads in the right place.

establishing scale

Since Super Fabio is a voxel character (normally used as an in-product avatar) he's typically seen in the product UI at 24x24 or 36x36 pixels. That's quite small.

That makes him a bit smaller than an app icon.

Rousseau, i shrunk a coworker

By comparison, the device outside of the app is quite large. It made perfect sense for the game world to be a large mobile phone (with a watch to keep time).

designing the landing page

At this point was clear to us that this standalone experience would be best suited on a page of its own. It's a mini-game controlled by WASD (or arrow) keys, designed for desktop, so I wanted to render a desktop computer that shows the game being played.

But it couldn't just be any desktop computer. Just because the devices in the game world are "modern" doesn't mean the gaming device had to be "modern" too.

In fact, it doesn't even have to be real.

There is an element of nostalgia—a retro appeal— to the way our voxel characters are constructed. They resemble video game characters from the late 80's.

I thought it might be fun to recreate the Apple Macintosh 128K (c.1984) as a fictional machine from a distant future. Dubbed threads84 (from 2084), a thoroughly evolved version of our own company decided to use time travel to send us a delightful memo in the form of a game.

And along with this device is a fictional 23QB quantum density floppy disk — a convenient visual for us to share this game with.

In terms of a name, we landed on "PUSH". It's fitting because it also works as an instruction—Super Fabio pushes the Threads app into place, after all.

thank you

To Spline for creating such a badass tool. I don't know any other software that allows an individual artist like myself to conceptualize, build, and ship an experience like this end-to-end.

To Rosalee and Rousseau for workshopping the idea, and the rest of Threads for play testing, reporting bugs, having the platform to discuss and develop it internally, and trusting that I can pull this off!