Monday, July 30, 2012

TDK Batman What-If Video: Behind the Scenes

Okay! Welcome to the Batman TDK Video Behind the Scenes! For the sake of my sanity, I won't be explaining the terms "modeling", "texturing", etc. so please go to this link for the post where I explain them.

Okay, so first on my agenda was creating Batman's enemies, the Joker Goons!

The New Characters

I wasn't working off the Dark Knight movie this time, I was afraid that by typing in "Joker clowns" into Google I would get some frightening images, so I just imported the usual character body, modified it, modeled a face with a mask on it, modeled the hands and rigged the whole thing.

Rigging, (I'm not sure if I explained this before), is a process where you bind a "skeleton" to the model. By moving "joints" on the "skeleton", you make the model move, for animation. In the above picture, those white lines on the model are the skeleton.

For when the clowns get knocked around by Batman, I painted another face that I could swap with the other one. Cheetah3D is a bit tricky in terms of swapping textures. What I actually did was hide one texture, which showed the alternate one beneath it.

The Environment

To create the "mission stage" in the video was way trickier then it looks onscreen. First of all, I had to create all of the environment from scratch, since there is no "Gotham City" mission.
I also had to create my own textures. 

I experimented with many different ways to make the stone texture.

An experiment I conducted to find out how to create the texture of the stones.

Many details were put into the video that would never be noticed. For instance, the Jokerized Batman statue in the spirit of Loki painting mustaches on Thor...

I spent an unfortunate amount of time on making a bumpmap, (an illusion on a texture that makes it look like certain areas of the texture are raised), for the eyes, but opted against it in the end because they were barely noticeable.


The entire scene was both an animator's delight and nightmare. It was a relatively fun battle scene, but at the same time it was full of reactions, (Batman leaping, the Batpod crashing into a goon, etc.), and tricky poses. The way I animate is a three step process. First, I move the characters folder the way I want the character to move. Red Hood will demonstrate.

Then, I animate the legs, making sure they are timed correctly with walking speed, that they crouch before they jump, etc. This is the hardest part of animation.

Finally comes the fun part, animating the rest of the model, making sure all that the hands, arms, torso, waist, neck head and shoulders are all in sync.

In-Game Interface

Now, when you're playing the real Super Hero Squad Online, when you click on a target, a blue targeting icon appears under it. You can't imagine what a nightmare this was. First of all, it's a plane with a transparency keyed texture, (a texture where some parts of it are invisible, and others are visible),  which created some problems with shadows in Cheetah3D when I first tried to get it to work. Second, there's a darker colored second target underneath the first one, which, again caused a few shadow problems. In the end, I figured out how to get the render settings to work and it was fine.


The Heads-Up Display are all the elements of the game that are on a separate layer from the gameplay. Things like stats, buttons, or Hero Up! icons.

In the missions, there is an HUD that shows your health, how many stars you currently have, the medal, the Hero Up icon, and the intro to the missions. I had to recreate most of them, (except the Hero Up icon, which doesn't need to be seen in the video). Whenever I could, I tried to copy and paste from the actual game. This of course, required a great amount of tweaking to get everything perfectly placed on a bluescreen background. Some elements I traced, like the stars or the health bar. It's not completely perfect, but I figured nobody would have another window open in their browser with a picture of the real HUD elements, checking my work. Another factor was in that the video wasn't going to be too high quality. One element that was outstandingly tricky to recreate was the medal. I think I ended up having to trace it and then use the stroke tool in Photoshop to make a white line around it, like in it was in the game. For my name up in the top left corner, I actually just copied it over from the image I was working off of. 

By the way, sorry about the watermark, but the amount of time it took for me to replicate all the elements was too great to let somebody snag them and take all the credit. :P

The Final Shot

I was using the Red Hulk video vignette as my template. At the end of each vignette, the character is shown striking a pose. I ended up painting out Red Hulk in a screenshot of the video I took.

After I painted out Rulk, it was a simple matter of animating Batman. You'll notice, (if you look closely at the gigantic image of Batman about to throw his batarang above the image above this text), that I paid such attention to detail that the Hero token in the background has Batman's face on it.

Again, apologies for the watermark.


Ahem! So that ends my Behind the Scenes of my TDK Batman What-If video! See the final video below!

AND... vote on whether you want to see a Behind the Scenes video for this!

The video would show a wireframe version of the video, then a breakdown of the textures on the environment, and a close up view of the animation, rendered without the anti-aliasing, (the anti-aliasing is what gives the models those rough edges you see in video games)!

As for the old poll, you guys were mostly correct, the most traffic to this site comes from the TDK Batman video and the Time Hound Times link! In fact, if you type "SHSO Batman" into Google Images, you come up with images of the TDK Batman post!

Anyway, the next What-If, Playable Villains, (which is so awesome I can't wait), is in the works.

The post will feature...

• The Spiderman villain Hobgoblin in the game!
• The Spiderman villain Carnage in the game!

Expect more villains to show up in-game soon! :D
-- SHSOFan.