Greyscale & Re-coloring
Relevant source files
The following files were used as context for generating this wiki page:
Greyscale Auto-Generated Sprites (GAGS) is a system that generates icon variations from a base greyscale sprite using color configurations. It allows developers to create multiple color layers, apply blend modes, and reuse configurations to minimize manual spritework for item variants.
Sources: code/datums/greyscale/README.md:1-8
System Architecture
The GAGS system operates through three primary components: a JSON configuration, a DMI source file, and a DM configuration type. The system processes these inputs to generate a finished sprite with specific colors applied to designated layers.
Sources: code/datums/greyscale/README.md:14-25
The diagram shows the inputs required by the GAGS generator to produce a recolored sprite.
Sources: code/datums/greyscale/README.md:14-30
Key Components
| Component | Description |
|---|---|
| JSON Configuration | Controls how icon states are combined, blend modes, and color ID assignments. |
| DMI File | Contains the base greyscale sprites used as the foundation for generation. |
| DM Config Type | Links the DMI file and JSON configuration within the Dream Maker code. |
| Greyscale Config Datum | /datum/greyscale_config pointers used to identify specific recolor setups. |
| Sources: code/datums/greyscale/README.md:14-110 |
Configuration and Implementation
JSON Layering
The JSON configuration defines a list of layers. Each layer specifies a type (such as icon_state or reference), a blend mode, and optional color_ids. Color IDs map specific indices from a provided color list to the layer.
Sources: code/datums/greyscale/README.md:32-45
{
"full_icon_state_name": [
{
"type": "icon_state",
"icon_state": "component_state_1",
"blend_mode": "overlay",
"color_ids": [1]
},
{
"type": "icon_state",
"icon_state": "component_state_2",
"blend_mode": "overlay",
"color_ids": [2]
}
]
}
Sources: code/datums/greyscale/README.md:83-99
DM Code Integration
To implement a greyscale object, you define a subtype of /datum/greyscale_config and assign it to an atom's greyscale_config variable. The greyscale_colors variable stores the hex codes used for re-coloring.
Sources: code/datums/greyscale/README.md:112-126
/obj/item/example
greyscale_config = /datum/greyscale_config/example_config
greyscale_colors = "#ff0000"
flags_1 = IS_PLAYER_COLORABLE_1
Sources: code/datums/greyscale/README.md:124-126, code/datums/greyscale/README.md:155-157
Theming and Visual Context
Greyscale systems extend into the user interface through CSS-based theming. The project uses SCSS variables to define color palettes for different departments and UI elements.
Sources: tgui/packages/tgui/styles/themes/ss220.scss:7-17, tgui/packages/tgui/styles/main.scss:13-14
Departmental Color Schemes
The system defines specific Oklch color values for departments, which can be referenced during re-coloring or UI rendering.
Sources: tgui/packages/tgui/styles/themes/ss220.scss:7-17
| Department | Color Definition (Oklch) |
|---|---|
| Security | oklch(0.533 0.155 25) |
| Science | oklch(0.525 0.175 300) |
| Command | oklch(0.5 0.2 255) |
| Medical | oklch(0.55 0.1 225) |
| Engineering | oklch(0.6 0.125 75) |
| Sources: tgui/packages/tgui/styles/themes/ss220.scss:7-17 |
Development and Validation
The project utilizes automated checks to ensure code quality, including specific linting for color-related macros. For example, the check_grep.sh tool enforces the use of the LOWER_TEXT() macro instead of lowertext() to maintain consistency in string processing, which affects color hex code handling.
Sources: tools/ci/check_grep.sh:163-169
Debugging Tools
Developers can use the Greyscale Modification Menu found in the "VV" (View Variables) dropdown for any greyscale object. This menu allows for:
- Real-time color tweaking and previews.
- Reloading configurations from files without restarting the server.
- Inspecting layer generation.
Sources: code/datums/greyscale/README.md:175-177
Conclusion
The Greyscale & Re-coloring system provides a flexible framework for generating dynamic sprites. By separating the base art (DMI), the assembly logic (JSON), and the code pointers (DM), the system allows for extensive item customization and player-driven color choices with minimal overhead.