Thursday, September 03, 2009

Titanic Kungfubot Offensive: Behind The Scenes Ep.1

As most of you know, I work at Cartoon Network. More specifically, I work in the "Cartoon Network Digital Media Games Studio." (A bit of a mouth full I know.) My role as the Art Director allows me to work on pretty much every game that comes through the door in some capacity. Since most of our games here are tied in to shows that air on our network, I also get to work with some fantastic characters and story set ups. Yeah, I do have a cool job.

Today I thought I would give you a little "behind the scenes" look at how our latest game, "Cartoon Network TKO: Titanic Kungfubot Offensive" came to be. We are all very proud of this game, and for a small internal studio like ours, it was a big accomplishment. Our goal was to create a legitimate online multiplayer fighting game that looked good... in Flash. Of course we wanted to be sure we put some of Cartoon Network's coolest characters in the game, but that in itself posed a few issues.

First issue: Size relationships. While it is true that many fighting games have characters that vary greatly in size, we were faced with a production timeline that did not allow us the luxury of custom animations and hit boxes that were unique to every character. Also, having a giant alien from the Ben10 series punch tiny Flapjack in the face was not extremely appealing to the team. (Ok, it was to some of us, but only because we laugh at silly things.)

Now, if anyone knows me, they are aware that I like robots. I really like robots. So as the team sat down to brainstorm the visual approach for the game, I was already thinking of ways to include some mechanical goodness. Andy Makely, who is the lead programmer on the game, first mentioned robots as an option in a casual conversation we had in the hallway. Soon after that I sat down with the Senior Animator on my team, Noel Saabye, and robots were discussed as a real possibility. We figured that robots could take a few hits to the chin without getting "beat up", and if we did it correctly, our characters would look super cool as hulking metal giants.

My next task was to convince people that it could (should) be done. I drew the sketches above to show what a few of our characters might look like in mechanized form. (If you notice, "Goop" from the Ben10 animated series was considered, but later eliminated because of transparency issues.) This got the ball rolling, and set into motion the project that would become TKO!

One of the major issues that we faced as a team, was how to create all of the animation that this game would require. Anybody who has played a traditionally animated fighting game knows that the number of drawings needed to include multiple moves for multiple fighters is pretty insane. With such a small team and short production cycle, that wasn't going to be possible. And the fact that our team was set up to develop mostly 2D Flash games, the option of creating 3D assets seemed like a rather lofty goal.

Maria Vito, a contract artist here in the studio, just so happened to have studied Computer Animation in school. She was familiar with the 3d animation program Maya, and after looking at the drawings let us know that she could model the robots for us. It turns out we didn't have Maya in the studio (2D traditional animation team, using Flash) so she used the Blender program instead. I have to take a moment here to give Maria some serious kudos. Not only did she throw herself into this task, but she did it while teaching herself a completely new program. Working off of my crude drawings, she modeled, rigged, and textured every character in the game. Ok, I am jumping ahead of myself...

So with our new 3D assets, we set out to find a workable way to set up the game. We still needed to build the game in Flash. What we decided to ultimately do was model the robots, skin them with the character designs, animate them as frames in Blender, export the frames as .png files, import those .png files into flash on a timeline. Bam. There you have it. Simple!

While the characters were being modeled, our animator Noel was roughing out all of the moves needed for the game. (The above sheet shows SOME of the moves needed...) His rough animations were used by Maria as a guide for her 3D work.

The art team worked very closely with our game designer Brad Merritt to make sure that each move did exactly what he wanted it to do. Brad is a crazy fighting game fan, and he knows what each move should do and why. And how quickly. And how fast it should recover. It was really fun working with Brad on a game like this because he was always able to explain the cause and effect of each move and the strategy behind the button mashing. (Below are two of the first roughs Noel did showing some of the simplest moves.)
While all of the modeling and animating fun was going on, I continued to design the characters in the game. Above are a few of the early character designs based on current shows.

I also worked with Maria to transfer the designs over as textures onto the models. Textures always make me chuckle, since in my mind they look like the character exploded in some way.

And this is what we ended up with. Cool moving robots that look like Cartoon Network characters. I think you will see if you play the game at all, that this technique worked pretty well. Thanks to a hard working team of artists, programmers, and a fightin' game designer... the kids are fighting with robots.

This is just a small chunk of what I want to show you. I hope to talk about all of the great visual effects in the game, as well as the overall design aesthetic and backgrounds.

Thanks for reading, and stay tuned!


Paul Conrad said...

Love seeing the process...congrats to you and the whole team! GREAT JOB!!! (my kids love it too) :)

Javier M. said...

This was an incredible process to view. Very, very thankful you posted this for us Jeremy! Lovin the last two western post as well! Can wait for the next process videos! I will email you soon about the imagine Fx magazine. Thanks again!- JM

aintshakespeare said...

That is wicked cool. I'm so jealous of your job.

Ok, back to writing reports for the state.


Tony C. said...

Very cool to see the entire process, and I love how you broke down each step.