Difference between revisions of "Spriting"
(Created page with "<center> {| border="2" cellpadding=5 ! style="background:red" | Spriting takes time. Don't give up. |} </center><br> == What is all about == [[File:Human-Mob-Spriting.png|le...") |
|||
Line 8: | Line 8: | ||
[[File:Human-Mob-Spriting.png|left|frame|Reference lifesize human sprite.]] Every sprite is an image displayed inside a 32x32 pixels tile. | [[File:Human-Mob-Spriting.png|left|frame|Reference lifesize human sprite.]] Every sprite is an image displayed inside a 32x32 pixels tile. | ||
Files are generally saved as png files, without compression. Animations can be either saved as .gif, or as a .png in a strip of 32x32 frames. | Files are generally saved as png files, without compression. Animations can be either saved as .gif, or as a .png in a strip of 32x32 frames. | ||
<br><br><br><br><br> | <br><br><br><br><br><br> | ||
== Clothing == | == Clothing == | ||
[[File:Assistant-Suit-Spriting.png|frame|The venerable Assistant suit.]] | [[File:Assistant-Suit-Spriting.png|frame|The venerable Assistant suit.]] |
Revision as of 01:34, 31 December 2012
Spriting takes time. Don't give up. |
---|
What is all about
Every sprite is an image displayed inside a 32x32 pixels tile.
Files are generally saved as png files, without compression. Animations can be either saved as .gif, or as a .png in a strip of 32x32 frames.
Clothing
Worn clothing requires at least 4 sprites. Front, back and sides. The laying down sprite is exactly like the front sprite.
You then need a separate sprite for the inventory, which will also be used for the clothes on the ground.
Byond draws sprites one layer on top of the other; each sprite must not be wider than the layer above.
As an example, if you're drawing a jumpsuit, remember that it must be narrower than the spacesuit sprite. Or a few pixels from the jumpsuit will show all around the edge of the spacesuit.
Pay attention not to draw over body parts that your clothes don't cover. If it's a jumpsuit, leave holes for the hands.
Items
Each item has at least one sprite, for both the ground and the inventory.
Many items have 4 sprites which go in the hand of the human sprite.
Additionally, items which can be on/off (a welder), or which have a charge meter (a gun) have a sprite for each state.
In-hand sprites will often have blank areas where they are being gripped, or hidden by perspective. For instance, the welder in the image is drawn without an handle.
Objects and Machinery
Fixed object are generally bulky, and cover almost entirely one tile. Try to live a one-two pixel border from the edge, so that two nearby objects don't look melded into each other.
Machinery is often animated, with one image for each frame.
Sometimes, instead of an entirely new sprite drawn for a state of an object, only the changed part is drawn, and then overlaid on the base sprite.
When drawing objects, you can start by paint them over a screenshot of the area where they will be placed; it helps to make sure that edges are well defined on the tile, and that they match the surroundings.
Software
GIMP is powerful, free. You will fight the UI.
Paint.net is free. Windows only.
Reference
The images on this page are all 32x32, so you can use them to draw your clothes or objects.
If you take screenshots from Byond, make sure you set icons to 32x32, or images will look fuzzy, and be in the wrong scale!
Most sprites, floors, items and clothes, can be found in the public release of goonstation. Even though it's old, sprites are still the same!
If you have never sprited before, looking at those sprites can be a good way to learn how to sketch items and use colors.
Sprites are in the subfolders of ./rev4407/icons. Even if the file extension is .dmi they are simply .png files, which can be opened with Byond itself or with any editor.