Chapter 2 ■ an IntroduCtIon to Content CreatIon: 2d new MedIa asset FundaMentalscreating 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 true-color image, such as the one that is shown in Figure 2-4, 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 PNG1 (2),
PNG2 (4), PNG4 (16), or full PNG8 (256) color options!
We will take a look at the dithering effect on the driver-side rear fender on the Audi 3D image because
it contains a gray gradient to which we will apply this dithering effect. You can see the 24-bit source digital
imagery in Figure 2-4.
It is interesting to note that it is permissible to use less than the 256 maximum colors that can be
used for an 8-bit indexed color image. This is often done to further reduce the imagery’s data footprint. For
instance, an image that can attain good results by using only 32 colors is actually a 5-bit image and would
technically be called a PNG5, even though the format itself is generally called PNG8 for the indexed color
usage level. Remember that JavaFX supports only PNG4 (16 colors) or PNG8 (256 colors), so for this image in
a Java game, you would use PNG8, or 256 colors.
I will set this indexed color PNG5 image, shown in Figure 2-5, to use 5-bit color (32 colors) using
Photoshop so that you can see this dithering effect clearly. As you can see, in the Photoshop image preview
area on the left side of Figure 5-4, the dithering algorithm creates dot patterns between adjacent colors in
order to create additional colors.
Figure 2-4. This is a true-color PNG24 image created with Autodesk 3ds Max that we are going to compress as
PNG5