Efficient Game Graphics

From Flash MX 2004 Game Design Demystified

Choosing Vector Vs. Bitmap

• Both have places in Flash Graphics

• Vector are smaller and more scalable

• Bitmap allow for richer graphics and photographs

• Best solution is often to use both

Vector Graphics

• Vector Graphics are described as mathematical equations for points and curves.

• Image is not the actual image but a mathematical description of the image rendered on the screen at run-time. – Best for line work and graphical shapes.

Vector Graphics

• Created in tools like Freehand and Illustrator. Flash also create vector art. – File types are ,AI, .EPS and .SWF

• Graphics are resolution independent. – No matter how close you zoom in or enlarge

the image it is preserved

Advantages

• File size and flexibility

• Scale and positioning flexibility– Helpful if you are going to change the size of

your graphic while playing

Disadvantages

• Because image is recreated on the fly, it may effect performance.

Bitmap Graphics

• A description of each pixel in a file with entries for red, green, blue and alpha.

• Created with PhotoShop, Fireworks and paint programs– File types are GIF, JPEG, and PNG

Advantages

• Performance– Does not require the complex rendering of

some vector files. – It is already in the format the playback engine

creates.

• Image complexity– Photos, 3D worlds and complex backgrounds

are almost always in Bitmap.

Disadvantages

• Don’t work well if you have to zoom or rotate them.

• Files sizes can quickly get large

File Types for Flash Games

• For Bitmaps you should either use GIF, JPEG or PNG

GIF

• Indexed color

• Reduced to 256 colors maximum

• Allows for one transparent color

• Considered Lossless– If the image only has 256 or less colors

JPEG

• True 24-bit color

• Ideal for graphics from photos or gradients.

• Is a lossy format, changing the data in the file

• Bad for lines and text images

PNG

• 8 and 24 bit versions– Substitutes for GIF and JPEG

• 8-Bit is indexed like GIF, with more transparency options.

• 24-Bit is lossless with 8 bit transparency. – In Flash PNG images are compressed at

publishing using the JPEG method.

Compression

• File size is critical for web delivered games

• Flash is very efficient at delivering small files

• It is up to you to make the right choices to maximize Flashes abilities

Lossless Compression Schemes

• Do not actually remove any data

• Treat graphics as rows of particular color.

• Colors are converted to an index and converted to only those index colors. – 2 to 256 colors

• Compression goes by pixel rows and reduces the information

Lossy Compression

• Sacrifices Image quality for Image size– Removes information invisible to the eye– As compression ration increases Image

quality decreases.

• Always compress your images only once. – Reducing a reduced image can have a

dramatic effect on quality. – Always keep original images in their native

form.

Changing Bitmap Properties

• Bitmap properties in the Library allows you to change settings for compression

• Global compression settings can be changed in the Publish settings

• When using Lossless Compression (GIF or PNG-8) the compression settings in Photoshop and fireworks are superior to those in Flash and should be modified there.

Optimizing your images

• Game image rendering is often the cause of problems with performance

• You need to be sensible with your design– Smaller graphics render faster– The more you move a frame the more

processing– If you are trying to move at 30 frames per

second, the images must render in less that 1/30th of a second

Simplify Vectors

• Flash gives you tools to simplify the vectors that you cretae in vector graphics. – Optimize curves from the Modify Menu

• Works on Illustrator and EPS graphics as well as those created in Flash

Other considerations

• Alpha Channels– More alpha channels = more rendering

• Anti Aliasing– Adds processing time. In some cases (Small fonts) it

may not help legibility

• Bitmap Smoothing– Flash process to improve scaled bitmap can use extra

processor time

• Use ActionScript functions when possible to improve performance

Loading Graphics at Run-Time

• May increase speed if you are loading additional parts of the program while it is playing

• Allows you to change the game without having to recompile the SWF.

• Flash only loads JPEG and SWF files– May limit your choices