Mighty Morphin'

Since Fantastic Jack takes place in the intersection between reality and fantasy, we've been focusing on developing a style for visually blending between the two. A few weeks ago I explained how we plan to blend between different sky backgrounds. It turns out that our sky backgrounds are particularly conducive for this sort of thing, since they're so amorphous. Simply crossfading between two painted skies accomplishes most of what we need, although we will eventually add movement, like the clouds drifting or the sun and moon rising and setting.

However, our game also has vehicles, like the bicycle that becomes a snowmobile on the icy tundra, as you may remember from our initial announcement. While similar in terms of their structure--both have handlebars and seats, as well as two points of contact with the ground--these particular vehicle variations have distinctly different silhouettes. Crossfading would not be sufficient, so I decided to try morphing!

Morphing between two images is a combination of crossfading while distorting the shapes of both images. The objective is to match up similar features in both images so that they end up overlapping even if they were originally in different places.

The first step is to manually add control points on top of both images, where each point on one image corresponds to one point on the other image. Then all we would need to do is run the automatic morphing algorithm! Unfortunately, however, we didn't have a morphing algorithm already in our toolbox, so for us the second step was writing it.

The algorithm needs to generate two displacement fields, one for each image. When an image is fully faded in, it doesn't need to use the displacement, but the more it fades out, the stronger the displacement needs to be. So, after it's fully faded out, the initial image would take roughly the shape of the other image. This displacement field should actually be generated for the fully-faded-out condition. In other words, given a target point on the second image, how far away are the source pixels that we sample from the first image? We also need to smoothly blend the displacement in between the control points. This smooth blending is the hard part.

To generate a smooth displacement field, we start by iterating over every pixel. To mix the influences of the control points that are nearest to this pixel, we need to compute a kind of weighted average. So for each pixel, we iterate over every pair of control points, and for each pair of control points, we subtract the target point from the source point to obtain this pair's displacement offset. Next, to figure out the weight of this pair's influence, we compute the distance from this pixel to the target point. I picked the formula 1/distance^2 to convert this distance to a weight value, and then I add this to a sum of the weight values for all control points, and I also sum all of the displacement offsets multiplied by their weight values. Finally, I divide the offset sum by the weight sum to get the blended displacement offset for this pixel. In pseudocode, the algorithm looks like this:

Vector2 pixelPos = ( pixelX, pixelY )
Vector2 displacementSum = ( 0, 0 )
float weightSum = 0
for each pair (Vector2 sourcePoint, Vector2 targetPoint) from controlPoints:
Vector2 pointDisplacement = sourcePoint - targetPoint
float distance = length( targetPoint - pixelPos )
float weight = 1 / ( distance * distance )
weightSum += weight
displacementSum += pointDisplacement * weight
Vector2 finalDisplacement = displacementSum / weightSum;

If we display the displacement fields generated by this algorithm using red to indicate x-axis offsets and green to indicate y-axis offsets, we end up with this abstract art:

On the other hand, if we skip the crossfading and just apply the displacement to the source images, we get this Dalí-esque surrealism:

Combining the displacement and the crossfade together, we get this cute little animation:

There's definitely a lot of work left to do to clean this up, but I'm pretty happy with my first attempt at morphing, and this technique will surely be useful to us.


Love and Games

Happy Valentine's Day!

Today we're celebrating our fourth anniversary, so we'll keep this brief, but we’d like to share a bit more of the story of how we started working together. After all, our new year's resolution was to talk about ourselves!

We met at the 48-hour 2011 Global Game Jam: John went to make a game, and Ashley went to find a story.

John's team seemed the most interesting, so she decided to follow them. They formed an idea about a boy who makes girls fall in love with him, but then runs away from them when he falls in love with the next girl. Ashley was sitting back, observing, when suddenly they turned to her and asked for her feedback. Next thing she knew, she was right in the center of it all, brainstorming with them ideas for the character design, in-game items and so on. The following day she came back and saw her name was in the credits, making her an official member of the team. After the jam, John added gender selection and same-sex relationships to the game, sparking ongoing conversation and friendship with Ashley.

We officially started dating on Valentine's Day, and soon the two of us started making games together. As other developers might be able to predict, our first project was full of lessons on what not to do, and had to be put on hiatus. Fortunately, we didn't give up! We made Blockage at the 2012 Global Game Jam, and soon after that we made Molydeuxsa at the Molyjam, cementing our passion for developing games together. Inspired by the collaborative nature of game development, and with John's guidance and support, Ashley decided to make it her career.

Aside from Adorkable Games, John has a full-time job at thatgamecompany and Ashley coordinates events for IGDA LA--and we both have industry-related side projects--so we're still finding our work-love balance. Last year we managed to publish Two-Faced, our first commercial game for iOS and Android, after a two-year development process, and realized that we needed to set goals to make steady progress. Committing to #screenshotsaturday has definitely helped us stay focused on making games together. 

Some weeks, however, love takes priority over work.

Architecture? For sure!

We're all shaped by our experiences: where we grew up and what we've gone through, who we've known and when we lived.

So I've thought a lot about the negative experiences that initially inspired me to make Fantastic Jack, but that's for another post. Lately I've been thinking about something positive, something that influenced me profoundly in my childhood: architecture.

It all started with a Google search for reference photos of some of the distinct buildings that populated my childhood. Somehow it became a Googie search.

'Cause I’m, like, totally a Valley Girl.

As a kid I loved shopping with my mom at the Sherman Oaks Galleria. That's where, bizarrely enough, I discovered my love of architecture.

I was somewhere around five years old, and yet, at my favorite place in the world, I was bored. 

Father's Day was approaching, so my mom had taken me to pick out a present for my daddy. We'd gone to literally every store in the mall and I was over it. Usually I found myself fascinated by the faux columns and architectural accents of Structure, but I was tired. So, while my mom browsed, I climbed into the overstuffed leather chair near the dressing rooms.

As soon as I'd gotten settled, a large book on the coffee table caught my eye. Fallingwater. Indeed water was perpetually falling on the cover, worn and torn, lush evergreens framing a small waterfall with a modern-looking house perched above. I realized that a person--some guy named Frank Lloyd Wright--actually built a house into a waterfall. I hefted the book onto my lap and flipped past pages of essays, captivated by the photos. 

I decided I had to have this book. Unfortunately, the uncooperative sales associate insisted it wasn't for sale.

My mom promised me she'd take me straight to Crown Books in Encino to buy the book to get me to leave the Structure store. After one more glance at the book, we left.

Driving along Ventura, my mom called my daddy from the cellular in her Corvette. I heard the hesitance in her voice as she informed him of the price she'd noticed below the barcode: $55.

So we continued on to Crown Books.

My search today started with the Galleria, and proceeded via streetview down Ventura the other direction. I was looking for iconic, nostalgic buildings and signs. When I got to a carwash where Tyrone meets Beverly Glen, I stopped.

One of my last memories of my dad was a casual conversation while waiting for a carwash at the Handy J on Ventura Boulevard in summer 2005, the summer before he passed away.

I was particularly close to my dad, probably 'cause he took me to school every morning 'til I turned 16.

We'd stop on the way for breakfast: at Lamplighter--originally and now Corky's--for French toast made with cinnamon bread that I'd dip into the maple syrup I swirled with whipped butter, at Mort's for the vanilla rainbow sprinkle cookies at Bea's Bakery next door, at the newly opened Noah's Bagel at the La Reina Center for a cream cheese-slathered blueberry bagel washed down with Stash licorice tea.

I miss those mornings.

Maybe it's a tacky tribute--that is, after all, what architecture critics thought of Googie--but I'm including a remixed recreation of that carwash mashed up with Googie elements in Fantastic Jack.

I'm planning to incorporate a lot of the places we went, ordinary and otherwise, as a reminder of where I'm from, where I've been. Hopefully you'll see the La Reina Center and Lamplighter in some capacity.

I didn't end up becoming an architect in the traditional sense, but I still build: I build experiences and worlds.

Like, totally!


The Pixel's the Limit

As we've discussed before, we're trying to design a system to display transitions back and forth between real and fantastic--that is, imaginary--environments. And whatever system we choose has to fit the pixel art style of the game.

Part of this system must account for changing the sky. Recently while walking to lunch I was watching the sky, trying to figure out how to make our sky morph into different shapes while maintaining the limited color palette, when I remembered Dan Fessler's tutorial for dynamically converting regular Photoshop art into pixel art. I realized that we could adapt that technique to work in our game!

It's actually a really simple technique. Just paint a grayscale image with as much detail or softness as you want, then let the computer automatically flatten it into a few shades of gray. Afterward, you can swap those shades of gray with a custom color palette.

The tutorial focuses on how you can use this to paint images more quickly, but I had a hunch that we could use it to transition between completely different images during gameplay.

I also selected a color gradient for each image. So while the images are blending together, their color palettes blend together too.

Technically, the flattening effect removes definition from the images, arguably reducing their quality. However, I find that the borders between flat colors form interesting and aesthetically pleasing shapes. Moreover, I was pleasantly surprised to find that those shapes morph dynamically if I just let the underlying images crossfade into each other. It feels almost like cheating, and if I turned off the color flattening effect it would be pretty boring to watch images crossfade back and forth. Eventually, we probably will add more moving elements to the sky to make it even more dynamic, but for now I'm pretty happy with the effect.


On the Précipice

Précipice is as much a game as "what do we do now?" is a theme.

We've been reasonably successful at past game jams. We actually met each other at the 2011 Global Game Jam--this year marks our fourth jammiversary--and began making games together soon after. We're especially proud of Molydeuxsa, made for the 2012 MolyJam.

Though in the past taking a break from the big game we're developing was super enticing, we feel somewhat guilty about abandoning Fantastic Jack, even if only for one weekend.

Game jams are unpredictable by design, so it's not easy to follow up on a success. Milo(deux) had glitchy walking animations. And we didn't even manage to finish our game for last year's Global Game Jam, Aspen. This year, we're already making a lot more progress, although there have been plenty of distractions.

Ashley actually helped organize the event at USC for the past two years, and--just like last year--spent most of the first evening making sure that everything was going smoothly. And, of course, we wanted to catch up with all of our friends who showed up and make friends with the other cool people at the event. John waited patiently while Ashley ran around troubleshooting some issues and talking with everyone.

Though Ashley had an idea for a game right away, by the time we managed to talk to each other about it, it was late and we had run out of energy. We're getting old and need to sleep! After a slow morning, however, we made it back to the jam site and finally had a chance to get to work.

We wanted an "impressionist" style, which we think is turning out well as a game jam style. We usually use pixel art, but we wanted to try something new after concentrating on Fantastic Jack. Pixel art is often used for game jams because the style is amenable to working under time constraints, but we're finding that a somewhat fuzzy, painterly style is also surprisingly easy to pull off quickly, and it offers a fresh look that we think is pretty.

In fact, maybe we had a little too much fun with the art, spending a majority on our day establishing our look. So we only started to implement gameplay features this evening. However, this year's theme did little to help us refine our idea of what the gameplay really is. Open-ended prompts make it easy to let scope get out of control. Molydeuxsa was designed around a tweet that was very specific, constraining both the mechanic and the aesthetic of the game, which meant that we could narrow down our design quickly. Our current theme, on the other hand, leaves everything open to interpretation. We wanted to place ourselves in a situation where they would ask the thematic question, "what do we do now?" but the possible paths to get to and go from there are endless. With so much intimidating decision-making to do, we're still deciding the details of the gameplay as we go.

It's definitely going to involve backpacks.

John and Ashley