Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.
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