User talk:CLA

How colors other than white and magenta work

TODO: magenta=alpha, proofread, verify, rewrite?, link in graphic set and tileset pages

where to put? colors section on graphics page? color page?

When the game draws a tile, it will select a foreground color, a background color, and a tile based on the item being drawn. The background color will be used in place of magenta (Hex code #FF00FF or RGB 255 0 255). All other colors in the tile will be treated as a mask against the foreground color. Pure white (#FFFFFF) will always show the foreground color, while light grey (#CCCCCC) will be a slightly darker version of the foreground color, and dark grey (#888888) will be a dark version of the foreground color. Black (#000000) will always be black. It is impossible to use different shades of the background color.

In general, just remember these rules:

Bright magenta (#FF00FF) is the background.
Bright white (#FFFFFF) is the foreground.
Darker shades of white and grey (#C0C0C0, #808080, etc) will display darker shades of the foreground color. It is possible to use any shade of grey, including ones like #333333 and #C2C2C2.
Black (#000000) will always be black.
It's probably best to avoid color in normal tilesets.

For an example, the game is drawing an exposed turquoise cluster with color bright blue (#0000FF). While loading the tile image, it encounters the color light grey (#CCCCCC). The color used in its place will be:

Color component	Foreground color	Color mask from tile	Calculation in hex	Calculation in decimal
Red	#0000FF	#CCCCCC	00₁₆ * CC₁₆ / 100₁₆ = 00₁₆	0 * 204 / 256 = 0
Green	#0000FF	#CCCCCC	00₁₆ * CC₁₆ / 100₁₆ = 00₁₆	0 * 204 / 256 = 0
Blue	#0000FF	#CCCCCC	FF₁₆ * CC₁₆ / 100₁₆ = CB₁₆	255 * 204 / 256 = 203
Final Color			#0000CB	0 0 203

Color masks with unequal amounts of R, G and B are calculated in the same fashion. The game is now drawing a speardwarf with color brown (#C0C000). It encounters the color cyan while loading the tile (#008080). The color used instead of cyan will be:

Color component	Foreground color	Color mask from tile	Calculation in hex	Calculation in decimal
Red	#C0C000	#008080	C0₁₆ * 00₁₆ / 100₁₆ = 00₁₆	192 * 0 / 256 = 0
Green	#C0C000	#008080	C0₁₆ * 80₁₆ / 100₁₆ = 60₁₆	192 * 128 / 256 = 96
Blue	#C0C000	#008080	00₁₆ * 80₁₆ / 100₁₆ = 00₁₆	0 * 128 / 256 = 0
Final Color			#006000	0 96 0

As illustrated by this example, colors in the tileset can result in colors that aren't in the foreground color or the tile graphic. In this case, a brown foreground color with a cyan pixel color in the tileset results in a final color of green.

Theoretically, the way the game handles color masks could be used to display different graphics for items that use the same tile (but whose respective colors use different color component channels). For example, if a bright red object and a bright blue object use the same tile, the tile can use bright red for all pixels that only the red object uses, bright blue for all pixels only the blue object uses, and bright magenta (but NOT #FF00FF, it would have to be #FE00FE or something similar) for all pixels both objects use. In this fashion the two objects that share a tile would look completely different. In practice however, this is probably impossible because so many objects share the same tile, the chances of the potential foreground colors sharing a red, green, or blue color component are too great.

Creating your own

Creating your own Tileset

Deciding on size

The character tileset is always arranged in 16x16 tiles but their size is variable. So the first decision you have to make when creating a new tileset is deciding on the tile size: Bigger tiles allow you to draw more details, but you will be able to see less of them at the same time. Non-square tilesets have tiles that are taller than they are wide. The text in these tilesets is generally easier to read, but the map appears squished horizontally. Square tilesets usually provide more attractive graphics, but are slightly less readable without enabling TrueType. More information about size is on the tileset and custom grid pages. Less important points to consider are subdivisions, even/uneven numbers, and popularity. Especially the first two have very little effect, but they're listed for completeness.

Subdivisions

For example, a 10x10px wide tile is divisible by 2/5; 16 by 2/4/8; 18 by 3/6/9. In practice, this could have an effect on tiles where you plan to use multiple subdivisions in symmetry. On a 10x10 tileset, you can't have a checkered floor tile with 9 symmetric small squares; on a 18x18 tileset, you can. If you want them to have a border, the calculations change.

Even/uneven numbers

Tiles with uneven dimensions (9x9, 15x15) have a center pixel. Some tiles benefit from some sort of center point (maybe a gear assembly), and on small tile sizes, a 2x2 center simply would be too thick. So you need to decide between circular symmetry and linear symmetry.

Popularity

Square tilesets - especially 16x16 - are the most popular choice amongst users. Even if you just use the tileset for yourself, you might want to use it together with existing creature graphics, which mostly exist for 16x16 tilesets. While not strictly necessary, it is recommended to use the same tile size for the tileset and creature graphics.

Choosing a base tileset

It's a lot easier to start with an existing tileset than to start with a blank file. You have something to go from and have an overview of the rough look of the original tile. You might not want to change every tile anyway. Obviously you should choose one that has the same tile size as you plan on using; A tileset that already looks close to

Editing a tileset

This tutorial is a step-by-step guide on changing a few tiles from a tileset, saving it, and setting DF to use it. It should contain everything a user without previous experience needs for basic tileset editing. We will be using curses_square_16x16.bmp (a stretched variant of the default tileset) as a base tileset. The instructions apply to Photoshop CS5, but should work with all recent versions of Photoshop and possibly with small differences in GIMP and other bitmap editing programs. You will only need to use a small amount of features: Layers and groups, transparency and masks, and some basic tools (pen, eraser, selection tool). So any program that allows you to use layers, alpha transparency, and can save .png files with transparency should be completely sufficient.

Opening and preparing the base tileset

You should download the newest version of DF and install it in a separate folder. Try to create a typical fortress to see how your new tileset will look in the most common situations

For the purpose of teaching it properly, some steps might seem unnecessary complicated for the scope of the changes in this tutorial. See graphics#good practices below

Open your bitmap editor and load the file "curses_square_16x16.bmp". You will find it in your DF folder in data/art.

First, make sure you see the following panels: Layers, channels, tools. If not, you can open them in the menu bar under "Window".
press ctrl+k (or navigate to edit>preferences>general) and click on "guides grids & slices" on the left. Under "grid" set the value for "Gridline Every" to your tile size. In our case, 16 and press OK. You still need to press ctrl+' to make it visible. You should now see a yellow grid on the tile borders.

Our new tileset will be a .png with alpha transparency, so we will have to get rid of the magenta background.

Right click on the "Background" layer in the layer panel and select "Make layer from background..."
use the Wand tool (w) and click anywhere on the magenta color; make sure "continuous" and "anti-aliasing" are unchecked in the top bar. Then, press del on the keyboard.
right click on it, select layer properties and rename it to "base tileset". In big, complicated files, organizing your layers is crucial. Name them appropriately. If you have lots of layers, try to organize them into groups.
with the layer still selected, press on the "add layer mask" button (bottom of the layers panel, grey square with white circle inside).A layer mask hides pixels of a layer everywhere it's black. White areas are visible. you can draw directly on it like any normal layer by selecting it. Make sure to select the one you want to edit, layer or its mask. You can make it visible in the channel panel, or by pressing '\'

We will use it to mask any of the original tiles we change.

Drawing a white tileset is a lot easier looking at a darker background instead of a checkered greyish white., but we will be using a helper layer instead that won't be visible in the final version. You can also change the background color under preferences>transparancy (ctrl+k). If you only use the program to draw DF tilesets, you might want to use that instead.

make a new layer (shift+ctrl+n or the button next to the trash can at the bottom of the layers panel)
verify that you selected the new layer and that your foreground color is black (D to switch to default colors); press alt+del
move the layer of the background by dragging it down on the layers panel
Rename it to Black background. Give it another color to differentiate it from other layers.
Now we only need a new layer for the changes we plan to make. Ctrl+shift+n, move it on top, and call it "new"

This concludes our preparations. Save the file as .psd in your project folder (ctrl+s). We will now add eyebrows to the dwarf tile (tile #1, second tile in first row) and draw a new bed. Finally we will copy the walls of another tileset and use them in ours.

make sure the base tileset layer is selected. Use the marquee tool (m) to select the dwarf tile; right click on the selection and click on "Layer from copy"
Select the dwarf again, this time while selecting the mask of the base tileset and press alt+del (make sure your foreground color is black)
verify the tile is invisible by toggling visibility of "Layer 1"
Select the Layer with the dwarf on it and draw eyebrows with the pen (n) in white. You can change the tool size right below the menu bar (tool bar).
Select the eraser tool and set the mode to "pencil" in the tool bar. Give the dwarf a shave and erase some pixels from his beard.

Once you're happy with the outcome, select both, "layer 1" and "new". Merge them with ctrl+e and save your document.

Next we'll draw a new bed.

Select the base tileset mask again, and with the pen, draw directly (in black) on the bed to make it invisible. We won't be copying the bed to a new layer because it will be completely different.
Back to layer "new" and start drawing a bed in white.For quick drawing, it's often faster to switch between black and white (x to toggle background/foreground color) instead of switching to the eraser and back to the pen.

If you choose to do that, make the black background layer invisible once you're done and delete all the black pixels at the end.

We'll now manually merge two tilesets by adding the walls from another one.

download a 16x16 tileset from the repository and open it in photoshop (keep your new tileset open, too).
Right click on the background layer and "duplicate layer" into your new tileset file.
go back to your tileset, rename the layer to "walls" and select the walls with a marquee. holding shift lets you select additional areas, holding alt lets you subtract areas
Select the new layer and, with the marquee selection still active, add a mask. If you chose a tileset with magenta background, remove it as shown above.

Now we want to mask the exact same tiles on the base layer

ctrl click on the mask of the "walls" layer to select visible pixels
with the marquee selection active, select the mask of "base tileset" and press alt+del (with black as foreground color)

Save your document again. At this point we're done with our changes and want to export the image.

Make the black background invisible and go to File>Save for web&devices...
on the top right, set the file type to PNG-24 and make sure transparency is ticked
press save and give it a fancy name

TODO:set init, format, add images?

- basic photoshop stuff: masks, layers, alpha channel transparency, some tools (pen, eraser, selection tools) (get someone to add GIMP equivalents)
- good practices: non-destructive editing, using separate layers, organizing in groups and naming layers, grid (plus subgrid, pixel grid), debug layers, save often.
- walkthrough of making a new tileset
  - preparation download fresh DF install, put into separate test directory, make world, start fortress, ideally with a typical fortress and all objects visible somehow
  - open base tileset of your choice (square vanilla in this case?), set grid to right size, make visible
  - bmp or png, magenta/alpha transparency
    - use png, and alpha transparency, if you start with bmp, make layer from background, select magenta with wand, press del. save as psd
    - first debug/auxiliary layer : black background; new layer, move to back, [d], alt+del. Give it a nice name and color in layers menu
  - change bed, give dwarf beard:
    - non-destructive editing: select dwarf & bed tile, layer with copy.
    - select base layer again, invert selection, press mask button, lock layer, save as psd
    - select new layer, draw beard on with pen
    - erase bed, draw new bed
  - save as psd again
  - test out your creation
    - make debug layers invisible
    - save for web & devices: png-24, alpha transparency in data/art.
    - open data/init/init.txt, point to your new tileset
    - load up DF, marvel at your artistic genius.
  - Not good enough yet? Kill DF (strg+shift+esc), change in PS, overwrite tileset, start DF again.

advanced stuff/raw changes

init & raw changes, link to tileset lists
most commonly used tiles with multiple meanings: u-d-stairs/bins/cursor/archery, male/female
note on unused tiles
compatibility, dependency, conflicts, maintainance across versions (file changes.txt, etc)
TODO: best place to add documentation about raw syntax (plants, init, etc)

tricks and magic

how df blends colors/background/foreground
transparency, partial transparency (including opaque background tiles), engraving, INVERTED, animated tiles
[1]

advanced photoshop stuff

actions: automating common steps. for example export: select debug layers, make invisible, save for web and devices

TODO: copypasta.txt includes some old tutorials I wrote, check it.

stuff to change on tileset page once everything's in place

main creature tiles section: add something like "for a list with raw names see {here|link to graphic set#table}"

Creature Graphics

this page

conflicts, reminder to delete example files or better, overwrite with empty file
link to list of creatures by tile, add names grabbed from raws with wiki template;
testing (link to utilities#raw explorer)
suggestions about grouping

TODO for 'graphic set' page (listed here for drafting)

templates
- .psd templates will they work in gimp?
- text templates, complete with dimensions so you just have to draw. separated by biome?

TrueType Font

bug, commonly missing symbols in existing TTF, fontforge

Colors

add short intro
be aware of contrasting colors, best to test how every color looks withe every other color

add it all together

releasing your own stuff
dffd, other file hosts
updating to a new version, resolving conflicts: change log, file changes.txt, diff