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.

DMI Files

You will often be asked to make a .dmi file version of your sprites, which the file format BYOND uses for storing icons and images and such. The process of creating one is very simple:

1. Open up BYOND's Dream Maker.
2. Create a New Environment.
   • If you've already made an Environment, whether from previous work or opening up .dmi files, you can just go ahead to step 5.
3. Designate the file directory where the Environment file (.dme) and its associated files will go. Name the .dme.
4. Create a new file through File->New. (If you've created a new environment, it'll all already do it for you.) Choose Icon File (.dmi). Designate where the .dmi will go, relative to the folder the Environment file is stored (if you live it blank, it'll go in the same folder). Name it something sensible.
5. Set the max tile size of each image in .dmi. The default is 32x32, best not change it if you're not doing anything bigger than that.

These .dmi files, however, are just containers for icons. To add the actual sprites/images to these .dmi files, you can:

1. Right click anywhere in the big white space or go through the Graphic menu at the very top and choose the New Pixmap... (still image) or New Movie... (animation or multi-directional sprite) options, which will open Dream Maker's built-in image and animation editors.
   • Clicking on the palette icon or movie camera icon will do the same thing.
   • The pixmap is otherwise like MS Paint or any other standard image-editing program, with an alpha channel slider for manipulating transparency. The higher alpha channel, the less transparent the image is.
   • The movie editor is likewise standard. Worth noting: the delay is in centi-seconds/ 1/10ths of a second.
   • If you're trying to make a multi-directional sprite (e.g. clothing, an item being worn), you actually use the movie editor, making a movie with just one frame.
2. Right click anywhere in the big white space or go through the Graphic menu and choose the Import... option. Then pick whatever file you want to import.
   • If you pick a file below whatever max tile size you set (usually 32x32), BYOND will import it as is, with no change to the file. Though the file looks like it's fine, it'll usually misalign in-game.
   • If you pick a file above the max tile size, BYOND will treat it like a spritesheet and cut it into tile size portions.

From there, you can double-click on an icon to give it a name, which BYOND calls editing its state. The right-click menu and Graphics tab will also work.

Clothing

Example: grey jumpsuit.

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.
• 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.
• Aseprite is usually £15.49/$21.28, and is absolutely worth every penny. Its editing tools and UI are incredibly robust and absolutely incredible for spriting. Bug Erinexx on the Discord and maybe they'll buy you a license.
• 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 open source release of Goonstation although you will have to download the github repository as a zip file or install github's desktop client to download the repository. Or use a subversion or git client.

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/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.

The sprites are all mostly in icons folder, roughly organised by what BYOND uses them for. The ones that hold anything of real use are:

• mob: Humans, cyborgs, ghostdrones, the AI, user interface buttons, items when they are held in-hand, and clothes when they are worn.
• obj: Machines and other large objects, as well as items when they're in an inventory or on the ground.
• effects: Genetics effects, heads-up-display icons, and things like blood, vomit, and explosions.
• turf: Station walls and floors.
• Misc: Everything that doesn't neatly fit in those categories, notably critters.

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.

Guidelines

• The Goonstation Spriting Guidelines explain the basic art style of Goonstation sprites, formatting of sprite files, and a brief summary on receiving feedback.

Additional Help And Feedback

• Goonstation Forums - The Ideas and Suggestions has a subforum, Sprites, exclusively for showing off your spritework to forumgoers. Ideas and Suggestions is also a good place to find things to sprite.
• Goonstation Discord - Goonstation's very own Discord channel. Tons of players, coders, and admins alike regularly chat here, so it's great place to get instant feedback from the people who are going to see your work often.
• SS13 Sprite School - A smaller channel created by Goonstation's very talented Gannets. Quite small, very new, but there's plenty of talent here.

---