Spriting

Spriting takes time. Don't give up.

What is this all about?

Reference life-size human sprite.

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.

Clothing

File:Assistant-Suit-Spriting.png

The venerable Assistant suit.

Worn clothing requires:

• Front, back and sides. The laying down sprite is exactly like the front sprite.
• 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

A welder, on/off and in hand.

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

An animation in four stages.

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.

The tile.

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 and free. You will fight the UI.
• Paint.net is free. Windows only.
• Various commercial products, such as Adobe Photoshop.

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 last public release of Goonstation. 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 ./rev4407/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.

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.