At the end of November the Motion Graphics team at Zemoga got great news. We were going to develop a fighting game for COMBOS. The team was very excited but the task at hand was not an easy one. So a lot of work had to be done.
AGENCY.COM assigned us the project with 2 conditions:
1) It had to have the look and feel of an early 90’s head-to-head fighting game and it had to be lots of fun.
2) The main concept of the game was a fight between guys in their normal surroundings:
Following these criteria AGENCY.COM had brainstormed a number of different characters including: the Tailgate Zone man, the Ultimate Fun Warrior, the Grill Zone man, the Iron Chef (complete with silly apron and big grin), the Home Theater Zone man (always ready to battle as long as he doesn’t have to leave his recliner), and the Game Zone man (who will beat anyone with his gaming skills).
Since this was not the first game we produced, we already had a design process to be followed. The first step involved doing a whole lot of sketching based on the information we had on hand. Of course we first had to research a lot about the characters including their personalities, their environments, their clothing and their abilities. Fortunately, the information we were given by AGENCY.COM on the game brief was comprehensive and concise (so that made our research job a lot easier).
With this information in our heads, the team grabbed our pencils, tablets and computers and began the long process of sketching out all of the ideas we had for our characters. We divided the job up amongst our creative team and each of us had to develop one of the characters. At the end of the day, we had close to 1000 sketches. Of course, we had to narrow them down to 8 final choices for the client’s presentation!
It actually took us one or two rounds of revisions, to get the right look and feel for the final characters. At first, we thought the characters could all be chubby and funny looking. But the client told us that the whole idea of the fighting game was to be able to select characters that were in shape and looked like real battle zone warriors. So changes were made. We enrolled the characters in a weight loss program and the final result met all the client’s expectations.
After this first approval, the process went very smoothly. We got the color and final look and feel of the characters on our first attempt so the next step was to draw the characters in the positions that were needed for the interface (character avatar, character select, win and lose). This was really fun for our designers since it let us work with Alias Sketchbook Pro (which is our weapon of choice for digital drawing). This software has a lot of features that made our work easier. One example of this was the ability to make our own brush, so everything could look like it was done in pen and ink even though it was actually being created digitally.
The coloring process was entirely done in Photoshop. Colors were applied as layers of solid colors, so apart from selecting the right tones; it was a relatively simple process.
After all of this was out of the way, the core of the project was at hand. So we had to buckle down and start working really hard. The scope of the project involved a short response time, so for the game to be really good, great animation had to be created.
We began by looking at the actual 90’s games, observing and analyzing the way the classic characters from King of Fighters, Street Fighter or even Metal Slug worked. How they did those amazing sprites become the games we all fondly remembered? Since we had to make this game as close as we could to those games, we tried to complete the same design process as those 90’s game creators did. Each one of us worked at becoming our own characters, trying to think as them, and trying to guess what choices they could make at the time of a fight. What weapons would they chose and what special powers they could call up when they needed a great defense or attack?
Finally, we had all the sprites we thought made up all of the characters moves and personality. While we waited for the client’s approval, we worked on the background (which played a special part on the whole game experience since there was only going to be one background). We chose the backyard because it was a common environment for the four icons that had been selected and we could decorate it with things typical of each character.
AGENCY.COM’s approval came earlier than we expected so we quickly completed our work on the background and got to work on the actual character animation. For this part of the process, our team member, Freddy Fula, suggested that we use the TVPaint software, which is used for TV animation mostly in France and Canada. This software can export any kind of image format. This worked very well with our project needs since we had come to the conclusion that we were going to make the whole animation and then put it through a Photoshop batch in order to get the pixel 90’s retro game look and feel.
Once we began work on the animation we discovered a lot of the cool tools TVPaint has. Since it’s a program made specifically for animators, the tools and interface and the whole interactive experience are very close to work on a real animation table. You can use any kind of brush, a light table, and you can even rotate the whole workspace. Even for the coloring process this software has it’s advantages. It recognizes very well the coloring zones, you can have a guide layer for coloring, and you can select zones and decide whether you want them to be a light or a shadow zone. It really accelerates the animation process. This was very handy for us since our delivery date was looming and we still had to integrate the animation work with the efforts of our Flash programming team.
Once we finished all of the sprites, we had to put them through Photoshop to make them look like pixel art. We looked at different ways to achieve this effect and we decided that a simple mosaic and sharpen filter was enough. Once the sprites had the filter applied to them we compressed them in Fireworks. This made the final Flash movie a little lighter and sped up the load time (in our past Flash animation work we had discovered that waiting time for the user was a big issue when we had done our usability tests).
While we were completing the animation process, the design team had used all of our illustrations to make the game composition. Their work looked great so we handed over final portion of the project to our User Interface team (who ensured that navigation and game play were optimized).
We delivered the project on time and all the key stakeholders were happy with the results. The client was excited and they integrated our game with a huge sweepstakes campaign they currently have running on the internet, You can visit http://manzone.combos.com/thegame.aspx to play the game and see how the final result turned out. We were really happy with the final product and we are reviewing the whole design process to improve it even further. When the time comes, we hope to make an even better game than this cool project. A project that gave us a lot of work but most importantly, a bunch of fun.