# Spriting Quickstart

### What Is Spriting?

Spriting is the act of editing icons, otherwise known as .dmi files. These files make up every image you see in-game. These files can be edited with BYOND's tools (Dream Maker) or external programs such as spriting software.

### Tools

#### Icon Conflicts

If you have published a PR that affects the icons of a file, and another PR that affects other icons in that file is merged before yours, you will likely have a merge conflict. Because git cannot read icon files, you will be unable to use git to resolve these merge conflicts.

To deal with this, a merge hook is integrated into git and can be installed to automatically resolve these conflicts wherever possible.

To install this hook, run ``\tools\hooks\Install.bat``.

#### Spriting Program

The most important thing you will need for spriting is a tool or program to allow you to sprite. The default available tool is Dream Maker. However, many find Dream Maker difficult to work with for the creation of sprites. Some preferred programs are as follows:

- [Aseprite](https://www.aseprite.org/), a paid spriting program
- [Libresprite](https://libresprite.github.io), a free, older version of Aseprite
- [paint.net](https://www.getpaint.net/download.html), a free image editor, useful at small scales

These offer you all the tools you'll need and more to sprite properly.

#### Dream Maker

Dream Maker is the default tool for editing code, icons, and maps, which comes packaged with BYOND. It will be needed to edit .dmi files.

Once you open a .dmi file, you should see a grid of sprites. Hovering your cursor over will play an animation and cycle through directionals, if there are any.

##### Locating Sprites

To locate a sprite, begin by finding the code definition of the object, or any parents of the object. Under its variables, there should be the following:

`icon = "abc"` - The icon refers to the file storing the image
`icon_state = "abc"` - The icon_state refers to the exact image used from the file

##### Importing .png Files

To import a sprite from a .png, you can press Ctrl+I or right-click anywhere and click "import" to select the png. Make sure that the png is either 128x32 or 64x64 depending on preference, and the sprites are lined up in 32x32 squares, with directionals South, North, East, and West from left to right.

Delete the sprite titled "no name". It is a combination of all four sprites and will not be used. Drag or Ctrl+Click to select all 4 directionals. Then, right click and choose "combine, 4 directions first".

Double-click the sprite to enter the editor and Shift+Click the directionals to arrange them in proper order if they are not already.

Double-click the text or press F2 with the sprite selected to edit its title.

The end result should look like this.

##### The Editor

Double-clicking a sprite will open the editor. The editor provides basic, although inefficient tooling to draw sprites. On the bottom, there will be a grid with directionals (top to bottom) and animation frames (left to right), like so.

The buttons depicting a dot and arrows decide the amount of directions this sprite can face. This is used for structures, machines, and mobs that can be turned to face different directions.

Click to select a frame, Drag to select multiple frames, Shift+Drag to swap frames with each other, and Ctrl+Drag to copy frames.
# Spriting Guidelines

Spriting is an art form, and it varies depending on what's being sprited for. Here are some standards used on Paradise when creating sprites.

1. Almost all sprites are drawn at a 3/4 top-down 45-degree angle. Sprites should be orthographic, meaning there is no perspective. If a sprite gets smaller as they move into the distance, the perspective is off.
2. Almost all sprites are drawn on a 32x32 canvas. Anything larger than 32x32 should be separated and labelled as such.
3. Directionals, the sprites used for different directions, should be limited to 1 for static objects that do not need to turn and 4 for objects that must be able to turn, such as mobs and clothing. The use of 8 directionals should be limited to certain items, such as those with arrows that point diagonally.
4. Light comes from directly above the object. This should be taken into consideration when shading, especially with indents and various irregular shapes.
5. When choosing a palette, it is highly recommended to utilize hue shifting. Hue shifting is adjusting the hue alongside brightness. Darker colors become colder, or more blue, and lighter colors become warmer, or more yellow. Cold and warm vary depending on the hue you start with. This creates more vibrant, dynamic sprites.
6. Outlines should also be affected by the lighting and coloring on the object, and should be a darker variant of the primary color.
7. Typically, avoid adding shadows underneath objects, machines, mobs, or other structures.

Common Mistakes

1. The use of solid black or otherwise unfitting colors in outlines. Outlines should be a darker variant of the primary color.
2. Too many colors, especially when representing a light source or gradient. Limit the palette and work with what's available. Typically, 3-5 colors is ideal for any given sprite, though it's not restricted to use more or less.
3. Using one hue and its shades instead of hue shifting will result in a dull sprite.
4. No source of light, causing inconsistencies in shading.
5. Pillow shading, a form of shading in which light comes from the center of the object. Avoid pillow shading entirely.
6. Staircasing your pixels rather than placing them directly diagonal from each other can cause lines to be much thicker than they should be. Avoid staircasing whenever possible unless the intent is for a portion or outline to look thicker.
7. Orphan pixels are pixels that are isolated from other pixels of the same or similar pixels. They create contrast and distract the viewer.

### Guide to Spriting

A common issue when beginning to sprite is not knowing where to start the drawing. Below, images and descriptions will be provided to show the step-by-step process of creating a simple device sprite.

First, create a palette. 3-5 colors are ideal. Pick a base tone, 1 highlight, and 2 shades for a 4-shade sprite, which is the most common. Remember to hue shift.

Next, create a rough, symmetrical outline of the device using one of the shades, then fill it in with the base color. Remember to keep it at 3/4, topdown, 45-degree perspective. The left and right sides should not be visible.

Then, turn that "bar" separating the top face from the front face into a highlight. Make the front face and its outline darker than the top face, or make the top face and its outline brighter than the front face.

Then, make sure any pixels where two lines of the same color intersect are made a shade darker, and pixels where a highlight and an outline intersect are made a shade brighter.

Now that a simple sprite is complete, add details. In this example, more highlights, a screen, two buttons, a grip, and two prongs. The screen will be indenting, so the highlight will be on the bottom. If it were extruding, the highlight would be on the top.

# Porting Sprites

It is allowed to port sprites from another server for use on Paradise, so long as licensing is considered. However, be wary that different servers have varying styles which can severely mismatch with the style of Paradise Station.

Currently, the Sprite Team's verdict on porting sprites from other codebases is as follows:

1. If it is a common outfit, such as departmental clothing, please do not port anything of this nature unless it is going to be a NEW item, not a replacement for an old one.
2. For commonly-used/commonly-seen machinery/items, these should be original sprites. However, these will be reviewed on a case-by-case basis.
3. For uncommon or off-station clothing, ports may be allowed on a case-by-case basis
4. For uncommon machinery/items, ports will generally be accepted provided they are better than the original item, however they may still not fit with the server's style.
5. Sprites created originally by Paradise contributors take priority over ported sprites.

TLDR: If you want to port sprites for anything, reach out to Sprite Team before making PR progress towards it. Your PR may be denied if another opens with original sprites.

# Design Guidelines

The design for sprites on Paradise should follow the likes of media such as Alien, Fallout, Half-Life/Black Mesa, and Star Trek. Generally, aim for cassette retrofuturism, an aesthetic based on what the future would have looked like from the perspective of the mid-1960s to the early 1990s.

This can be applied in several ways. Machines will be offwhite or beige. Machines and objects should be clunky, bulky, and clearly dated equipment that has survived to the current era, such as magnetic-tape data storage or fax machines.

When designing departmental clothes, there are a few things to be considered.

For all roles:

Roles of the same department should generally use the same palette for the main body, with the exception of Service. For example, Engineers and Atmospheric Technicians have a yellow body color, but the secondary color changes, being orange for Engineers and blue for Atmospheric Technicians.

For working-class roles (engineers, miners, roboticists):
- Simple collared uniform. This will be the same as other roles, except with its own unique coloring and patterns.
- Overalls
- Soft caps
- Corporate (alternate style) uniform. This can be clothing pertaining to the role (such as an atmos tech in a hi-vis firefighter's uniform), or a simple color swap.

For higher-up roles (heads of staff, dignitaries):
- Separated shirt and pants
- Primary color should match the department they lead
- Secondary color should be silver, gold, or any other fitting color.
- Any amount of alternate outfits, ranging from ridiculously posh to casual or practical wear.

### Spriting Requirements

#### Mobs
Mobs require sprites in 4 directions. Playable mobs should be able to wear clothes, hold items, wear gloves, glasses, etc. Anything worn on mobs must be in the same place in all 4 directions.

#### Turfs
Floors are one of few exceptions to perspective. Floors should be 2-dimensional. Avoid flat, solid coloring. Instead, try to divide floors into sections or have a special design in mind.

#### Objects
##### Items
Items that you can pick up generally require in-hand sprites, as well as being 1-directional. If objects are 4-directional or 8-directional, they should never rotate. The best example of this is the pinpointer or medical crew pinpointer.

##### Clothing
Clothing requires an item sprite in the appropriate dmi file in icons/obj/clothing/, an in-hand sprite in icons/mob/items_lefthand.dmi and items_righthand.dmi, as well as the on-mob sprite in the appropriate file in icons/mob/clothing

##### Machinery and structures
Direction count varies from machine to machine. Some can be rotated, such as laser emitters, and some cannot, such as chemical dispensers. Ideally, if it can have 4-directional sprites, it should have 4-directional sprites. All machines should have an 'on' sprite and an 'off' sprite.