So far all
the art work (sketches and animation and line tests) was being done
normal size. These now had to be colored and adapted to the small mobile
screen.
2 things
are extremely important here. The physical size of the graphic and art
assets as well as the filesize of the assets had to be as low and
optimal as possible.
Enter Pixel Art.
 |
|
Paradox'
Van Damme Kickboxing : The Graphics
Team |
For an
onlooker not very well accquainted with it, Pixel Art is nothing short
of magic. Even with those in the know, the cisp sharp images, their
color depth and clarity, and all this at extremely low file sizes
continues to stun and overwhelm.
Here's some illumination
for those new to this Art.
Generally there are 2 kinds of 2D
graphics, Vector and bitmap. While Vector art is mathematically
calculated and can be scaled up without loss of quality, bitmaps are
made up of a sequence of differently colored pixels. When a bitmap image
is scaled up, these pixels are interpolated to create a new image. The
addition of new pixels which are the result of an approximate
caluclation results in loss of sharpness.
|
Pixel Art
Sample |
 |
|
|
Pixel Art is
created by painting pixel by pixel
See above (400
zoom) |
At Normal
Size
(100 ) |
 |
|
An artist
creating pixel art using a tablet, quicker way but needs more
experience |
The pixels
in a bitmap show up when zoomed in at high magnification. Bitmaps just
like Pixel art are made up of Pixel patterns and sequences. There is
however one difference in the sense that most bitmaps are anti aliased
so as to give a smooth look. Pixel art is aliased, and sharp. The
sharpness helps it look clear and well defined even at extremely low
sizes on the tiny mobile screen.
A
substantial amount of graphics and characters on a mobile game are Pixel
Art. It is created by painting one pixel at a time while keeping the
reference image open in the same software for e.g Macromedia Fireworks
or Adobe Photoshop. Pixel Artists sometimes also use digital ink and
paint tablets to create their graphics, this proves a quicker way but
needs more experience.
 |
To the left
is an antialiased image of Van Damme and to the right is pixel art
created from the same image.
(Note the sharpness and
pixel edges in the pixel art. Also note the smooth color flow in
the anti aliased image on the left) |
 |
All images created in pixel art are images with indexed
colorColors specific to that document only. Used to minimize file
size and electronic transfer times. and help in keeping
the filesize low.
 |
|
Alternate
pixels of high contrast values to create an illusion of added
color depth. |
For Van
Damme Kickboxing, the pixel artists took over and reated some
extremely stunning looking sequences. They also used some tricks to
create the illusion of enhanced color depth by using a technique called
Alternate pixels where in alternate pixels of two different colours
create an illusion of the third colour. This technique is quite unique
and helps in reduction of file size.
 |
For Van
Damme Kickboxing itself, the technique was used mainly to give
depth wherever required, create shadows of objects and create backgrounds
like rocks, fire, clouds etc. Though a maximum of four colours were
used per object, the technique helped get the desired effect and
textures that completely enhanced the look and feel of the game.
Pixel Art does not stop at creating still images, the entire reference
animation in the game was created by running frames of pixel art
in a loop. The pixel artists redraw all the hand drawn animation
sketches and color them pixel by pixel to create the animated moves.
The pixel artist's work does not stop at this stage. Further into
the developement life cycle of the game, when it reaches the testing
and porting stage, the pixel artists have to recreate backgrounds
and also re do the color callibration to match specific devices.
This is a generic activity to all mobile game development and was
the case for Van Damme Kickboxing too.
Some of the Animation samples - along with
the static frames to show the keys.
