[JAVA][Beginning Java 8 Games Development]

Chapter 5 ■ An Introduction to Game Design: Concepts, Multimedia, and Using Scene Builder
It is important to note that the JavaFX engine will antialias 2D shapes and 3D objects against all background
colors and background imagery, using the Java2D software renderer or the hardware rendered with the Prism
engine, which can use OpenGL or DirectX. You will still be responsible for correctly compositing, that is, providing
antialiasing for your multilayered imagery, using each image’s alpha channel.
Digital Image Optimization: Using Compression, Indexed Color, and Dithering
There are a number of factors that affect digital image compression and some basic techniques that you can use to
achieve a better-quality result with a smaller data footprint. This is a primary objective in optimized digital imagery;
obtaining the smallest possible data footprint for your application (in this case, a game), while achieving the highest
quality visual result. Let’s start with the aspects that most significantly affect data footprint and examine how each of
these contributes to data footprint optimization for any given digital image. Interestingly, their order of significance is
similar to the order in which I have presented the digital imaging concepts thus far.
The most critical contributor to a resulting digital image asset file size is what I like to call the data footprint,
which is the number of pixels, or resolution of, a digital image. This is logical, because each of the pixels needs to be
stored, along with the color and alpha values that are contained in their three (24 bit) or four (32 bit) channels. The
smaller you can get your resolution, while still having the image look sharp, the smaller the resulting file size will be.
Raw (or uncompressed) image size is calculated by width × height × 3 for 24-bit RBG images, and
width × height × 4 for 32-bit ARGB images. For instance, an uncompressed, truecolor, 24-bit VGA image will have
640 × 480 × 3, equaling 921,600B of original (raw), uncompressed digital image data. To determine the number of
kilobytes in this raw VGA image, you would divide as follows: 921,600 ÷ 1,024, the number of bytes that are in a
kilobyte, giving you an even 900KB of data in a truecolor VGA image.
It is important to optimize for raw (uncompressed) image size by optimizing your digital imagery resolution.
This is because once an image is decompressed out of a game application file, into system memory, this is the amount
of memory that it is going to occupy, as the image will be stored pixel for pixel, using a 24-bit (RGB) or 32-bit (ARGB)
representation in memory. This is one of the reasons I use PNG24 and PNG32 for my game development, not indexed
color (GIF or PNG8); if the OS is going to transmute the color to a 24-bit color space, then you should use that 24-bit
color space for quality reasons and deal with (accept) a slightly larger application file size.
Image color depth is the next most critical contributor to the data footprint of a compressed image, because the
number of pixels in the image is multiplied by 1 (8 bit), 2 (16 bit), 3 (24 bit), or 4 (32 bit) color data channels. This small
file size is the reason 8-bit indexed color images are still widely used, especially with the GIF image format.
Indexed color images can simulate truecolor images if the colors that are used to make up the image do not vary
too widely. Indexed color imagery uses only 8 bits of data (256 colors) to define the image pixel color, using a palette
of up to 256 optimally selected colors, instead of 3 RGB color channels or 4 ARGB color channels, containing 256
levels of color each. Again, it is important to note that once you turn a 24-bit image into an 8-bit image by compressing
it using a GIF or PNG8 codec, you only have a potential (maximum) 256 of the original 16,777,216 colors at your
disposal. This is why I am advocating using PNG24 or PNG32 imagery rather than GIF or PNG1 (2 color),
PNG2 (4 color), PNG4 (16 color), or PNG8 (256 color) images, which JavaFX also supports.
Depending on how many colors are employed in any given 24-bit source image, using 256 colors to represent an
image originally containing 16,777,216 colors can cause an effect called banding. This is when the transfer between
adjoining colors in the resulting (from compression) 256- (or less) color palette is not gradual and thus does not appear
to be a smooth color gradient. Indexed color images have an option to correct visually for banding, called dithering.
Dithering is an algorithmic process of making dot patterns along the edges between any adjoining colors within
an image to trick the eye into seeing a third color. Dithering will give you a maximum perceptual number of colors
(of 65,536; 256 × 256), but this will only occur if each of those 256 colors borders on each of the other 256 colors. Still,
you can see the potential for creating additional colors, and you would be amazed at the result that indexed color
formats can achieve in some compression scenarios (with certain imagery).
Let’s take a truecolor image, such as the one shown in Figure 5-3, and save it as a PNG5 indexed color image
format, to show you this dithering effect. It is important to note that PNG5, although supported in Android and HTML5,
is not supported in JavaFX, so if you do this exercise yourself, select the 2-, 4-, 16-, or 256-color option! The figure
demonstrates the dithering effect on the driver-side rear fender in an Audi 3D image, as it contains a gray gradient.
www.it-ebooks.info
111