Making of Mighty Fist (part 1)

It all starts with an idea. For Mighty Fist, this idea consisted of running through a town full of thugs and beating them to the ground. (Really quite original, I know.) The process of bringing that idea to a playable game may be much simpler than you might have thought.



About a month prior to GDC we had a meeting to come up with ideas for a TGB demo project. When Joe suggested Mighty Fist, it was not much more than a thought. So what's the next logical step after a simple thought? Pixel shaders? Cutscenes? Lunch break? or is it just something that looks more like a simple doodle?

If you answered 'simple doodle' you were correct. (Answering 'lunch break' will be accepted as half credit.) This is one of the first of Joe's Mighty Fist doodles.

Working on Mighty Fist solidified in my mind that the doodling stage is extremely important. Doodling or thumbnailing is the first link in the bridge between an idea and a full blown art style. You can feel around for where you'd like to go with the project without spending too much time and with no expectation that it has to be some polished stellar art work.

I want to stress the importance of doodling. Good design is all about iteration. The more you iterate, the more the idea becomes refined. With doodling, you can iterate through 20 possible designs in the course of a meeting. You can share the iteration process immediately with others on the team. -joe


Prior to interning at GG, my art process could have been broken down to: 'Come up with an idea and go straight into production.' This mentality ended up with many failed attempts to create finalized polished art, because I lacked any sort of base doodling or refining iteration stages in my process. This was a lesson that I had learned, and for me, it was more a matter of swallowing my pride and not trying to make every sketch perfectly rendered and shaded. Ironically, making more entirely unimpressive doodles will help you refine the idea to a point that the final work will benefit from. I want to point this out, so that you will not downplay the importance of making quick cheesy drawings before attempting a finalized art style.










This sheet
shows some
of Joe's
doodles as
he was
explaining the
process for
refining the
look. You can
see how he
was explaining
iterations of
mouth
placement,
object scale,
and primitive
shapes for
body types.

The above doodle was me demonstrating to Eric the idea that if you stick to simple geometric shapes, you can distort them wildly, move important landmarks of the shape, and then share the proportional distribution between shapes to keep the art consistent between all assets. Again, this is quick doodling. I did these whilst sitting and talking to Eric, time spent, less than a minute. -joe

After discussing what the character might be like (a little scrapper in gym shorts) I took a shot iterating faces and body types.

When we had a better idea of where the character design was going, it was time to get started on the enemy characters. What type of feeling did we want to get across? Was our hero going to be Superman, or would it be more like a case of David vs Goliath? More doodling ensued.










Another cool
thing about
quick doodling
is that it can
be done as
the discussion
is underway.
Joe doodled
these images
as we discussed
the idea of a big
boxer boss or
angry dogs on
the street.

I continued the iteration of enemy characters from there and made a few doodles of my own.

(seriously, who better to pound to the ground than a thug with a wiffle-bat?)


Joe hooked me up with some sweet gear to start the animating process. The Video
LunchBox was a very useful tool in previewing my animations on paper. This is
the part were we bust out a ream of paper and assault it with a pencil.


We got this thing set up and I spent the next few weeks reading animation books
and drawing my first animation frames.


Notice the pack of pencils and ream of paper. I wasn't kidding, there's some
serious pen-paper warfare about to break loose.

Back in the day, when I was single and had a lot of free time (before I
had kids), I acquired a bunch of neat art toys. The toys include the video lunch
box (animation frame grabber), small portable color CCD camera (ebay).. a camera
stand, an animation table with an animation disc (that come with a long story
and a history of spending time at filmation and hanna barbera).. and an animation
paper punch. It was cool to get these things out of my back office and lend
them to Eric so he could learn to animate with the toys the big boys use. It
made for quite a scene in the weeks leading up to the GDC, as the office took
on the air of a big time art studio. - joe


Something that I've always found to be true with art, the more I do, the more
I realize that there is so much more to learn. This was the case with animation.
After my first few animations I went back to the books and sketched more study
sheets like these:







After about
two weeks of
reading,
sketching, playing
with my own
animations, and
refining the
characters, I was
a bit more
comfortable with
the process and
ready to start on
the animations
that would
hopefully make
it into game.

Once I had drawn the
individual frames by hand,
I previewed them on the
LunchBox. If I was pleased
with the results, I could
scan them into photoshop
and set them up for use in
TGB. For the majority of the
time that we had a working
build, the characters were
running around looking
exactly like this.

Joe let me barrow his drawing table with the super-cool light on it. This is where I drew the animation frames.
The registered paper (that means it has the super-cool hole punches) insured that the drawings would be
aligned the same. Not to mention the angle of the table was much more comfortable than having my head
down to my desk.

After the animations were started, Joe and I discussed the direction we wanted to take with the world art.
Joe drew more doodles. I watched. It was fun.




when sitting in meetings, I bring
my sketchbook to doodle. The above
doodle was me trying to solve the
problem of what to put in the
midground space. We wanted to
show off layering and parallax, so I
had to come up with stuff that would
be found between buildings in a city.
We came up with chain link fences
with parking lots, playgrounds, and
loading docks, and this would allow
us to have gaps between the
buildings and show off the
background. -joe

















Joe had me draw a mockup of what the scene should look like in game. There were a few reasons for doing this. We wanted to get a clearer idea of the game across to anyone else who would be working on the project. Another reason was to pull the image into photoshop and get a feel for the scale we wanted.













Designing the color scheme was the next step. Featured below are two beautiful pictures of yours' truly
tweaking colors in his natural habitat.





Joe threw together some interesting color schemes as well. At one point in history, if you were to walk past
Joe's desk you would have seen something exactly like the image below. We were fortunate enough to
capture this historically accurate photograph. Enjoy:


the above image shows off 3 views of two possible extremes of the color
scheme. I wanted to see how well the scene 'read' in full screen, in a 'mid'
configuration (the view that would be seen when someone was viewing the monitor
from a distance, say, walking by a booth at a trade show, and a small one for
a thumbnail that would be on a website to point people to the download. -joe

Putting together a gamut like the one below is very useful in nailing down the color scheme that you want for
your project. Give the image a click for a larger shot.



The color scheming was nearing an end as the bulk of animations were ready to get scanned in and
previewed in TGB. You can see from the image below how I had set up guides for the ground, cell
separations, and cell centers. If you look at the actions panel in the bottom right, you might be able
to read "AnimScan", an action I wrote to quickly scale, grayscale, and make a selection around the
sketch with one click. This made the process of pulling in hand drawn animation frames much faster.
You may also notice a little room in front of the player which allowed for a more dramatic punch
animation. The reasoning behind the punch animation is that this game is about punching.

This was one of the most exciting parts of the project, as all the work that I had done to learn animation and the time that was seamingly wasted on unused animations finally brought forth fruit as all of the characters were animated in game if only in pen and ink:

Continue to Part 2