efficient game graphics
DESCRIPTION
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. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Efficient Game Graphics](https://reader036.vdocuments.net/reader036/viewer/2022070400/568134af550346895d9bc98e/html5/thumbnails/1.jpg)
Efficient Game Graphics
From Flash MX 2004 Game Design Demystified
![Page 2: Efficient Game Graphics](https://reader036.vdocuments.net/reader036/viewer/2022070400/568134af550346895d9bc98e/html5/thumbnails/2.jpg)
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
![Page 3: Efficient Game Graphics](https://reader036.vdocuments.net/reader036/viewer/2022070400/568134af550346895d9bc98e/html5/thumbnails/3.jpg)
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.
![Page 4: Efficient Game Graphics](https://reader036.vdocuments.net/reader036/viewer/2022070400/568134af550346895d9bc98e/html5/thumbnails/4.jpg)
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
![Page 5: Efficient Game Graphics](https://reader036.vdocuments.net/reader036/viewer/2022070400/568134af550346895d9bc98e/html5/thumbnails/5.jpg)
Advantages
• File size and flexibility
• Scale and positioning flexibility– Helpful if you are going to change the size of
your graphic while playing
![Page 6: Efficient Game Graphics](https://reader036.vdocuments.net/reader036/viewer/2022070400/568134af550346895d9bc98e/html5/thumbnails/6.jpg)
Disadvantages
• Because image is recreated on the fly, it may effect performance.
![Page 7: Efficient Game Graphics](https://reader036.vdocuments.net/reader036/viewer/2022070400/568134af550346895d9bc98e/html5/thumbnails/7.jpg)
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
![Page 8: Efficient Game Graphics](https://reader036.vdocuments.net/reader036/viewer/2022070400/568134af550346895d9bc98e/html5/thumbnails/8.jpg)
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.
![Page 9: Efficient Game Graphics](https://reader036.vdocuments.net/reader036/viewer/2022070400/568134af550346895d9bc98e/html5/thumbnails/9.jpg)
Disadvantages
• Don’t work well if you have to zoom or rotate them.
• Files sizes can quickly get large
![Page 10: Efficient Game Graphics](https://reader036.vdocuments.net/reader036/viewer/2022070400/568134af550346895d9bc98e/html5/thumbnails/10.jpg)
File Types for Flash Games
• For Bitmaps you should either use GIF, JPEG or PNG
![Page 11: Efficient Game Graphics](https://reader036.vdocuments.net/reader036/viewer/2022070400/568134af550346895d9bc98e/html5/thumbnails/11.jpg)
GIF
• Indexed color
• Reduced to 256 colors maximum
• Allows for one transparent color
• Considered Lossless– If the image only has 256 or less colors
![Page 12: Efficient Game Graphics](https://reader036.vdocuments.net/reader036/viewer/2022070400/568134af550346895d9bc98e/html5/thumbnails/12.jpg)
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
![Page 13: Efficient Game Graphics](https://reader036.vdocuments.net/reader036/viewer/2022070400/568134af550346895d9bc98e/html5/thumbnails/13.jpg)
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.
![Page 14: Efficient Game Graphics](https://reader036.vdocuments.net/reader036/viewer/2022070400/568134af550346895d9bc98e/html5/thumbnails/14.jpg)
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
![Page 15: Efficient Game Graphics](https://reader036.vdocuments.net/reader036/viewer/2022070400/568134af550346895d9bc98e/html5/thumbnails/15.jpg)
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
![Page 16: Efficient Game Graphics](https://reader036.vdocuments.net/reader036/viewer/2022070400/568134af550346895d9bc98e/html5/thumbnails/16.jpg)
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.
![Page 17: Efficient Game Graphics](https://reader036.vdocuments.net/reader036/viewer/2022070400/568134af550346895d9bc98e/html5/thumbnails/17.jpg)
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.
![Page 18: Efficient Game Graphics](https://reader036.vdocuments.net/reader036/viewer/2022070400/568134af550346895d9bc98e/html5/thumbnails/18.jpg)
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
![Page 19: Efficient Game Graphics](https://reader036.vdocuments.net/reader036/viewer/2022070400/568134af550346895d9bc98e/html5/thumbnails/19.jpg)
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
![Page 20: Efficient Game Graphics](https://reader036.vdocuments.net/reader036/viewer/2022070400/568134af550346895d9bc98e/html5/thumbnails/20.jpg)
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
![Page 21: Efficient Game Graphics](https://reader036.vdocuments.net/reader036/viewer/2022070400/568134af550346895d9bc98e/html5/thumbnails/21.jpg)
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