User:Arborinus
proposed sprite page modernization be yonder
| Spriting takes time. Don't give up. |
|---|
What is this all about?
Every sprite is an image displayed inside a 32x32 pixels tile.
They 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. Useful reference files:
- The same image on the right, just as a .dmi file.
- A .psd file with separate layers for the arms.
- Ditto, but as a .pdn file.
Note: Despite the references, laying down sprites are no longer needed for human sprites.
Reference
The sprites 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 are available at the 2016 Goonstation release. You will have to download the github repository as a zip file, install github's desktop client to download the repository, or use a subversion or git client. Even though it's old, many sprites are still the same or similar.
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 .goonstation-2016-master/icons. Even if the file extension is .dmi, they are simply .png files and can be opened with Dream Maker itself or any other editor.
Clothing
Worn clothing requires:
- Front, back and sides. In Dream Maker, directions are South, North, East and West, in that order.
- In-hand sprites (the tiny icon when someone is holding the item) for both hands.
- A separate sprite for the HUD inventory, which will also be used for the clothes on the ground.
- Some items also require sprites for other body parts (head, ears, feet etc.) or certain inventory slots, such as the belt or back slot.
BYOND draws sprites one layer on top of the other; each sprite must not be wider than the layer above. Example: if you're drawing a jumpsuit, remember that it must be narrower than the spacesuit sprite. Otherwise, a few pixels from the jumpsuit will show all around the edge of the spacesuit.
Additional tips:
- Pay attention not to draw over body parts that your clothes don't cover, but don't leave holes for the hands if it's a jumpsuit.
- The places where arms and hands will be in side-views are not just empty holes, they're filled in so that people without arms won't look odd.
- You usually don't need to make fat-body sprites.
- There's no difference between how clothing is displayed per gender.
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 a handle.
Objects and Machinery
Fixed objects are generally bulky, and cover one tile almost entirely. Try to leave 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 putting 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. Keep in mind that your sprite will stand out since it is not affected by in-game lighting.
Preparing a .dmi file
Icon files used by BYOND have the .dmi file extension. These files organize sprites and make directional and animated ones much easier to use. To create a dmi file, you need to use BYOND's built-in program, Dream Maker.
In case you decide to publish your sprites on the forum, include a .dmi file as well, as having them in the proper form makes adding them way easier. Less effort for the coders means better chance for things to be used.
If you are planning on creating multiple sprites, it may be useful to create a Dream Maker environment to work on them in. One way to open Dream Maker is to open BYOND (which you should already have installed if you're playing this game!), click the gear on the top right and then "Open Dream Maker". From here, click file, and press new environment. Select the location and name you want for the folder and click okay. This will prompt you to create the first file - make sure you select "Icon File - (.dmi)" from the drop-down box. From here, you can import sprites you have created by right clicking on the empty space in the center.
You can have multiple sprites on one sheet by importing more, but you do not need to separate frames or directions. Simply right click on the first sprite in Dream Maker and click "Edit as movie...", which will open the options for adding frames or directions. If you want to rename the sprite, click on "Edit State..."
When you're finished with your .dmi, you can simply save it. When you attach it to a forum post or import it into another Dream Maker environment, all the necessary data will be kept as long as it stays a .dmi file.
Protip: You can make a spritesheet with the images being 32x32 and it will cut up your sheet into individual sections.
Software
- GIMP is powerful and free. You will fight the UI.
- Paint.net is free. Windows only.
- Various commercial products, such as Adobe Photoshop.