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/30 th 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