Skip to content

Commit

Permalink
[Docs] Added info how to create a mod tilesheet using existing tools. (…
Browse files Browse the repository at this point in the history 
…#2272)

* updated doc/summary

- MD lint applied (tab size reduced)
- Links to summary and general info for MSX and HM changed (see next commits)

* updated doc/style/summary.md

MD lint applied (tab size reduced)

* HM readme file renamed

- changed name for 'readme.md' file as its rendered version renamed to 'index.hmtl' which is inconsistent for links

* MSX readme.md file renamed

- changed name for 'readme.md' file as its rendered version renamed to 'index.html' which is inconsistent for links

* changed letters case for summary files

- now all files in lowercase

* Create mod_tilesheet.md

* Update mod_tilesheet.md

* Added how-to create a mod tilesheet documentation and link to it
  • Loading branch information
@vetall812
vetall812 authored Jan 5, 2024
1 parent 23f16db commit 2051afc
Show file tree
Hide file tree
Showing 7 changed files with 208 additions and 61 deletions.
39 changes: 20 additions & 19 deletions doc/SUMMARY.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,27 @@
- [Windows guide](./installation_windows.md)
- [Nix](./installation_nix.md)
- [Style guidelines](./style/summary.md)
- [UltimateCataclysm (UltiCa)](./style/UltimateCataclysm/summary.md)
- [General info](./style/UltimateCataclysm/general.md)
- [Terrain/Furniture](./style/UltimateCataclysm/terrain-furniture.md)
- [Creatures](./style/UltimateCataclysm/creatures.md)
- [Overlays](./style/UltimateCataclysm/overlay.md)
- [Items](./style/UltimateCataclysm/items.md)
- [MShockXotto+](./style/MShockXotto+/SUMMARY.md)
- [General info](./style/MShockXotto+/readme.md)
- [HollowMoon](./style/HollowMoon/SUMMARY.md)
- [General info](./style/HollowMoon/readme.md)
- [Terrain](./style/HollowMoon/terrain.md)
- [Walls](./style/HollowMoon/walls.md)
- [Overlay](./style/HollowMoon/overlay.md)
- [UltimateCataclysm (UltiCa)](./style/UltimateCataclysm/summary.md)
- [General info](./style/UltimateCataclysm/general.md)
- [Terrain/Furniture](./style/UltimateCataclysm/terrain-furniture.md)
- [Creatures](./style/UltimateCataclysm/creatures.md)
- [Overlays](./style/UltimateCataclysm/overlay.md)
- [Items](./style/UltimateCataclysm/items.md)
- [MShockXotto+](./style/MShockXotto+/summary.md)
- [General info](./style/MShockXotto+/general.md)
- [HollowMoon](./style/HollowMoon/summary.md)
- [General info](./style/HollowMoon/general.md)
- [Terrain](./style/HollowMoon/terrain.md)
- [Walls](./style/HollowMoon/walls.md)
- [Overlay](./style/HollowMoon/overlay.md)
- [How to](./how-to/summary.md)
- [Tileset structure](./how-to/structure.md)
- [Autotiles/Multitiles](./how-to/autotiles.md)
- [Multitiles detailed info](https://github.com/CleverRaven/Cataclysm-DDA/blob/master/doc/TILESET.md#multitile) (new browser window with man CDDA doc)
- [Windows and symlinks](./how-to/Cloning_symlinks_on_windows.md)
- [Tileset structure](./how-to/structure.md)
- [Autotiles/Multitiles](./how-to/autotiles.md)
- [Multitiles detailed info](https://github.com/CleverRaven/Cataclysm-DDA/blob/master/doc/TILESET.md#multitile) (new browser window with man CDDA doc)
- [Windows and symlinks](./how-to/Cloning_symlinks_on_windows.md)
- [Creating a mod tilesheet](./how-to/mod_tilesheet.md)
- [Tools](./tools/summary.md)
- [Common tools](./tools/common_tools.md)
- [Windows wrappers](./tools/windows_wrappers.md)
- [Common tools](./tools/common_tools.md)
- [Windows wrappers](./tools/windows_wrappers.md)

You may find additional info in the [main CDDA documentation](https://github.com/CleverRaven/Cataclysm-DDA/blob/db3054e61b77fd16ef15961714bff97c4b5aac0c/doc/TILESET.md#composepy)
143 changes: 143 additions & 0 deletions doc/how-to/mod_tilesheet.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
# Creating mod tilesheet using existing tools

If you want to create a quite extended mod for CDDA and it'll be shipped separately from the main game you need a composed tilesheet.

It is not a problem for mods with a couple of sprites, but if you have a lot of sprites better to use existing tools.

## Creating a dummy tileset

First of all you need to create a dummy tileset in the tileset repository and receiving folder in your game.

- Create a `my_mod` folder under `CDDA-Tilesets\gfx` (tilesets repository)
- Create a `my_mod` folder under `Cataclysm\gfx` (your game folder)

Now you need to create some files in repository.
Go to `CDDA-Tilesets\gfx\my_mod\` and create `tileset.txt` and add the following content:

```txt
#my_mod
NAME: my_mod_name
VIEW: my_mod_view
JSON: tile_config.json
TILESET: tiles.png
```

As you can see name and view should be somehow related to your mod name, but actually they can be abything but existing tilesets names.

Copy `fallback.png` from any other existing tileset into your `CDDA-Tilesets\gfx\my_mod\` folder. It is needed only to be checked once and you will delete it later.

Lets assume that you have a number of sprites and sprites size are: x=32 and y=48. Put all of them into the folder and name this folder: `pngs_my_mod_sprites_32x48`.

Now you need to create the final file: `tile_info.json` with following content:

```json
[
{
"pixelscale": 1,
"width": 1,
"height": 1
},
{
"my_mod_sprites.png": { "sprite_width": 32, "sprite_height": 48 }
}
]
```

## Composing the "tileset"

Use `updtset.cmd` tool as usual (you may refer to this [doc](../tools/windows_wrappers.md#composer)). Your new dummy tileset will appear in the list of source tilesets available for composing.

If you did everything right you will get the composed tileset in your game directory `Cataclysm\gfx\my_mod`.

You will get:
| file | purpose |
|--|--|
| :bar_chart:fallback.png | to be deleted |
| :bar_chart:my_mod_sprites.png | your composed tilesheet |
| :memo:tile_config.json | you need to fix it a bit |
| :memo:tileset.txt | to be deleted |

Check my_mod_sprites.png - this file should contain all your sprites.

## Fixing the json

Resulting `tile_config.json` supposed to be for a full tileset, so you need to fix it first. Open it in any text editor, copy all content and past it here: [CDDA json linter](https://dev.narc.ro/cataclysm/format.html) and press "LINT" button below.

Now this file content can be easily readable. You will get something like this:

```json
{
"tile_info": [
...
],
"tiles-new": [
{
"file": "my_mod_sprites.png",
"//": "range from 1 to X",
"sprite_width": 32,
"sprite_height": 48,
"sprite_offset_x": 0,
"sprite_offset_y": 0,
"tiles": [
...
]
},
{
"file": "fallback.png",
"tiles": [],
"ascii": [
...
]
}
]
}
```

You need to do the following:

1) Remove `tile_info` section.
2) Instead add the following content before `tiles-new` section:

```json
"type": "mod_tileset",
"compatibility": [
"Chibi_Ultica",
"MShockXottoPlus"
],
```

3) Remove comma between `my_mod_sprites` and `fallback` sections.
4) Remove `fallback` section. Tileset will handle fallbacks.
5) Wrap all text into square brackets `[ ]`.
6) Fix offset values. In our demostration case `sprite_offset_y` will be `-16`.
7) Be sure to include right tileset names into `compatibility`.

You will get something like this:

```json
[
{
"type": "mod_tileset",
"compatibility": [
"Chibi_Ultica",
"MShockXottoPlus"
],
"tiles-new": [
{
"file": "my_mod_sprites.png",
"//": "range from 1 to X",
"sprite_width": 32,
"sprite_height": 48,
"sprite_offset_x": 0,
"sprite_offset_y": -16,
"tiles": [
...
]
}
]
}
]
```

Now you can use your mod tilesheet.
11 changes: 6 additions & 5 deletions doc/style/HollowMoon/SUMMARY.md
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
# HollowMoon style guide

There are some guides:
- [Summary guide](./readme.md)
- Detailed guides
- [Terrain](./terrain.md)
- [Walls](./walls.md)
- [Overlays](./overlay.md)

- [Summary guide](./general.md)
- Detailed guides
- [Terrain](./terrain.md)
- [Walls](./walls.md)
- [Overlays](./overlay.md)
46 changes: 23 additions & 23 deletions doc/style/HollowMoon/readme.md → doc/style/HollowMoon/general.md
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,27 @@
# General style guidelines
# HollowMoon general style guidelines

A bunch of rules that can be applied for every type of sprite.

## Summary

In general you should focus on keeping things simple, eye catching and visually interesting where possible.
When in doubt about something you can contact Joshuu on the discord or [secretstamos](https://github.com/secretstamos) on Github. If you do, please send the original file to make helping you easier.
When in doubt about something you can contact Joshuu on the discord or [secretstamos](https://github.com/secretstamos) on Github. If you do, please send the original file to make helping you easier.

## Use a limited set of colors as in pseudo-16 bit format

![example](image/example.png)

Colors are exclusively limited to four [main colors](#rgb-values) in HollowMoon per season. You only need to submit sprites in the one color scheme - the [script](#script) can handle the other seasons.


![colors](image/colors.png)

Note: You **must** use these [colors](#rgb-values) in their exacts. The [script](#script) cannot detect any other colors.


## Use hard edges and borders around everything

![item_borders](image/item_borders.png)

Everything needs a hard edge and a border. The edge should be in a dark color and the border should be in the lightest color.

Everything needs a hard edge and a border. The edge should be in a dark color and the border should be in the lightest color.

## Shadows are allowed for items and furniture

Expand Down Expand Up @@ -56,28 +53,29 @@ Same goes for round objects. Mind that different surfaces reflect light differen

A very important goal of this set - keep things generally thick and fluffy wherever possible. It is important to disregard reality and detail in situations where they might hinder the final product's readability.

A whip, for example, is a very long and thin object. While you might initially think that a whip would be a single pixel wide (as it would be, realistically) this wouldn't be a good idea.
A whip, for example, is a very long and thin object. While you might initially think that a whip would be a single pixel wide (as it would be, realistically) this wouldn't be a good idea.

![thickness](image/thickness.png)

As seen in the above image, while the left whip retains a similar form to the acceptable whip, it is too thin and realistic for the set. It is needed to thicken out.
Likewise, the center right whip might be realistically sized, but this level of detail does nothing to help and only exceeds its welcome.
The far right image is structurally identical to the acceptable whip but it does not pop. Without simple highlights, it blends together and doesn't look very good at all.

Please keep these in mind, especially when doing ropes, chains, plants, fences and other thin objects.
Likewise, the center right whip might be realistically sized, but this level of detail does nothing to help and only exceeds its welcome.
The far right image is structurally identical to the acceptable whip but it does not pop. Without simple highlights, it blends together and doesn't look very good at all.

Please keep these in mind, especially when doing ropes, chains, plants, fences and other thin objects.

## Revisions happen
Lastly it is important to recognize that revisions are bound to happen. I will periodically perform content revisions from time to time.

Lastly it is important to recognize that revisions are bound to happen. I will periodically perform content revisions from time to time.

## The Scrapbook and how to use it

There are two files that are referenced as 'the Scrapbook' or 'the Sketchbook'

1. [First file](https://github.com/I-am-Erk/CDDA-Tilesets/blob/master/gfx/HollowMoon/scrap/Lots_and_lots_of_sprites_by_secretstamos_to_sort_edited.png) is a PNG file with sorted unimplemented sprites, that can be implemented as is or after some changes according to the style of the tileset.

2. [Second file](https://github.com/I-am-Erk/CDDA-Tilesets/blob/master/gfx/HollowMoon/scrap/Lots_and_lots_of_sprites_by_secretstamos_to_sort.png) is a PNG file with unsorted sprites, both implemented and unimplemented. Use it as a resource to fuel your imagination when you create new sprites, as it can be a valuable insight of the general feel of the tileset. Remember though, that this is still just a sketchbook full of prototypes, unfinished images, and concept art - so not everything there is compliant to the offcial style of the tileset. Do not change this file.

When deciding to make a new sprite, be sure to check the [scrap section](https://github.com/I-am-Erk/CDDA-Tilesets/tree/master/gfx/HollowMoon/scrap) to see if it already exists, and in particular the [First file mentioned above](https://github.com/I-am-Erk/CDDA-Tilesets/blob/master/gfx/HollowMoon/scrap/Lots_and_lots_of_sprites_by_secretstamos_to_sort_edited.png). There are plenty of sprites that are already finished that haven't been implemented yet.
When deciding to make a new sprite, be sure to check the [scrap section](https://github.com/I-am-Erk/CDDA-Tilesets/tree/master/gfx/HollowMoon/scrap) to see if it already exists, and in particular the [First file mentioned above](https://github.com/I-am-Erk/CDDA-Tilesets/blob/master/gfx/HollowMoon/scrap/Lots_and_lots_of_sprites_by_secretstamos_to_sort_edited.png). There are plenty of sprites that are already finished that haven't been implemented yet.
When you decide to implement it, remove the sprite from the file.

Once you're certain it hasn't been already been done, that is a great time to start. Otherwise use the sprite in the scrapbook to implement it in the tileset.
Expand All @@ -98,30 +96,31 @@ It creates recolored seasonal variations for sprites in target folder or even al
It requires a PNG file made in one of the seasonal palettes.

**Usage**:
1. Create a PNG sprite in any consistent palette allowed by HollowMoon tileset.
For transparency use background color allowed by the tileset, it will be replaced

1. Create a PNG sprite in any consistent palette allowed by HollowMoon tileset.
For transparency use background color allowed by the tileset, it will be replaced
by the script with true transparency.

2. Create a subfolder and name it using target file's name (for example 't_dirt').
2. Create a subfolder and name it using target file's name (for example 't_dirt').
Name should correspond to how the game names relevant object (terrain, furniture, etc.).

3. Name your source PNG file {season}.png (for example summer.png) where {season}
3. Name your source PNG file {season}.png (for example summer.png) where {season}
corresponds to the palette you used to create the sprite.
If you used a spring palette you can also call it 'generic.png'.

4. Place the file in the created subfolder and run the script targeting that folder.
4. Place the file in the created subfolder and run the script targeting that folder.
Script will also target subfolders so you can run it for the whole tileset folder.

## RGB values

Here are exact **RGB values of colors** used in each and every palette:

- **Spring RGB**: (240, 236, 187), (181, 175, 105), (115, 130, 92), (95, 76, 53),
- **Summer RGB**: (255, 216, 148), (194, 176, 107), (83, 138, 106), (73, 75, 88),
- **Autumn RGB**: (230, 227, 171), (216, 147, 110), (163, 100, 92), (90, 68, 72),
- **Winter RGB**: (254, 254, 254), (203, 200, 218), (137, 119, 142), (90, 68, 72)
- **Spring RGB**: (240, 236, 187), (181, 175, 105), (115, 130, 92), (95, 76, 53),
- **Summer RGB**: (255, 216, 148), (194, 176, 107), (83, 138, 106), (73, 75, 88),
- **Autumn RGB**: (230, 227, 171), (216, 147, 110), (163, 100, 92), (90, 68, 72),
- **Winter RGB**: (254, 254, 254), (203, 200, 218), (137, 119, 142), (90, 68, 72)

- **Background** (for the script transparency): 21, 19, 21 (equal to HTML 151315)
- **Background** (for the script transparency): 21, 19, 21 (equal to HTML 151315)
Background is translated to true transparency of: (255, 255, 255, 0) by the script.

## FAQ
Expand All @@ -133,4 +132,5 @@ In other cases (like items) they are to be enlarged enough to utilize the palett
"Shadow" sprites can be **sparingly** used as placeholders.

## Thanks for reading! Good luck out there

![check](image/check.png)
11 changes: 6 additions & 5 deletions doc/style/MShockXotto+/SUMMARY.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@

You can read it from the beginning or jump to the topic:

[Start](./readme.md)
- [Monsters](./readme.md#monsters)
- [Items](./readme.md#items)
- [Furniture](./readme.md#furnitures)
- [Terrain](./readme.md#terrain)
[Start](./general.md)

- [Monsters](./general.md#monsters)
- [Items](./general.md#items)
- [Furniture](./general.md#furnitures)
- [Terrain](./general.md#terrain)
12 changes: 6 additions & 6 deletions doc/style/MShockXotto+/readme.md → doc/style/MShockXotto+/general.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# General
# MShockXotto+ style guide

MShockXotto+ was originally the mashup of the MShock and the Xotto tileset, both of which were already build on a few other tilesets. This means that MSX never had a strong style guide.
And it still has not, the present style guide will list a few rules to follow but since MSX is a patchwork of different styles there's a lot of wriggle around the guide.
Expand All @@ -8,34 +8,34 @@ The main thing that we want to keep from the previous tilesets is the anime/cart
- Clean texture without random noise
- Keep the colour count per material (bone, meat, cotton, wood, metal etc...) low, around 3-4 per material.

# Monsters
## Monsters

![monsters](image/monsters.png)

- Black outline RGBA(0,0,0,255)
- Round shadow directly below the monster RGBA(0,0,0,115)

# Items
## Items

![items](image/items.png)

- Black outline RGBA(0,0,0,255)
- Items should be roughly scaled to the character, meaning that small object like pens and box cutter should be 20x20 and big items like disconnected oven should be 32x32.
- However, magnified items, like this 32x32 cooked meat sprite, are still okay for the sake of being easy to recognise and looking nice.

## Grades of Steel
### Grades of Steel

![Grades of Steel](image/steel_palettes.png)

Use those palettes to differentiate the various grade of steel in items

# Furnitures
## Furnitures

![furnitures](image/furnitures.png)

- Outline using a less-saturated, darker color taken from the sprite's palette.

# Terrain
## Terrain

![terrain](image/terrain.png)

Expand Down
7 changes: 4 additions & 3 deletions doc/style/summary.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ Not because it's important to keep the tileset consistent, but also to make thin
Without strict rules, any tileset will quickly turn itself into a pixels mash up.

Different tilesets have different guides:
- [UltimateCataclysm (Ultica)](./UltimateCataclysm/summary.md)
- [MShockXotto+](./MShockXotto+/summary.md)
- [HollowMoon](./HollowMoon/summary.md)

- [UltimateCataclysm (Ultica)](./UltimateCataclysm/summary.md)
- [MShockXotto+](./MShockXotto+/summary.md)
- [HollowMoon](./HollowMoon/summary.md)

0 comments on commit 2051afc

Please sign in to comment.