The Visual Design of Super Flipside

I thought it would be cool to write a deep dive specifically about the visual design of Super Flipside. Overall, I'm pretty happy with the game's final look and feel. I spent a lot of time polishing it, and I'd like to share with you some of the tricks I used.

For those who haven't been following it, Super Flipside is an iPhone game that I recently released. It's a very difficult twitch action game based around multitasking. The player is tasked with controlling two ships simultaneously with two fingers through endless waves of obstacles. There are currently three levels that can be unlocked, each with increasing difficulty. Each level introduces a new type of obstacle to the game, and different types of obstacles can be mixed and matched (so you might being dealing with a different type of obstacle on each side of the screen).

A picture's worth a thousand words, so here's a few gifs to give you an idea of what I'm talking about here:

Super Flipside gameplay

Super Flipside gameplay

Super Flipside gameplay

That said, if you're an iPhone user, I highly recommend downloading Super Flipside and tinkering with it to get a feel for the design before continuing to read this post. Gifs are great, but there's a lot of subtlety in what I'm going to be talking about; a lot of that subtlety is lost in gifs and video.

Anyway, it's totally free, so you have no excuse not to! I'll wait right here.

Download Super Flipside on the App Store


Color

I created Super Flipside using four main colors, all of which were derived from one. That color is known in code as DARK. There's a lightened version of that color named DARK_HIGHLIGHT, and then there's an inverted variant of both of those colors: LIGHT and LIGHT_SHADOW, respectively.

DARK
DARK_HIGHLIGHT
LIGHT
LIGHT_SHADOW

Why such a simple color scheme? The goal here was that I wanted to clearly differentiate the left side of the screen from the right side of the screen; after all, they are essentially two different games happening at the same time. Back when I created the original FlipSide, my thinking was: I'll separate the two sides by making them polar opposites, with one side having totally inverted colors. Black and white was too harsh looking, so I went with blue and... beige-ish.

The great part about using a very simple (read: limited) set of colors is that doing a real inversion on one half of the screen works really well. Inverted images normally have kind of an eerie quality to them. That's not the case here! Everything feels very natural. I believe this can also be attributed to the simplicity of the art (but more on that later).

The original game was very strict about its use of the inversion. It was constant, even in places like menus, sometimes splitting text and such. I was a little bit more lenient in Super Flipside, allowing some elements to go un-inverted. I'm happy with this choice, since it allows for better readability and usability in non-gameplay areas.

The really great part about doing the color inversion in code was that I only needed to create one set of assets to achieve the effect I wanted. In reality, I created all of the assets using the colors shown on the left side of the screen; the right side is inverted. Another benefit of doing it in code was that some effects can "spill over" from one side to the other, and it looks pretty cool. Notice the explosion below:

Explosion spilling over into the other side

Art and animation

Super Flipside uses a mix of handmade pixel art and vector art generated in code. I think this was partially due to some initial indecision on my part. A lot of the art was very simple, so it could easily be created in code. However, I just love the look of pixel art! Late-ish in development, I ended up pushing things further toward the pixel art side, but still using generated art where I could get away with it. I think this worked well because the art itself was so simple in the first place. Can you pick out what's made by hand and what's made in code?

The other link between the two art styles is animation. Animations in Super Flipside are bouncy, elastic, and playful. I tried to follow the Principles of Animation outlined in The Illusion of Life, which is a really fantastic book to grab if you're into this sort of stuff. Most everything (including UI components) bounces, stretches, and squashes in some way. An animation that I've dubbed "the bloop" is available to every component and is used to show and hide entities in a playful way. Sometimes this is done in code, sometimes it's done by hand. (I kind of stole this effect from Crawl, which I've never actually played but looks visually fantastic)

The Bloop

Several UI components are hooked up to a global sine wave, known as "the jiggle", so that they are not totally static; they move up and down slowly to give them a sense of life. Buttons feel rigid, but still bounce, with elastic feedback on both ends of the animation. In my opinion, they feel very satisfying to tap. Every part of the experience should be fun or delightful -- this is a game, after all.

Button animation

All of these types of animations are consistent between the pixel art and generated art. But what really sells it, in my opinion, is what I call "chunky interpolation." Let me explain. I used a generic, homebrewed system for interpolating values all over Super Flipside. It was very simple: given an easing function, interpolate a value from x to y over t seconds. I used this for everything from position changes to animations. The one problem with this was that the smooth animations it generated sometimes didn't fit very well with the lower fidelity pixel animations I had created. Pixel animations aren't always the smoothest. They can be, of course, but in this case I opted to leave a little grit in, just because there's something charming about it. So I added an option to my interpolation system to do interpolations in rigid "steps" (i.e., interpolate between 0 and 100 in 10 steps over 1 second, and it'll add 10 to the value every 0.1 seconds rather than smoothly interpolating the whole time). I found that this did a great job mimicking the lower fidelity pixel animations I had made and promptly applied it liberally throughout the game. It very nicely bridged the gap between the two styles of animation I had used.

I won't even try to add a gif here since the subtlety will most certainly be lost. Instead, I'm just going to recommend that you download the game if you want to see it in action ;)

Summary and final thoughts

  • It's okay to use generated art alongside pixel art, as long as you keep both styles consistent with each other
  • Playful animations can go a long way in making your game feel alive and polished
  • Thoughtful use of color is important as well; don't just use colors willy-nilly, think about what they mean and how they fit into the overall game
  • Did I mention consistency? Consistency, consistency, consistency -- it's really key

Download Super Flipside for free

Thanks for reading this post! If you haven't already, please give Super Flipside a download from the App Store and let me know what you think. I would especially like to know what you think regarding the game's aesthetic (I know the two-color scheme isn't everyone's cup of tea). I'm very open to feedback, so please don't hesitate to reach out with your thoughts!

Download Super Flipside on the App Store