|
Tips for sprites and web animations
Table of Contents:
File Types
Background Colors
Frame Rate Conversion for Web Animations
'Reduce Colors to' settings (or 'How to avoid those weird dots')
File types
NEVER save a sprite as a .JPEG/.JPG file. They make your sprites blurry and completley ruin them. Here's an example of a Hiryu sprite from Marvel vs. Capcom saved as a .PNG file and a .JPG file. Each has been zoomed to 300% view and not resized by the art program. You can see how much damage is done even to the simple letters in .JPG.
Here are some recommended file types for whatever task you're making the sprites for:
.PNG : These are perfect for non-animated pictures that need transparent backgrounds and have less than 255 colors. They are also good for pictures with more than 255 colors that don't have need transparent backgrounds. They're even better than static .GIFs because of their small file size and easy use with earlier versions of PHP. They can also have extra effects, but only on certain web browsers.
.GIF : These are for animated pictures and can even have transparent backgrounds.
.PCX : This is a good format that doesn't blur the sprites. This is also the format that is used by M.U.G.E.N.
.PSP, .MNG and .PSD : These have the benefit of saving many frames of animation as layers that can be later used in some animation programs like Animation Shop.
.BMP : A good format for saving single frames. The problem is that each file takes up A LOT of space.
.JPG and .JPEG : NO! They ruin sprites.
Background color
Don't use black or white as a backgrond color of a transparent .GIF or .PNG file unless the color is crucial for an effect. Many times, people reduce the colors and accidentally merge the colors for the background and a similar color in the graphic. Instead of black or white, try using colors that very different from anything used in the graphic. Popular colors are Magenta (#FF00FF or 255/0/255 Green (#00FF00 or 0/255/0).
Frame Rate Conversion
Programs like JASC Animation Shop divides each second of animation into 100ths while most emulators run at 60 frames per second. So how do you figure out how many program frames to use? First, Divide the emulator's frame per second/frame rate into 100. Take that number and use it to multiply the game tick number for every frame of animation. The formula looks like this:
( animation program frames per second / emulator frames-per-second ) * game ticks
Example: If the frame rate is 60 and the sprite appears for 3 game ticks, you multiply 3 by 1.667 (100 divided by 60). Here's a formula for it:
(100/60)* 3 (1.667) * 3 5.001
Remember that many different factors will still alter the timing of a sprite on a webpage. However, making sure that the timing is accurate will keep people from complaining.
'Reduce colors to' Settings
Here is a snapshot of the best settings to use when reducing the number of colors in a 2-D graphic element

As long as you have less than 255 colors in your graphic already, Optimized Octree will keep them exactly as they're supposed to be. Optimized Median Cut will slightly alter your colors and Windows'/Windows' Colors will probably just mess everything up for you. While Nearest color will always change whole areas of color into the closest that the palette option allows, Error Diffusion will mess up your graphic by putting extra dots in certain places. If you're wondering why you keep finding weird dots in your sprite, make sure that you have not selected Error Diffusion.
Contributors: Kiwi Deorum, PrimeOp, Satsuz.
|