Help with Beginning/Making/Editing a Tileset

Edit: WARNING: A lot of repetitive text ahead. Check the lowest posts for the most relevent (if out of context) info. If you want help on making tilesets, StopSignal has made a great guide amongst my ramblings.

Edit2: I think I’ve clean up some of my clutter. Should be slightly easier to get through now.

I’m considering trying to make my own character sprites for a tileset. However I have little modding and coding experience, and I’m unsure of where to start.

I recently decided to use the ChestHole tileset and really enjoyed the wearable sprites feature. However I prefer character sprites (Are they sprites or tiles?) like those from the MShock24 tileset that are more proportional to the human body. My current plan is to edit an existing tileset and I have already changed the appearance of some of the wearable sprites more to my taste in the ChestHole tileset. But I’m unsure of how to code the orientation of equipment so that, for example, wearing pants causes the pants sprite to appear over the legs area of the player sprite. Beyond that I was also wondering if it is possible to implement new sprites. By that I mean making player or npc sprites that are different (skin color, hair, eyes, etc.) perhaps randomly, by choice, or due to the professions chosen during character creation, or maybe different sprites of the same item for different characters, such as a female vs male character, or a heavily mutated character. I also noted that in the Chesthole tileset the sprite for the football helmet and the heavy survivor helmet are the same, so I would want to create a unique sprite for each if possible.

I apologize if there are any guides for this kind of thing that I have missed on the forums. If there are any guides for this type of coding on the internet in general, I would appreciate it if someone were to suggest some.

Thank you for any of your help or suggestions.

For the orientation of wearable sprites, it occurred to me while examining the tiles.png that each tile takes up a certain amount of space (pixels?), including the player. For example, in order a make a hat that goes on the player’s head, you would make a hat of the appropriate size, that matches the location of the head on the player, within the limits of the size available for any given tile. Is this assumption correct or am I looking at something that occurs as a result of some sort of coding?

Also I am still unable to determine how the wearable sprites are coded so that they appear when the player has the corresponding item equipped, and how to make it so that the sprites overlap each other in the correct order.

Looking at the tile_config JSON file, it looks like the order of the items listed matches the order of the images of the tiles from the tiles.png from left to right, and the “fg”: and “bg:” are coordinates of some sort.

After looking at the tile_config JSON some more, I realize that there appears to be id names (the words after the “id:” that I assume are item id names) that have the words “overlay” and/or “worn” in their names. These do not have “bg:” value listed under them. Some items have the same “fg:” value such as the “overlay_worn_helmet_football” and the “overlay_worn_helmet_hsurvivor”, which I assume are the wearable sprites for the football helmet and the heavy survivor helmet. There are some items that do not have “overlay” or “worn” in their id names, that also do not have a “bg” value. Specifically I found “straw_fedora” that also has the same “fg:” value as 3 other hats. I’m not sure if this is intentional or some sort of mistake.

Is it possible that “fg:” is part of the coordinates or something similar for the images in the tiles.png, as well as determining the order in which the images appear?

Sorry for the lame response, I’m in a hurry but when I get time I’ll answer correctly!

Your assumptions are correct, each tile takes a determinate amount of space, that is told by the code at its start (it says something like

“Width=20,
Height=20”

At the start of the code)

The order of the overlays is determined by the player if he presses + while playing! There you can reorder he layers with S I think.

I will make a full reply later!

Wow… I didn’t even think about layers. Thanks for the help.

For size are the values pixels - nvm I think I figure this one out.

Edit: It also looks like I didn’t search hard enough. Here is Chase’s Tileset Editor
http://smf.cataclysmdda.com/index.php?topic=5309.0
I actually found a different editor by Robik that is working so far. I haven’t gotten too far into it so I’m not sure how much it can help in regards to creating new sprites for the same tile (My different hair, face, etc. idea). It looks like it supports gender specific overlays which would solve one of my problems.

Edit2: I also just came up with a new idea. Is it possible to make a sprite specifically for when the player is unarmed? By this I mean adding an overlay for arms and legs in a neutral position, over a limbless player sprite, when they are not wielding anything, and then adding the arms to the weapon overlays and perhaps putting the legs in an “action pose”. I thought of this because I liked how the ChestHole tileset shows wielded weapons and tools, but trying to recreate that effect on a more proportional figure that is always in a neutral pose might be a little awkward. Though it might get too complicated when trying to factor in worn clothing and armor. The player sprite/tile would be armless, and everything that they can wield would also have an overlay with arms attached that would line up with the torso. So the base tile sprite of the player wouldn’t actually have arms and the arms that would appear attached to them would depend on what the player is wielding. If this is possible then I could even look into changing this according to martial arts knowledge.

The problem is I don’t know of a way to include the armor or clothing of what the player is wearing in the tile sprite for the wielded weapon. My idea regarding that issue would be a 3rd sprite or tile (still don’t know what to call it) overlay that would become visible depending on what the player is wearing and wielding. In this way I would only need to attach hands to the weapon sprite/tile/overlay/things as the arms would depend on what clothing is being worn. But this would almost certainly require some sort of coding that is very unknown to me. Perhaps I could stumble my way through the source code until I find something, assuming of course that I understand what I’m looking at.

I’m really not sure how much of these ideas are possible when creating a tileset, and how much of them would have to be done through changes to the game itself or through modding. I’m kind of using this thread as a slightly unorganized way to keep track of my ideas currently. I might try to clean it up a bit if I can.

Ok, there is a lot to read so sorry if i got dizzy and forgot one of your points. I will answer each thing you ask since the starting post.

-I’m considering trying to make my own character sprites for a tileset. However I have little modding and coding experience, and I’m unsure of where to start.

Well, you have come to the right place! I’ll try to help.

-My current plan is to edit an existing tileset and I have already changed the appearance of some of the wearable sprites more to my taste in the ChestHole tileset. But I’m unsure of how to code the orientation of equipment so that, for example, wearing pants causes the pants sprite to appear over the legs area of the player sprite.

This will be a rather easy explanation if you know hoe the code works. In any case, i will answer like if you didn’t know.


This is what you will see when you open the Chesthole Tileset folder.
It’s really clean, and we only see the Tiles image, the Fallback image, the Tileset.txt and the Tile_config. I’ll explain each one.

The Tiles image contains all the sprites/tiles you’ll use in your tileset. It does not have an especific size, and it can be as large as you want.
The Fallback image contains all the sprites the game will use if it finds an object that has not been assigned a tile for. It’s pretty cool.
The Tileset.txt contains something like this:

#Generated from project in Cataclysm DDA Tileset Studio
#Name of the tileset
NAME: ChestHole
#Viewing (Option) name of the tileset
VIEW: ChestHole
#JSON Path - Default of gfx/tile_config.json
JSON: ChestHoleTileset/tile_config.json
#Tileset Path - Default of gfx/tinytile.png
TILESET: ChestHoleTileset/tiles.png

Now i will explain each thing.

#Generated from project in Cataclysm DDA Tileset Studio //This was automatically added by the tileset studio. If you use it, you will get that. Don’t erase it, not because it would cause problems, but because it’s nice to credit.
#Name of the tileset //Also, each line starting with a # is not read by the game, IIRC. Only the lines without it.
NAME: ChestHole //This is the ingame name of your tileset. I think it should not have spaces, but i don’t know.
#Viewing (Option) name of the tileset
VIEW: ChestHole //This is the name displayed by the game when you select a tileset.
#JSON Path - Default of gfx/tile_config.json
JSON: ChestHoleTileset/tile_config.json //Here you put the name of the tileset folder, in this case ChestHoleTileset, and its JSON text, the config one. Change it accordingly.
#Tileset Path - Default of gfx/tinytile.png
TILESET: ChestHoleTileset/tiles.png //This line is the one that refers to the Tiles.png. Again, change the folder accordingly.

Note that the fallback is not commented. It’s automatically read by the code, because the tile_config refers to it.

Then there is tiles_config.
Tiles_Config is the heart of your tileset. Is the code that tells which square refers to each object ingame. It also has a bit of data. Let’s break it down.

FIRST: I recommend downloading Notepad++ for this. It’s just a must for any kind of coding, and it will fix your life.
https://notepad-plus-plus.org/download/v6.7.9.2.html
I will be using this program. With that out out the way, we continue.


This is what you will see.

{
“tile_info”: [
{
“height”: 24,
“width”: 24
}
],

If you are familiar with coding, this will be pretty easy. In any case…

{ //This is a bracket. Brackets are like separators, one opens and the other one closes, and they are made for organizing. If you put any bracket wrong, it won’t be read and the game will crash or the tileset will have serious bugs. Don’t worry though, it’s not at all hard to do this good. Still, try to always use the templates that are already written in the code to not screw up. Because it’s hard to fing THAT ONE BRACKET that makes everything go wrong. ALSO, this is the WAY FIRST bracket, and if you check the WAY LAST bracket, you will see that they are both related.
“tile_info”: [ //do not change this
{ //neither this
“height”: 24, //this is the height of EACH tile. So, if you input “20” here, and have an image wich its height is, let’s say, 200, then the code will believe that every 20 pixels down, there is a tile, and so you will be able to take 10 tiles of 20 pixels from that image. ALSO, DO NOT ERASE THAT COMMA. Or the spaces. Just change the number, nothing else. The code is delicate!
“width”: 24 //the same applies here! Like, of the other text. The one of height.
} //not this!
], //nope

Then we go to the next text. Haha, next text. That sounds funny.


“tiles-new”: [
{
“file”: “gfx/RetroDaysTileset20/retrodaystiles20.png”,
“transparency”: { “R”: 0, “G”: 0, “B”: 0 },
“tiles”:
[
{
“id”:“highlight_item”,
“fg”:368,
“rotates”:false
},
{
“id”:“footstep”,
“fg”:316,
“rotates”:false
},
{
“id”:“corpse”,
“fg”:274,
“rotates”:false
},
{
“id”:“unknown”,
“fg”:54,
“rotates”:false
},
{
“id”:“weather_acid_drop”,
“bg”:14
},
{
“id”:“weather_rain_drop”,
“bg”:13
},

You don’t have to be pretty awesome to realize that they repeat, in sequence. Each one starting and ending with bracket and divided by commas.

We will dissect one of them.

    {
        "id":"t_dirt",
        "bg":1,
        "rotates":false
    },

If you see, it is not on the other list, but it’s just for familiarity.
Now, even more dissection.

    { //start
        "id":"t_dirt", //this is the ID. Whenever you want to add a tile, you have to tell the game which object/tile you are trying to represent. The list of codes can be given if you go to the debug menu of the game and wish for the item or search for it in the terraineditor. Even in the monster spawner. EVERYTHING has an ID you got to use. Which overlays the case is a bit different.
        "bg":1, //This is IMPORTANT. This is the "number" of the tile. If you divide, like cutting a cake, the tile image with the numbers you applied to the height and width, (which would make it look like if it had some kind of coordinates over it, i'm bad for explaining) and then start counting from the upper left corner to the right, the number you get when you get to the tile you want to use)
        "rotates":false //Pretty straightforward, if it rotates or not.
    }, //close

That’s it! However, there are different kinds of “sections”. So, let’s see the variants.

    {
        "id":"t_wall",
        "fg":88,
        "bg":2,
        "multitile":true,
        "additional_tiles":
        [
            {
                "id": "center",
                "fg": 88
            },
            {
                "id": "corner",
                "fg": 384
            },
            {
                "id": "edge",
                "fg": 88
            },
            {
                "id": "t_connection",
                "fg": 385
            },
            {
                "id": "end_piece",
                "fg": 88
            },
            {
                "id": "unconnected",
                "fg": 88
            }
        ],
        "rotates":false
    },

Hah! But it’s really easy:

    {
        "id":"t_wall",
        "fg":88,
        "bg":2,
        "multitile":true, //THIS is what makes certain tiles, like walls, have all those nice corners and connections. It's beautiful. If you don't write it, it defaults to false, so you got to write it to make it true.
        "additional_tiles": //to write the tiles
        [ //So, this bracket is not outside of the main section, it's actually inside. So the ID is not lost.
            {
                "id": "center", //This tile should go in the center if its surrounded by four tiles.
                "fg": 88//the Center tile. The other ones are for corner, edge, t, end piece, and unconnected respectively.
            },
            {
                "id": "corner", //this would be a corner.
                "fg": 384
            },
            {
                "id": "edge", //i think this one is if it just has two connections, and they don't bend.
                "fg": 88
            },
            {
                "id": "t_connection", //a T connection.
                "fg": 385
            },
            {
                "id": "end_piece", //Like, the head of a snake, it's where a line ends.
                "fg": 88
            },
            {
                "id": "unconnected", //unconnected
                "fg": 88
            }
        ],
        "rotates":false 
    },

SO WE FINALLY GOT TO THE OVERLAYS. Woah, i got carried away. I guess that could help other people, though.

    {
      "id": "overlay_worn_helmet_xlsurvivor",
      "fg": 372,
      "rotates": false
    },

As you see, it’s the same. Just that in the ID it has //overlay_worn_// and that the tile must have the clothes exactly in the place they /would/ go if the other tile was under it. If not, it will look bad. Use the player tile for reference.
This finished! ALSO! Remember to save. Notepad++ won’t save unless you tell it to. Not even when closing. If you close, the changes will stay saved, however.

-Beyond that I was also wondering if it is possible to implement new sprites. By that I mean making player or npc sprites that are different (skin color, hair, eyes, etc.) perhaps randomly, by choice, or due to the professions chosen during character creation, or maybe different sprites of the same item for different characters, such as a female vs male character, or a heavily mutated character.

I’m sorry, i don’t think that is possible as of now.

-I also noted that in the Chesthole tileset the sprite for the football helmet and the heavy survivor helmet are the same, so I would want to create a unique sprite for each if possible.

Then just find the football/survivor helmet ID and put it into this template down here, and also it’s FG number.

    {
      "id": "xxx",
      "fg": xxx,
      "rotates": false
    },

HOWEVER you may not know where to find this ID. I got this one way.

So if you haven’t added a key for the DEBUG menu, add it like this. Go to the game, and put “?”. Then choose the option to change keys. Then go to the last part, you will find it all the way down. Like this.

Now go to the debug menu. If you need an item, go to Wish for an item. For a terrain go to the map editor, if you want a monster put spawn monster, etc…
We won’t SPAWN them, we will just look at their code.

for example, we need the football helmet. So we will go to Wish For An Item, and then we will use “/” to search for the item. Put its name, and when you find it, look for this.

THAT is the ID. So you just got to add “overlay_worn_” before it, in the ID! And paste it in the code, RESPECT THE COMMAS. And save.

-I apologize if there are any guides for this kind of thing that I have missed on the forums. If there are any guides for this type of coding on the internet in general, I would appreciate it if someone were to suggest some.

This is the first one i think!

-Thank you for any of your help or suggestions.

Thanks! This is some pretty useful information. I do appreciate the step-by-step explanation, there was some basic stuff that I probably could have missed had you not pointed them out.

There are tileset editors but I don’t think they are exactly helpful in creating new tiles? Unless you just clone tiles and then change them, but wouldn’t you still need to actually insert the new image for the new tile somewhere? Or is that done automatically by the tileset editor. I’ll probably just have to try it.

I still don’t understand how the game knows to put items with “overlay_worn” in their id over the character sprite (I might find it as something that was recently given support in the patch notes of some update), but if there’s a specific file where all this is done I could potentially find it and change it so that the game chooses a different “bg:” tile depending on what the player is wielding and wearing. I think I may have made this more confusing than it should be, but that’s OK, it makes sense to me(I’m lying). Similarly if I could replicate what the code does for wearable and wieldable item overlays, but for when the character is wielding nothing, I could then assign a shadow tile with arms that are in a neutral position.

I know that, at least with the ChestHole tileset, depending on your profession you get different items, and so a different appeareance, so perhaps I could somehow tie certain overlays with certain professions. With further coding wizardry could I apply this to my whole “arms shadow” thing and give someone who has a military background a bit more of a professional stance when wielding firearms?

Assuming somehow I can code my earlier ideas in, what I had in mind is that a different face could be plastered upon your character depending on your profession, like a wearable mask that can’t be removed. Same for body proportions and skin color (basically the whole base sprite is covered by a sort of permanent suit overlay thing). I could also assign different wearable and wieldable sprite based on the profession, where someone taller would have only clothing that fits their body shape. Or I could make the player to start with some sort of clothing item with no stats that has a certain overlay attached to it that is the player’s appearance. This wouldn’t be ideal as you would have to make sure that the clothing item is always on the bottom layer, and it might be awkward if you lose it. Then using my powers of assumption, I assume that you are able to add items that an npc has a random chance to spawn with. Either that or there is a list of npc that start out with predetermined items that are randomly chosen to be spawned. Regardless if either is true, I could work with that to add the weird skin-suit to the npc’s starting items, but I don’t know that you can control how an npc will layer their clothing, or what the npc decides to do with any piece of clothing they are wearing at any given time.

Edit: Also could something be done with the whole corner and edge thing that walls have? Sorry if this question doesn’t make sense, I don’t think I understood that bit very well, but I’ll peruse the title_config and tileset editors and hopefully understand all this better. Maybe even do something with some tile and see what happens.

Edit2: Ah yes I did miss a point.

The Tiles image contains all the sprites/tiles you'll use in your tileset. It does not have an especific size, and it can be as large as you want
"height": 24, //this is the height of EACH tile. So, if you input "20" here, and have an image wich its height is, let's say, 200, then the code will believe that every 20 pixels down, there is a tile, and so you will be able to take 10 tiles of 20 pixels from that image.

So the tileset.png can be as big as I want. Is there some way I can tell the game to take a tile proportional to the size values defined in the tile_config, and scale it down so it fits? As I said before, I would like to be able to make some more detailed faces for the player sprite. But I also don’t want massive tiles that hinder how much the player can actually see without doing something drastic to their game resolution.

Also(x3) I’ll post the like to Robik’s tileset editor (Windows only I think) here in case anyone curious had the same trouble finding it that I did.

Robik’s Tileset Studio http://smf.cataclysmdda.com/index.php?topic=5686.0

Y’see, the reason my tileset has different characters based on starting profession is the starting professions are all clad differently. If you put different clothes on a profession, they will appear differently.

This is tied to the clothing worn instead of the profession. You could put on a hat that changes your skin color. Ooh, even better - a badge.

Basically my tileset is made of layers, generic naked sprite, plus mutations, plus clothing, plus weapon. These can all be tied to either male or female.

Great post Stopsignal. The only thing I’d add is the new manual tile rotation.

You can add an array of tiles to the foreground of anything, so instead of rotating the one tile, it uses your four new tiles for rotation.

The fun part is, I have no idea what happens if you add rotates: true and add sprites to say the player sprite! What happens to vehicle tiles? I don’t know!

So do you have any idea if you can give a character an overlay but no item? Or maybe an invisible (in the inventory) group of items that can’t be changed but are coded to layer on top of each other in a particular order? I was thinking of having face overlays that go on player sprites like a mask.

I should rephrase this and ask: do you know if you can code the professions to start the player off with different starting equipment?

Yes, you could give the character either a mutation, a cbm, or an item that changes their appearance. But you would have to specially code it to be not removable.

Sure you can code professions to start the player off with different starting equipment. Lots of mods do this. I think it is as simple as editing a json file.

Oh hey, Stopsignal. You don’t have to load up the game to get the id, it can be found in the url of the item browser here:

http://cdda-trunk.estilofusion.com/

Then go to the page that the item you’re doing is on and look at the url. The last bit is your id.

Or in dRbiG’s json browser:

http://kaer.eu.org:8112/

OK, this should be an easy question. What exactly is tile rotation? I can’t seem to find it in the wiki. And thanks for helping out.

I’ll look into how much I can do with changing what the player starts with. The mutagen or cbm idea sound pretty sound. Potentially I could add traits that do this as well? This might allow the player to choose their appearance during character creation.

Edit: I’m pretty sure I understand the “fg:” and “bg:” values now. There’s nothing in the first “slot” because there is some sort of issue where the 0th tile must be transparent? Anyways I believe everything is in a gride going left-to-right and top-to-bottom, with each grid being the size of the tile in pixels, defined in the tile_config JSON. So allegedly if I were to count down to 605 in the ChestHole tileset I would find a shadow tile that is used for the items with “bg”: 605 (I just realized I’ve been writing “bg:” and “fg:” for a while, so pardon that error please). And I assume it’s important that the grid is in rows of 16?

Edit2: To any tilemakers who want to answer, would you recommend a more “cartoonish” (I’m not sure if there’s a better word for it. Maybe pseudo-realistic?) art style vs a realistic approach? I’ve realized at this point that my original idea isn’t working too well, the faces are just too small. Any input is appreciated.

Edit3: I’ve started a new post featuring the development of this project. This thread will now be reserved for any questions I have regarding tileset making.

My new thread - http://smf.cataclysmdda.com/index.php?topic=10726.0

Is there a specific file where the overlays are managed or do I just have to muck about (the files and the forums) until I find something?

You mean, where the overlays are specified? Or where the codes for them can be found?

Ah sorry, I phrased that pretty badly. I was thinking of more of where the game deals with traits, stats, etc. in coding, as well as were the game is able to take item id’s with “overlay_worn” and present them as overlays, if that makes any sense. Basically I want to try to assign overlays to traits in a similar way that you might be able to assign overlays to mutations or a cbm.

I think traits are treated as mutations, so you actually can do that? Though i don’t know the deal with CBMs.

The easiest way to do that is to use the search function and search for what you want in the code of other overlays. It’s not stealing if you ask them, but to be honest the code will be the same anyways.