| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
Tips for sprites and web animations Table of Contents:
Special note: sorry for making you squint at the pictures but many recent web browser updates have a new feature that will automatically anti-alias any images resized by the browser. I can't even show you a real zoomed in version of these files because of that because even the .PNG version would be blurred now and that pretty much ruins the basic intent of the tutorial, doesn't it? Yes it does. I still apologize for this. File types
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.
Background color
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.
Sources and Reference: CPS-2 Shock websiteFrame Rate Conversion
( 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
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. |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||