Tips for sprites, animations for websites and more
Table of Contents:
File Types
Background Colors
Color Limits
Resized, unblurred sprites on a website
Frame Rate Conversion for Web Animations
Helpful resize settings
'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).
 
 
 
|
 |
 |
| How it should look | How your browser makes it look |
I have a whole page that explains why and links to something that can help.
Sprites and graphic tiles on older systems and arcade games had limits in size and color that were more obvious than they are on more recent systems. You should try to learn and follow the color limits of a given style if you're trying to make sprites or sprite edits that seem to fit into another game. Sometimes they got around these limits by overlapping separate sprites that had different palettes. You'll see this in certain fighting game sprites like Wolverine's claws in X-Men: Children of the Atom, Sodom's swords or jutte in the Street Fighter Alpha series and Captain America's shield in Marvel Super Heroes. Thanks to Capcom doing that, you can 'cheat' by using extra colors on weapons or things that would be considered separate from the actual character when using those styles.
Each system also has it's own palette set or even multiple palette sets. Games colors will also differ depending on the style that the developers use too. If you want to imitate a game style, get a wide variety of sprites and copy their colors as much as you can. You won't want to make really bright colors for a game with moody, washed-out color tones because they won't blend in. You'll really want to pay attention to this when making fake screenshots.
It's not that you have to do this but working within the limits that the original game artists work in make things look more authentic. You may also develop a bit more respect for early sprite pioneers for realizing how much they were able to accomplish within the strict limits.
| System Name | Color Limit | Games Incuded | Notes |
| CP System II/CPS-2 (Arcade) | 15 visible colors, 1 transparent | Street Fighter Alpha series, Marvel fighting series, Darkstalker series, Mega man Power Battles series, Dungeons & Dragons, Battle Circuit | |
| Super Nintendo/Super Famicom | 15 visible colors, 1 transparent | Final Fight 2 & 3, Rushing Beat series | |
| Sega Genesis/Mega Drive | 15 visible colors, 1 transparent | Sonic 1-3, Revenge of Shinobi, Shadow Dancer, Shinobi III, Streets of Rage/Bare Knuckle seres | Many of the very early games seem to use a few less colors. Check the other sprites from a specific game to see what they use. |
Sources and Reference:
CPS-2 Shock websiteFrame 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
| 60 fps 1.667 | |
| 1 | 2 |
| 2 | 3 |
| 3 | 5 |
| 4 | 7 |
| 5 | 8 |
| 6 | 10 |
| 7 | 12 |
| 8 | 13 |
| 9 | 15 |
| 10 | 17 |
| 11 | 18 |
| 12 | 20 |
| 13 | 22 |
| 14 | 23 |
| 15 | 25 |
| 16 | 27 |
| 17 | 28 |
| 18 | 30 |
| 19 | 32 |
| 20 | 33 |
| 21 | 35 |
| 22 | 37 |
| 23 | 38 |
| 24 | 40 |
| 25 | 42 |
| 26 | 43 |
| 27 | 45 |
| 28 | 47 |
| 29 | 48 |
| 30 | 50 |
| 31 | 52 |
| 32 | 53 |
| 33 | 55 |
| 34 | 57 |
| 35 | 58 |
| 36 | 60 |
| 37 | 62 |
| 38 | 63 |
| 39 | 65 |
| 40 | 67 |
| 41 | 68 |
| 42 | 70 |
| 43 | 72 |
| 44 | 73 |
| 45 | 75 |
| 46 | 77 |
| 47 | 78 |
| 48 | 80 |
| 49 | 82 |
| 50 | 83 |
| 51 | 85 |
| 52 | 87 |
| 53 | 88 |
| 54 | 90 |
| 55 | 92 |
| 56 | 93 |
| 57 | 95 |
| 58 | 97 |
| 59 | 98 |
| 60 | 100 |
| 61 | 102 |
| 62 | 103 |
| 63 | 105 |
| 64 | 107 |
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.
Helpful resize settings
384 pixel width (many late 80's/90's Capcom arcade games) to 320 pixel width (old standard definition): 83%
'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.
Return to top of the top of the page