E-mail:

Pixel Effects

For the past few years, I’ve been bringing home the bacon thanks to my work in visual effects. I’ve been working primarily with high end visual effects packages such as Houdini and Maya, and have been mostly performing lengthy sims, intense geometry manipulation, and shader writing to get those pretty images up on screen. You’d expect that working on a pixel-art game, I’d be leaving the high-end packages alone, right?

 

Turns out that’s not completely the case!  As fate would have it, I managed to win a copy of Houdini Escape back in 2011, and so have the luxury of keeping that tool at my disposal whilst working on Super Hematoma. Unfortuantely, the Escape version of Houdini doesn’t include the full range of simulation tools that it’s bigger brother, Master, uses… but that hasn’t kept me from finding a few ways to make use of it with our game dev.

 

I’ve only done a handful of the effects so far for Super Hematoma, but here’s a quick look at some of what I’ve been doing.

 

“Traditional” Pixel Art

I’ve been using a combination of Photoshop and Aseprite for the frame-by-frame, hand-painted pixel-art.  This is more like doing classical animation, and is a little more like how things would be done traditionally with pixel-art. Essentially you just draw stuff, and move to the next key frame, and draw it again… once you have your keys, you go on and do in-betweens to smooth stuff out. It’s how I’ve been doing all the character animation, and it’s how I’m doing a lot of the effects in the game. I like Aseprite for doing the character animation cycles… but I’ve actually been using Photoshop for weapons as it’s a little friendlier when doing mock-ups of size/color in relation to the environment and existing character work.

The garbage bag, and milk crate above, are examples of weapon animations. Weapons will all have different behaviours. When the trashbag is thrown, I want it to always land upright… and so I want the contents to shift slightly when it lands to give it less of a rigid look. Matt will have to choose how to cycle through the frames depending on which direction it’s thrown in, but the idea is it will land, the top will be following through from the the direction it was thrown, it will overshoot, and then settle.  The milk crate on the other hand will have more of a rigid look and so will tumble end over end both upon landing and when it’s in the air after being thrown. With such a simple object, I could have done this with 3D… but given the palette restrictions, and the simplicity of the movement I like to think that it was easier to get this iconic thing to look exactly how I wanted by hand.

We’ve also got other, more organic effects going on, like that splash. In our Oil Sands level, when characters jump into or out of the oil (and presumably when items land in it as well) there should be splashes. It’s liquid after all. Getting a great splash is something that is a huge pain to get right when going for realism in a movie, but it’s something that I was able to whip out much faster in this traditional style. Something like this doesn’t make much sense for me to waste the time doing in 3D for the style that we’re going for. Likely I’ll be doing lots of fire traditionally too.

 

“Non-Traditional” Pixel Art

As I said at the beginning of the post, when I’m not doing things meticulously frame-by frame, I try to make my life easier on myself.

With this tire for example, we decided to give it a print that says “Super Hematoma” so that we can help indicate that it’s rolling when it’s rolling. That was easy enough to do in Photoshop, however when the tire stops rolling and falls over, I wanted it to have the same sort of tumble that a tire would have after bouncing off a wall that it’s rolled into. This means it’s got some rotation through 3D space that could have been easy enough without the yellow text, but with the text would require too much fussing to get right doing it by hand. So that’s where Houdini comes in.

 

Projecting the painting of the tire onto a rough model, and then animating *that* allows for much easier revision of motion if I don’t like what we have. I haven’t yet seen how it acts in our game engine, so it may go through some refinement yet, but it’s comforting to know that this is something that will take only a few minutes to correct when that time comes.

 

The metal plate in the background of our menu screen? Also Houdini. Primarily because of the ease of refining the pattern to be what I wanted. Houdini’s got a great procedural system to it that makes modelling of stuff like that a snap. It’s also come in handy for me with trying to get wave-motion in the oil sands.

Secondary to that above mentioned splash, is the idea that we wanted some sort of a wake to happen immediately next to the character with they’re just standing still, or walking. I spent a little while trying to do that by hand… but getting something that was subtle enough for my liking was actually kind of tricky by hand. Aseprite doesn’t seem to have good tools for that unless I just hand-paint it each frame, and I couldn’t seem to find a way to get any sort of deformations in Graphics Gale or Pro Motion either. Photoshop wasn’t particularly being friendly with me either. So I turned to Houdini.

It’s great what painting a little camera projected texture on a noisy grid can accomplish. And it’s the same technique that I used to generate the overall motion for the oil in the level.