SpriteComponent and IconComponent are the two primary rendering components for entities. SpriteComponent is for rendering of entities on the map, while IconComponent is a simpler way to represent an entity’s icon in say the spawn panel.
Texture Selection
There are two ways to select a texture:
- A direct texture file (right now a PNG).
- From an RSI, with a state ID. An RSI is our equivalent to BYOND’s DMI format, containing a list of icons by key.
Loading from a texture is pretty easy. You just specify a path to a .png file in the VFS and you’re good.
With an RSI, you need to specify the RSI itself in one variable, then the RSI state in another.
IconComponent
IconComponent has 3 properties in a prototype:
- type: Icon
texture: ""
sprite: ""
state: ""
texture is used to refer to a direct texture such as a PNG. sprite and state are used to refer to an RSI and the relevant state for it, respectively. These are mutually exclusive: you cannot use texture together with sprite and state.
.
SpriteComponent
Ah this is where it gets fun. SpriteComponent does everything, shader support, layers, directions, animations…
The component uses multiple layers, sorta like overlays in BYOND. These layers are drawn in order, meaning that the last layer in the list will be on top.
You can specify layers in a prototype as a list under the layers key, so like this:
- type: Sprite
layers:
- texture: "a.png"
- texture: "b.png"
- ...
texture: same as for the IconComponent.sprite: same as for IconComponent. If this is not specified, a layer can fall back to the sprite property of the main prototype (more on this below).state: same as for IconComponent: the RSI state to use.shader: this is where it gets fun: the ID of a shader to use. See here for documentation on shaders.scale: Scale applied to the layer, as a vector 2 (2 floats separated by comma).rotation: Rotation applied to the layer, in degrees.visible: true or false, enables/disables the layer. This is useful if the layer gets re-enabled by code, such as the flame of a welding tool.
The main prototype also has some properties:
-
sprite, state and texture. These function as quick short hands for the same properties on layers. If these are set, a layer is added with these as texture parameters. One thing to note is that sprite functions for all layers, unless the layer specifies one itself. So you can set the base sprite of the prototype to an RSI, and then each layer only needs a state specified.
-
scale: scale applied to every layer.
-
rotation: rotation applied to every layer, in degrees.
-
offset: amount to offset every layer with.
-
drawdepth: draw ordering of this sprite. This maps to the DrawDepth enum in code. Higher means the object will render above objects with a lower draw depth always.
-
color: color multiplication applied to every layer. Use a hex color.
-
directional: if true, the sprite will not rotate with the entity, but will change RSI direction to north/south/east/west or whatever. If false, these directions will be ignored and the sprite will rotate as normal. Disabling this is useful for top-down sprites that should rotate such as bullets.
-
visible: makes the entire component visible or not.
All these properties can be changed at runtime with methods on the component.
Sprite Art Guide
This guide covers the visual side of creating sprites for Space Station 14. These are recommendations, not strict rules — use them as a starting point and develop your own style with practice.
Visual Style
SS14 uses a 3/4 top-down projection — you see the top face and one side of each object. The light source is typically above and slightly to one side.
Palette
Use a limited palette of 4–5 shades per base color:
| Shade | Purpose |
|---|
| Highlight | Brightest point, used for glossy surfaces |
| Light | Lit area facing the light source |
| Base | The main color of the material |
| Mid-shadow | Transition between base and shadow |
| Shadow | Darkest area, opposite the light source |
Contour (Outline)
- Every sprite needs an outline — it separates the object from the background.
- Never use pure black outlines. Use a darker shade of the object’s own color instead.
- Vary the outline color slightly along the shadow side for a softer look.
Contrast
Make sure light and shadow are clearly different. Low contrast makes sprites look flat and hard to read at a distance. If in doubt, zoom out — if details blend together, increase contrast.
Theory
Line Art
Start with clean lines before adding color. Key points:
- Keep line thickness consistent throughout the sprite.
- Avoid jagged edges — diagonal lines should use a smooth, repeating pixel pattern.
Anti-Aliasing
Anti-aliasing (AA) softens harsh pixel edges by placing intermediate-color pixels at corners and curves. Use it sparingly — too much makes sprites blurry.
Avoid banding — parallel lines of similar color that create a striped effect. Banding makes shadows look mechanical. If you’re not sure, keep it simple and clean.
Shading by Material
Different materials reflect light differently:
| Material | Shading Style |
|---|
| Metal | Strong highlights, high contrast, sharp transitions |
| Plastic | Medium contrast, softer highlights |
| Fabric | Diffuse light, soft shadows, no highlights, matte |
| Wood | Matte (raw) or glossy (varnished), often with grain texture |
| Glass | Semitransparent, strong edge highlights |
Axonometry (3/4 Perspective)
Objects are drawn in a 3/4 top-down projection. The 3/4 edge (where the top face meets the side face) is usually highlighted to make the form readable.
Start with primitive shapes (cube, cylinder, sphere) to block out volume. Build the object like a construction kit, check the silhouette, then add color and shading.
Common Mistakes
- Pillow shading — shading evenly from center to edges without a light source. Always pick a light direction first.
- Over-dithering — too much pixel noise hides the form. Use dithering sparingly for texture only.
- Too many colors — stick to 4–5 per base color; more shades rarely improve a 32×32 sprite.
Software
Aseprite (Recommended)
Aseprite is the most popular pixel art editor. It’s specialized, lightweight, and great for animation.
Basic tools:
| Tool | Key | Use |
|---|
| Pencil | B | Draw individual pixels |
| Eraser | E | Remove pixels |
| Eyedropper | I | Pick a color from the canvas |
| Paint Bucket | G | Fill an area with one color |
| Selection | M | Select/move/copy areas |
| Line | L | Draw straight lines |
Shift + R — replace one color with anotherShift + H — flip horizontallyShift + V — flip verticallyShift + O — auto-outline selection
Animation: Press Tab to open the timeline. Layers work like transparent sheets. Shift + N for new layer, Alt + N for new frame.
Scripts: Aseprite supports Lua scripts (File → Scripts → Open Scripts Folder). The More Color Shading Options script helps generate palettes.
Resprite (Mobile)
Free Aseprite-like editor for phones. Useful for quick sketches and practice on the go.
Practice
Approach 1: Template-Based
Use existing sprite templates (SS220 has a large collection). Replace the palette while keeping the structure:
- Load a template.
- Replace each shade with your chosen colors.
- Adjust brightness/saturation to fit the game’s style.
This approach is great for learning palette work and clothing structure.
Approach 2: From Scratch
Start with a simple object (e.g., a wooden chair) to practice the full pipeline:
- Silhouette — block out the basic shape. Define the light source.
- Volume — add details (legs, seat, backrest) in the right perspective.
- Shadows & Outlines — darken areas away from the light. Add colored outlines.
- Edge transitions — highlight the 3/4 edge between faces.
- Drop shadow — add a shadow on the ground matching the light direction.
Build up from simple shapes. Even complex objects can be broken into cubes, cylinders, and spheres.
Working with RSI
For technical details on the RSI format (meta.json, state naming, licensing), see the RSI specification above. Key naming conventions:
- RSI folder names: lowercase, underscore-separated, no prefixes like
_ss220
- Sprite files inside:
icon.png (32×32 inventory), equipped-INNERCLOTHING.png (64×64, 4 dirs), inhand-left.png / inhand-right.png
meta.json must include: version, license, copyright, size, and states array
Resources
Last modified on June 21, 2026